使用JavaScript解析表情符号

Question

我有一个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;
  });
}

Answer 1

您需要在regex表达式中添加更多捕获组：

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

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

你可以做这样的事情来避免这种情况：

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;
}

编辑 ：这里有一个小提琴 ，上面的实现。

Answer 2

用于使用表情符号循环您的对象，因此您只需要定义一次。 这是一个代码的工作示例： 小提琴

function smilyMe(msg) {
  for (var key in smileys) {

      var match = new RegExp(key.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"), "g");
      msg = msg.replace(match, smileys[key]);

   }
  return msg
}