用JavaScript在链接中替换字符？

Question

If I have a block of text inside a div like:

<div id='t1'>
This is a great testing string.  Tomorrow grass is green.
</div>

我想将所有字母"g"替换为指向google的链接，例如

<a href='www.google.com'>g</a>

是否可能只用Javascript/jquery来完成这个操作？

- David19801

Answer 1

如果您想执行简单的字符串替换，可以使用以下方法：

var div = document.getElementById("t1");
div.innerHTML = div.innerHTML.replace(/g/g, "<a href='http://www.google.com'>g</a>");

如果您需要更多的动态效果，例如根据值用链接替换单词，请使用以下代码：

示例：将 g 或 G 替换为不同的 URL：

var div = document.getElementById("t1");
var mapper = {
    g: "http://www.google.com",
    G: "http://stackoverflow.com"
};
div.innerHTML = div.innerHTML.replace(/[Gg]/g, function(fullmatch){
    return "<a href='" + mapper[fullmatch] + "'>" + fullmatch + "</a>";
});

- Rob W

---

如果我想替换所有句号的实例，那么我会使用“/./g”吗？ - David19801

你应该使用 \., 因为 . 匹配除换行符外的所有字符（在正则表达式中，句点具有特殊意义）。 - Rob W

/word/g 是一个正则表达式，用于匹配 "word"。/g 告诉 replace 函数继续匹配，直到找不到匹配项（默认行为是在第一次匹配时停止）。 - Rob W

@RobW 哦，对了！我之前对于/g的理解是错误的！非常感谢你。 - Isuru

Answer 2

无需 jQuery。

var t1 = document.getElementById('t1')
t1.innerHTML = t1.innerHTML.replace(/g/g, '<a href="http://www.google.com/">g</a>')

在/g/g中，第一个g代表您要搜索的内容。第二个g表示全局（即替换所有）。

- 700 Software

Answer 3

$('#t1').html( $('#t1').text().replace(/g/g,"<a href='www.google.com'>g</a>") );

- Babak Bandpay

---

请注意使用text而不是其他html单词。优点是>不会被替换破坏。它将被视为>并在最终结果中仍然起作用。这是我和Rob的解决方案所缺乏的东西。可能存在的危险缺点是<span onmouseover="...">有可能引入XSS漏洞，因为生成的文本将被重新设置为HTML <span onmouseover="...">。因此，只有在已知原始输入是安全的情况下才应使用此代码。 - 700 Software