用他们的图像替换表情符号列表答案

【问题标题】：Replace a list of emoticons with their images用他们的图像替换表情符号列表
【发布时间】：2010-06-16 17:03:17
【问题描述】：

我有一个数组：

emoticons = {
   ':-)' : 'smile1.gif',
   ':)'  : 'smile2.gif',
   ':D'  : 'smile3.gif'     
}

然后我有一个文本变量。

var text = 'this is a simple test :)';

和一个带有网站 url 的变量

var url = "http://www.domain.com/";

如何编写一个函数，用它们的图像替换符号？

<img> 标签结果应该是：

<img src="http://www.domain.com/simple2.gif" />

（我必须将 url 变量连接到图像的名称）。

非常感谢！

【问题讨论】：

标签： javascript emoticons

【解决方案1】：

另一种方法：

function replaceEmoticons(text) {
  var emoticons = {
    ':-)' : 'smile1.gif',
    ':)'  : 'smile2.gif',
    ':D'  : 'smile3.gif'
  }, url = "http://www.domain.com/";
  // a simple regex to match the characters used in the emoticons
  return text.replace(/[:\-)D]+/g, function (match) {
    return typeof emoticons[match] != 'undefined' ?
           '<img src="'+url+emoticons[match]+'"/>' :
           match;
  });
}

replaceEmoticons('this is a simple test :)');
// "this is a simple test <img src="http://www.domain.com/smile2.gif"/>"

编辑：@pepkin88 提出了一个非常好的建议，根据emoticons 对象的属性名称构建正则表达式。

这很容易做到，但如果我们想让它正常工作，我们必须转义元字符。

转义的模式存储在一个数组中，稍后用于使用RegExp 构造函数构建正则表达式，方法是将所有用| 元字符分隔的模式基本连接起来。

function replaceEmoticons(text) {
  var emoticons = {
    ':-)' : 'smile1.gif',
    ':)'  : 'smile2.gif',
    ':D'  : 'smile3.gif',
    ':-|'  : 'smile4.gif'
  }, url = "http://www.domain.com/", patterns = [],
     metachars = /[[\]{}()*+?.\\|^$\-,&#\s]/g;

  // build a regex pattern for each defined property
  for (var i in emoticons) {
    if (emoticons.hasOwnProperty(i)){ // escape metacharacters
      patterns.push('('+i.replace(metachars, "\\$&")+')');
    }
  }

  // build the regular expression and replace
  return text.replace(new RegExp(patterns.join('|'),'g'), function (match) {
    return typeof emoticons[match] != 'undefined' ?
           '<img src="'+url+emoticons[match]+'"/>' :
           match;
  });
}

replaceEmoticons('this is a simple test :-) :-| :D :)');

【讨论】：

如果根据emoticons中的键值生成正则表达式会更好。
@pepkin88: 很棒的建议 :)，我添加了一个功能，使之成为可能。
这可以通过关闭replace()（类似于this answer...）来进一步增强 - 这将加速对函数的重复调用。
@CMS 这对我的一个应用程序有很大帮助。
@redV 很高兴它对您有所帮助！

【解决方案2】：

for ( smile in emoticons )
{
   text = text.replace(smile, '<img src="' + url + emoticons[smile] + '" />');
}

【讨论】：

它不能正常工作，因为替换只替换匹配字符串的第一次出现。
仅用于替换每个笑脸的第一次出现。在像“This is removed :) but not this :)”这样的字符串中，第二个保持不变。
还要确保在for...in 语句中使用var，否则如果代码位于未在该范围内声明smile 变量的函数内部，它将变为全局，在循环中使用if (emoticons.hasOwnProperty(smile)) 是个好主意。
好的，那么如何使用 .replace() 替换多个出现的？
替换不止一次出现的变化 smile 到 new RegExp(smile, 'g')

【解决方案3】：

使用带有查找替换元素数组的正则表达式效果很好。

var emotes = [
    [':\\\)', 'happy.png'],
    [':\\\(', 'sad.png']
];

function applyEmotesFormat(body){
    for(var i = 0; i < emotes.length; i++){
        body = body.replace(new RegExp(emotes[i][0], 'gi'), '<img src="emotes/' + emotes[i][1] + '">');
    }
    return body;
}

【讨论】：