在不影响标签的情况下替换html中的所有单词

Question

我正在寻找一种方法来将给定网站中的所有Foo实例替换为<a>Bar</a> （一个功能链接）。 理想情况下没有任何额外的库，如 jquery。

我试过的：

• document.body.innerHtml和类似的document.getElementByTagName('p) （ document.getElementByTagName('p) ）不适用于简单的.replace(/Foo/g, '<a>Bar</a>')因为它最终可能会替换一个Foo类名或 id，所以它打破了页面。 也可能会影响 body 中的一些 js 脚本。
• 编辑只textNodes（与像这样，因为它显示）不起作用a ，而不是创建DOM元素的标签为文本。
• 尝试解决 textNodes 问题并转到父元素并在那里应用.replace只会产生与第一个项目符号相同的问题。

我已经搜索了其他类似问题的答案，但没有找到解决这三点的答案。

Answer 1

你已经接近了，但你需要用一组三个新节点替换整个文本节点：

1. 一个包含“字符串之前的所有内容”的文本节点，
2. 你想要的标签的 HTML 节点（不要使用<a>除非它是一个实际的链接），然后
3. 另一个包含所有剩余文本的文本节点。

然后，当然，剩余的文本节点现在是尚未处理的文本节点集的一部分。

（除非你对你的任期进行split ，然后根据需要交错尽可能多的额外节点。然后你只需一个一个地运行文本节点，而不必将“剩余部分”放回堆栈中）