javascript - 将文本转换为表情符号 JS

Question

我找到了这个脚本：（查找注释）

(function($){   
    $.fn.emotions = function(options){
        $this = $(this);
        var opts = $.extend({}, $.fn.emotions.defaults, options);
        return $this.each(function(i,obj){
            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;                       
            var x = $(obj);
            // Entites Encode 
            var encoded = [];
            for(i=0; i<o.s.length; i++){
                encoded[i] = String(o.s[i]).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
            }
            for(j=0; j<o.s.length; j++){
                var repls = x.html();
                if(repls.indexOf(o.s[j]) || repls.indexOf(encoded[j])){
                    var imgr = o.a+o.b[j]+"."+o.c;          
                    var rstr = "<img src='"+imgr+"' border='0' />"; 
                    x.html(repls.replace(o.s[j],rstr));
                    x.html(repls.replace(encoded[j],rstr));
                }
            }
        });
    }   
    // Defaults
    $.fn.emotions.defaults = {
        a : "images/emotions/",         // Emotions folder
        b : new Array("angel","colonthree","confused","cry","devil","frown","gasp","glasses","grin","grumpy","heart","kiki","kiss","pacman","smile","squint","sunglasses","tongue","unsure","upset","wink"),            // Emotions Type
        s : new Array("o:)",":3","o.O",":'(","3:)",":(",":O","8)",":D",">:(","<3","^_^",":*",":v",":)","-_-","8|",":p",":/",">:O",";)"),
        c : "gif"                   // Emotions Image format
    };
})(jQuery);


// Notes
// a - icon folder
// b - emotions name array
// c - image format
// x - current selector
// d - type of selector
// o - options 

该脚本将文本转换为情感。例如，:)=>

当我这样调用函数时：

$("#chat").emotions();

一切正常，并:)变成：

<img src="images/emotions/smile.png" border="0" alt="">

但是当我像这样调用函数时：

$("#chat .chatText").emotions();

:)变成：

<img src="images&lt;img src='images&lt;img src='images&lt;img src='images&lt;img src='images&lt;img src='images&lt;img src='images&lt;img src='images/emotions&lt;img src='images/emotions/snowman.png' border='0' alt='' /&gt;.png' border='0' alt='' /&gt;emotions&lt;img src='images/emotions/watermelon.png' border='0' alt='' /&gt;.png' border='0' alt='' /&gt;emotions/can.png' border='0' alt='' /&gt;emotions/liquor.png' border='0' alt='' /&gt;emotions/blowkiss.png' border='0' alt='' /&gt;emotions&lt;img src='images/emotions/qq.png' border='0' alt='' /&gt;.png' border='0' alt='' /&gt;emotions&lt;img src='images/emotions/beauty.png' border='0' alt='' /&gt;.png' border='0' alt='' /&gt;emotions/smile.png" border="0" alt="">

我的 html 看起来像这样：

<div id="chat">
    <div class="message">
        <p>...</p>
        <p class="chatText">
            ...
        </p>
    </div>
    <div class="message">
        <p>...</p>
        <p class="chatText">
            ...
        </p>
    </div>
</div>

我该如何解决这个问题？

Answer 1

当我在jsfiddle中尝试时对我有用

<div id="chat">
    <div class="message">
        <p>...</p>
        <p class="chatText">
            ... :)
        </p>
    </div>
    <div class="message">
        <p>...</p>
        <p class="chatText">
            ... :)
        </p>
    </div>
</div>

(function($){   
    $.fn.emotions = function(options){
        $this = $(this);
        var opts = $.extend({}, $.fn.emotions.defaults, options);
        return $this.each(function(i,obj){
            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;                       
            var x = $(obj);
            // Entites Encode 
            var encoded = [];
            for(i=0; i<o.s.length; i++){
                encoded[i] = String(o.s[i]).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
            }
            for(j=0; j<o.s.length; j++){
                var repls = x.html();
                if(repls.indexOf(o.s[j]) || repls.indexOf(encoded[j])){
                    var imgr = o.a+o.b[j]+"."+o.c;          
                    var rstr = "<img src='"+imgr+"' border='0' />"; 
                    x.html(repls.replace(o.s[j],rstr));
                    x.html(repls.replace(encoded[j],rstr));
                }
            }
        });
    }   
    // Defaults
    $.fn.emotions.defaults = {
        a : "http://www.sherv.net/cm/emo/laughing/",         // Emotions folder
        b : ["crying-laughter-smiley-emoticon"],            // Emotions Type
        s : [":)"],
        c : "gif"                   // Emotions Image format
    };
})(jQuery);


// Notes
// a - icon folder
// b - emotions name array
// c - image format
// x - current selector
// d - type of selector
// o - options 


$("#chat .chatText").emotions();