Question

我有一个表情符号列表，如：

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

我希望通过:emoji_name:检测并替换一个函数，例如，如果文本是：嗨，大家好！：微笑：，将:smile:替换为，我猜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;

演示

＆＃13;

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;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如果你想在单个函数中使用，只需将replace调用放在函数中并返回结果

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函数演示

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

似乎很简单 text.replace(/:(smile|smiley|grin|joy):/g, '');
应该这样做。

Answer 3

循环遍历所有数组项，并使用Regex替换所有项。然后将字符串放入容器中。

我的功能

function stringToEmoji(text){
    var findText = '',
        htmlString = '';
    $.each(emojies, function(i, _this){
        findText=new RegExp(':'+$.trim(_this)+':','i');//need to add 'gi' to work properly
        htmlString = text.replace(findText,"<span class='emoji " + _this + "emoji_name'></span>")
    })
    return htmlString;
}

改进使用Patrick的回答

function stringToEmoji(text){
    var findText = '',
        htmlString = '',
        regex = new RegExp(":("+ emojies.join("|") +"):","gi");
    htmlString = text.replace(regex,"<span class='emoji $1'></span>");
    return htmlString;
}

替换JavaScript中的表情符号列表

3 个答案: