jquery 用图像替换文本（用于表情符号）

Question

这两行代码完美运行-

var html = $this.find('pre').html().replace(':mellow:','<img src="http://i2.ifrm.com/html/emoticons/mellow.gif">');
$this.find('pre').html(html);

（找到字符串 :mellow: 并将其替换为特定图像。）

我遇到的困难是试图将它变成我不必将这两行代码重复 50 或 60 次的东西。（我正处于初学者阶段，你最终会编写数百行代码，而你本可以在三行内完成。）

你如何将上面的内容变成可以处理多个表情符号代码（例如：mellow:、:lol: 等）并找出相应的图像（与代码同名，减去 ::).

伪代码示例-

var emoCodes = [
    ':mellow:', ':lol:', ':ninja:'
];          
var html = $this.find('pre').html().replace(+emoCodes+,'<img src="http://i2.ifrm.com/html/emoticons/+CorrespondingImage+.gif">');
$this.find('pre').html(html);

好的，谢谢。

Answer 1

您使用数组的方式是正确的，因为您需要查找表情符号代码和相应的图像，您可以创建一个对象数组：

var emoCodes = [
    {code: ':mellow:', img: '<img src="http://i2.ifrm.com/html/emoticons/mellow.gif">'},
    {code: ':lol:', img: '<img src="http://i2.ifrm.com/html/emoticons/lol.gif">' },
    {code: ':ninja:', img: '<img src="http://i2.ifrm.com/html/emoticons/ninja.gif">' }
];

然后循环遍历应用 code 和 img 属性的数组：

for(var i=0: i<emoCodes.length; i++) {
    var html = $this.find('pre').html().replace(RegExp(emoCodes[i].code,"g"),emoCodes[i].img);
    $this.find('pre').html(html);
}

此方法允许您将任何代码应用于任何图像，即使 code 未嵌入它的 url。

Answer 2

应该这样做：

var emoCodes = [
  ':mellow:', ':lol:', ':ninja:'
];
var $this = $("body");

emoCodes.forEach(function(code) {
  var image = '<img src="http://i2.ifrm.com/html/emoticons/' + code.replace(/:/g, "") + '.gif">';
  $this.find('pre').html(function(index, html) {    
    return html.replace(new RegExp(code, "g"), image);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>:mellow::mellow::lol::ninja:</pre>

jquery 用图像替换文本（用于表情符号）

jquery replace text with image (for emoticons)

jquery

emoticons