使用 JavaScript 解析表情符号

Parsing emoticons with JavaScript

本文关键字：符号 JavaScript 使用      更新时间：2023-09-26

我有一个用作注释框的textarea，以及一个显示注释渲染预览的div。我希望能够解析表情符号并将其呈现为预览区域中的图像。

使用下面的代码，一些表情符号有效，但其他表情符号无效。不起作用的是：angel, arrow, at, :-], :-?, B-), B), ;), exclamation, <3, huh, my, roll, :(, shy, |-), :-P

我不确定为什么这些其他人不起作用。

JavaScript：

var smileys = {
    ':)': '<img src="smilies/smile.gif" border="0" alt="" />',
    ':-)': '<img src="smilies/smile.gif" border="0" alt="" />',
    ':D': '<img src="smilies/smile.gif" border="0" alt="" />',
    ':-(': '<img src="smilies/angry.gif" border="0" alt="" />',
    'angel': '<img src="smilies/angel.gif" border="0" alt="" />',
    'arrow': '<img src="smilies/arrow.gif" border="0" alt="" />',
    'at': '<img src="smilies/at.gif" border="0" alt="" />',
    ':-D': '<img src="smilies/biggrin.gif" border="0" alt="" />',
    'lol': '<img src="smilies/biggrin.gif" border="0" alt="" />',
    ':-]': '<img src="smilies/blush.gif" border="0" alt="" />',
    ':-?': '<img src="smilies/confused.gif" border="0" alt="" />',
    'B-)': '<img src="smilies/cool.gif" border="0" alt="" />',
    'B)': '<img src="smilies/cool.gif" border="0" alt="" />',
    ';)': '<img src="smilies/dodgy.gif" border="0" alt="" />',
    'exclamation': '<img src="smilies/exclamation.gif" border="0" alt="" />',
    '<3': '<img src="smilies/heart.gif" border="0" alt="" />',
    'huh': '<img src="smilies/huh.gif" border="0" alt="" />',
    'my': '<img src="smilies/my.gif" border="0" alt="" />',
    'roll': '<img src="smilies/rolleyes.gif" border="0" alt="" />',
    ':(': '<img src="smilies/sad.gif" border="0" alt="" />',
    ':-(': '<img src="smilies/sad.gif" border="0" alt="" />',
    'shy': '<img src="smilies/shy.gif" border="0" alt="" />',
    '|-)': '<img src="smilies/sleepy.gif" border="0" alt="" />',
    ':-P': '<img src="smilies/tongue.gif" border="0" alt="" />',
    ':-|': '<img src="smilies/undecided.gif" border="0" alt="" />',
    ';-)': '<img src="smilies/wink.gif" border="0" alt="" />'
};

$(document).ready(function() {
    $(".chat > textarea").bind("keyup", function(e) {
    $(".chat > div").html(smilyMe($(".chat > textarea").val()));
  });
});
function smilyMe(msg) {
  //smiley replace
  msg=msg.replace(/(?:'r'n|'r|'n)/g, '<br />');
  return msg.replace(/(':')|':-')|':D|':-D|'blol'b|':-'||':-'(|';-'))/g, function(all) {
    return smileys[all] || all;
    return str;
  });
}
您需要

向正则表达式添加更多捕获组：

msg.replace(/(':')|':-')|':D|':-D|'blol'b|':-'||':-'(|';-')|angel|arrow)/g
-----------------------------------------------------------^ here

由|管道分隔的每个项目|都是msg.replace()的潜在匹配项。向 smileys 对象添加更多项时，还必须向正则表达式添加更多组。

您可以执行以下操作来避免这种情况：

function smilyMe(msg) {
    msg = msg.replace(/(?:'r'n|'r|'n)/g, '<br />');
    for (var key in smileys) {
        msg = msg.replace(key, smileys[key]);
    }
    return msg;
}

编辑：这是上述实现的小提琴。

用于使用

笑脸遍历对象，因此您只需定义一次。下面是一个包含您的代码的工作示例： 小提琴

function smilyMe(msg) {
  for (var key in smileys) {
      var match = new RegExp(key.replace(/['-'[']'/'{'}'(')'*'+'?'.'''^'$'|]/g, "''$&"), "g");
      msg = msg.replace(match, smileys[key]);
   }
  return msg
}
相关文章：