javascript - 替换字符串中的内容所需的 Jquery 函数

Question

我有一个文本区域，用户可以在其中键入内容，还可以包含表情符号，例如 :) 或 ;)

当按下“发送”时，需要解析文本区域字符串以将任何表情符号转换为 <img>用于显示。

我可以轻松生成表情符号列表和相关图像，例如:

 ':)' - '<img src="/images/happy.jpg"/>'
 ';)' - '<img src="/images/wink.jpg"/>'

我假设上面的内容可以放入关联数组中。

有人可以指出正确的方向来创建表情符号和 html img 标签的关联数组，然后解析字符串以用 html img 标签替换匹配的符号吗？

同样出于兴趣，有没有更好的方法来做到这一点？

谢谢

Answer 1

您实际上描述了这种行为:

var map = {
    ':)':   '<img src="/images/happy.jpg"/>',
    ';(':   '<img src="/images/wink.jpg"/>'
},
text    = document.getElementsByTagName('textarea')[ 0 ].value;

Object.keys( map ).forEach(function( ico ) {
    // escape special characters for regex
    var icoE   = ico.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
    // now replace actual symbols
    text       = text.replace( new RegExp(icoE, 'g'), map[ico] );
});

示例:http://jsfiddle.net/DBfpw/2/

---

编辑
为了创建一个有效的正则表达式，我们需要转义 ) 和 (

注意
上面的代码片段包含 ECMAscript5 特色代码。如果您需要在旧版浏览器上运行它，请确保包含一个 ES5 Shim 库。

注释 2
抱歉，上面的代码不包含任何 jQuery 代码，因为它不是必需的。