javascript - 仅替换 jQuery 函数中的部分文本

Question

我正在使用此解决方案来替换表情符号列表:

(function($){
   var emojies = ["smile", "smiley", "grin", "joy"];
   var emojiRegex = new RegExp(":("+ emojies.join("|") +"):","g");
   $.fn.toEmoji = function(){
        return this.each(function() {
            this.innerHTML = this.innerText.replace(emojiRegex,function(fullmatch,match){
                return '<span class="emoji '+match.toLowerCase()+'"></span>';
            });                
        });
   };
})(jQuery);
//And use like
$(document).ready(function(){
    $(".content div").toEmoji();
});

但这会替换所有内容 div (this.innerHTML...)，但是，我没有办法这样做，只能替换 :emoji: 而不是所有文本？

因为，如果文本有换行，例如:

Hi!

How are you?

将替换为:

Hi! How are you?

除了其他问题……那么，怎么办呢？

Answer 1

问题是您正在从 DIV 读取为 innerText这将不包括像 <br/> 这样的 HTML 标签.相反，您可以使用 innerHTML 从 DIV 中读取像这样:

   $.fn.toEmoji = function(){
        return this.each(function() {
            this.innerHTML = this.innerHTML.replace(emojiRegex,function(fullmatch,match){
                return '<span class="emoji '+match.toLowerCase()+'"></span>';
            });                
        });
   };

备注this.innerHTML.replace而不是 this.innerText.replace !

JSFiddle:http://jsfiddle.net/ybj7gpn6/ (单击按钮后检查 HTML 以查看是否存在跨度——看起来像空白)