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

Question

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

我试过的:

document.body.innerHtml和类似的( document.getElementByTagName('p) )不适用于简单的 .replace(/Foo/g, '<a>Bar</a>')因为它最终可能会取代 Foo类名或 id，所以它打破了页面。也可能会影响 body 中的一些 js 脚本。

仅编辑 textNodes(使用类似 this 的内容)不起作用，因为它显示 a标签作为文本，而不是创建 DOM 元素。

尝试解决 textNodes 问题并转到父元素并应用 .replace那里只是产生与第一个子弹相同的问题。

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

Answer 1

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

包含“字符串之前的所有内容”的文本节点，

您想要的标签的 HTML 节点(不要使用 <a>，除非它是实际链接)，然后是

另一个包含所有剩余文本的文本节点。

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

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