我有一个数组：
emoticons = {
':-)' : 'smile1.gif',
':)' : 'smile2.gif',
':D' : 'smile3.gif'
}
然后我有一个文本变量。
var text = 'this is a simple test :)';
和一个带有网站网址的变量
var url = "http://www.domain.com/";
如何编写一个用图像替换符号的函数？
该<img>标签的结果应该是：
<img src="http://www.domain.com/simple2.gif" />
（我必须将 url 变量连接到图像的名称）。
非常感谢！
另一种方法：
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 :)');
for ( smile in emoticons )
{
text = text.replace(smile, '<img src="' + url + emoticons[smile] + '" />');
}
使用带有查找替换元素数组的正则表达式效果很好。
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;
}