Question

我正在将像:)这样的微笑角色替换为图像。如果我只使用

var yorum4 = "hello :)";
yorum4 = yorum4.replace(/(:\))/g, "<img class='smileys' src='smile.png' \/>");

它正确替换。但是，当我将它用于多次替换时，

yorum4 = yorum4.replace(/(:\))/g, "<img class='smileys' src='smile.png' \/>");
yorum4 = yorum4.replace(/(:\()/g, "<img class='smileys' src='smile1.png' \/>");
yorum4 = yorum4.replace(/(;\))/g, "<img class='smileys' src='smile2.png' \/>");

它像

一样腐败和输出

<img src="http<img class="

更换多个微笑的正确方法是什么？

修改：这是完整列表

yorum4 = yorum4.replace(/(:\))/g, "<img class='smileys' src='i.png' \/>");
yorum4 = yorum4.replace(/(;\))/g, "<img class='smileys' src='j.png' \/>");
yorum4 = yorum4.replace(/(:\p)/g, "<img class='smileys' src='b.png' \/>");
yorum4 = yorum4.replace(/(:\P)/g, "<img class='smileys' src='b.png' \/>");
yorum4 = yorum4.replace(/(:\D)/g, "<img class='smileys' src='c.png' \/>");
yorum4 = yorum4.replace(/(:\d)/g, "<img class='smileys' src='c.png' \/>");
yorum4 = yorum4.replace(/(:'\()/g, "<img class='smileys' src='d.png' \/>");
yorum4 = yorum4.replace(/(:\*)/g, "<img class='smileys' src='a.png' \/>");
yorum4 = yorum4.replace(/(<\3)/g, "<img class='smileys' src='f.png' \/>");
yorum4 = yorum4.replace(/(:\o)/g, "<img class='smileys' src='he.png' \/>");
yorum4 = yorum4.replace(/(:\O)/g, "<img class='smileys' src='e.png' \/>");
yorum4 = yorum4.replace(/(:\()/g, "<img class='smileys' src='s.png' \/>");

Answer 1

您的/:\D/模式与冒号和任何非数字符号匹配，因此可以匹配网址协议部分中的:/。

如果您想要:D笑脸，请使用/:D/。所有文字字母和数字都是一样的：不要逃避它们。此外，在整个模式周围使用捕获组是没有意义的，如果您需要在替换模式中引用匹配值，只需使用$&（而不是$1）。

＆＃13;

var yorum4 = "hello :)";
yorum4 = yorum4.replace(/:\)/g, "<img class='smileys' src='i.png' \/>");
yorum4 = yorum4.replace(/;\)/g, "<img class='smileys' src='j.png' \/>");
yorum4 = yorum4.replace(/:p/g, "<img class='smileys' src='b.png' \/>");
yorum4 = yorum4.replace(/:P/g, "<img class='smileys' src='b.png' \/>");
yorum4 = yorum4.replace(/:D/g, "<img class='smileys' src='c.png' \/>");
yorum4 = yorum4.replace(/:d/g, "<img class='smileys' src='c.png' \/>");
yorum4 = yorum4.replace(/:'\(/g, "<img class='smileys' src='d.png' \/>");
yorum4 = yorum4.replace(/:\*/g, "<img class='smileys' src='a.png' \/>");
yorum4 = yorum4.replace(/<3/g, "<img class='smileys' src='f.png' \/>");
yorum4 = yorum4.replace(/:o/g, "<img class='smileys' src='he.png' \/>");
yorum4 = yorum4.replace(/:O/g, "<img class='smileys' src='e.png' \/>");
yorum4 = yorum4.replace(/:\(/g, "<img class='smileys' src='s.png' \/>");
console.log(yorum4);

＆＃13;

另一个提示：您可能希望使用字边界和非字边界，例如/\B:\)\B/或/\B:D\b/（在非字字符之前/之后添加非字边界\B和在单词字符之前/之后的单词边界\b将这些表情符号匹配为＆＃34;整个单词＆＃34;，但如果没有实际数据则很难说。

Answer 2

简单介绍一下Wiktor的答案（你应该接受的答案，而不是这个答案），它结合了我在this comment中提到并最初在this fiddle中演示的技术：

var yorum4 = "hello :)";
var smiles = {
    ":)":   "i.png",
    ";)":   "j.png",
    ":p":   "b.png",
    ":P":   "b.png",
    ":D":   "c.png",
    ":d":   "c.png",
    ":'\(": "d.png",
    ":*":   "a.png",
    "<3":   "f.png",
    ":o":   "he.png",
    ":O":   "e.png",
    ":(":   "s.png"
};
yorum4 = yorum4.replace(/:\)|;\)|:p|:P|:D|:d|:'\(|:\*|<3|:o|:O|:\(/g, function(m) {
    return "<img class='smileys' src='" + smiles[m] + "' \/>";
});
console.log(yorum4);

当然，该版本会让您列出每个笑脸标记两次。您可以从smiles对象的键构建正则表达式，确保处理任何必要的转义。我把它作为练习留给读者......

如果我运行多次替换检查，为什么它不能正确替换？

2 个答案: