表情符号不适用于（Safari 和 Chrome 浏览器）中的多个表情符号

Question

我正在尝试使用 jquery 制作表情符号。但我有多个表情符号的问题。我从 jsfiddle.net 创建了这个demo。

如果用户编写不同的多个表情符号，jquery 代码可以正常工作，但如果用户编写两个或多个微笑，例如 :):):):) 则 jquery 代码仅显示第一个表情符号，其他表情符号将不会显示。任何人都可以在这里帮助我吗？

JS

jQuery.fn.emoticons = function(icon_folder) {
    /* emoticons is the folder where the emoticons are stored*/
    var icon_folder = icon_folder || "emoticons";
    //var settings = jQuery.extend({emoticons: "emoticons"}, options);
    /* keys are the emoticons
     * values are the ways of writing the emoticon
     *
     * for each emoticons should be an image with filename
     * 'face-emoticon.png'
     * so for example, if we want to add a cow emoticon
     * we add "cow" : Array("(C)") to emotes
     * and an image called 'face-cow.png' under the emoticons folder   
     */
    var emotes = {"smile": Array(":-)",":)","=]","=)"),
                  "sad": Array(":-(","=(",":[",":<"),
                  "wink": Array(";-)",";)",";]","*)"),
                  "grin": Array(":D","=D","XD","BD","8D","xD"),
                  "surprise": Array(":O","=O",":-O","=-O"),
                  "devilish": Array("(6)"),
                  "angel": Array("(A)"),
                  "crying": Array(":'(",":'-("),
                  "plain": Array(":|"),
                  "smile-big": Array(":o)"),
                  "glasses": Array("8)","8-)"),
                  "kiss": Array("(K)",":-*"),
                  "monkey": Array("(M)")};

    /* Replaces all ocurrences of emoticons in the given html with images
     */
    function emoticons(html){
        for(var emoticon in emotes){
            for(var i = 0; i < emotes[emoticon].length; i++){
                /* css class of images is emoticonimg for styling them*/
                html = html.replace(emotes[emoticon][i],"<img src=\"http://www.oobenn.com/"+icon_folder+"/face-"+emoticon+".png\" class=\"emoticonimg\" alt=\""+emotes[emoticon][i]+"\"/>","g");
            }
        }
        return html;
    }
    return this.each(function(){
        $(this).html(emoticons($(this).html()));
    });
};

$(document).ready(function(){
    $(".posted").emoticons();
});

Answer 1

为此，您需要正则表达式，因为replace 中的标志（您的,"g"）已被弃用，并且不适用于所有浏览器（source）。

所以你需要用你的笑脸代码创建你的正则表达式：

var re = new RegExp(emotes[emoticon][i], 'g');

但由于您的笑脸代码包含特殊字符，您需要将其转义。为此，我从answer 中获取了一段代码：

function escape(smiley){
  return smiley.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}

最后，您可以使用replace 替换所有笑脸，即使有多个相同的笑脸：

var escaped = escape(emotes[emoticon][i]);
var re = new RegExp(escaped, 'g');
html = html.replace(re,"<img src=\"http://www.oobenn.com/"+icon_folder+"/face-"+emoticon+".png\" class=\"emoticonimg\" alt=\""+emotes[emoticon][i]+"\"/>");

Working Demo