javascript - 替换 JavaScript 中的表情符号列表

Question

我有一个表情符号列表，例如:

var emojies = ["smile", "smiley", "grin", "joy"];

我想检测并替换 :emoji_name:通过 <span class='emoji emoji_name'></span>带有一个函数，例如，如果文本是:大家好! :smile:，替换 :smile:通过 <span class='emoji smile'></span>我猜 regex解决这个问题，但是，怎么办？

Answer 1

加入你的数组并创建一个正则表达式，然后你可以使用带有回调函数的替换(或者像 sln 的答案一样使用单行替换)来创建跨度

请注意，这假设所有表情符号名称都在 :

之间

var emojies = ["smile", "smiley", "grin", "joy"];
//Create a single regex
var regex = new RegExp(":("+ emojies.join("|") +"):","g");
/* Will result in /:(smile|smiley|grin|joy):/g
 * which basically is find smile OR simely OR grin OR joy 
 * between : and :
 */

var ele = document.getElementById("#whateverElement");
var result = ele.innerText.replace(regex,function(fullmatch,match){
   //fullmatch will be like :smile:
   //while match will be like smile, so you would want to use match in the class

   //Using a simple jquery call to create the span 
   //you could also just use string concatenation 
   var span = jQuery("<span>",{ class: "emoji "+match });

   //return the text you want to replace fullmatch with        
   return span[0].outerHTML;
});

ele.innerHTML = result;

演示

var emojies = ["smile", "smiley", "grin", "joy"];
var regex = new RegExp(":("+ emojies.join("|") +"):","g");
var ele = document.getElementById("someDiv");
var result = ele.innerText.replace(regex,function(fullmatch,match){
   var span = jQuery("<span>",{ class: "emoji "+match });
   return span[0].outerHTML;
});
ele.innerHTML = result;

.emoji {
  display:inline-block;
  height:32px;
  width:32px;
  background-size:cover !important;
}
.emoji.joy {
  background: url(http://pix.iemoji.com/images/emoji/apple/8.3/256/face-with-tears-of-joy.png) no-repeat 0 0;
}

.emoji.grin {
  background: url(http://pix.iemoji.com/images/emoji/apple/8.3/256/grinning-face.png) no-repeat 0 0;
}

.emoji.smile {
  background: url(http://pix.iemoji.com/images/emoji/apple/8.3/256/smiling-face-with-open-mouth-and-smiling-eyes.png) no-repeat 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="someDiv">
   This is an example :smile:, of some text :grin: :joy: :joy:  
</div>

如果你想把它放在一个函数中，只需将替换调用放在函数中并返回结果

var emojies = ["smile", "smiley", "grin", "joy"];
var emojiRegex = new RegExp(":("+ emojies.join("|") +"):","g");

function stringToEmoji(text){
   //stealing sln's answer to make this shorter
   return text.replace(emojiRegex, '<span class="emoji $1"></span>');
}

作为 jQuery 函数

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

JQuery函数演示

(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
$(".content div.addemoji").toEmoji();

.emoji {
  display:inline-block;
  height:32px;
  width:32px;
  background-size:cover !important;
}
.emoji.joy {
  background: url(http://pix.iemoji.com/images/emoji/apple/8.3/256/face-with-tears-of-joy.png) no-repeat 0 0;
}

.emoji.grin {
  background: url(http://pix.iemoji.com/images/emoji/apple/8.3/256/grinning-face.png) no-repeat 0 0;
}

.emoji.smile {
  background: url(http://pix.iemoji.com/images/emoji/apple/8.3/256/smiling-face-with-open-mouth-and-smiling-eyes.png) no-repeat 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content">
  <div class="addemoji">Some :grin: text :joy:</div>
  Content text
  <div class="addemoji">More :smile: text :joy:</div>
  even more content text
  <div class="addemoji">Yet some other :joy: text :grin:</div>
</div>