将文本转换为表情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();