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

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

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

修改：通过上述实施，您可以fiddle。

Answer 2

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

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

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

   }
  return msg
}

使用JavaScript解析表情符号

2 个答案: