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

Question

I am looking for a way to replace all instances of Foo with <a>Bar</a> (a functioning link) in a given website. Ideally without any extra library like jquery.

What I tried:

• document.body.innerHtml and similars ( document.getElementByTagName('p) ) won't work with a simple .replace(/Foo/g, '<a>Bar</a>') because it may end up replacing a Foo class-name or id, so it breaks the page. Also may affect some js scripts in the body.
• Editing only textNodes (with something like this ) does not work because it displays the a tags as text, instead of creating DOM elements.
• Trying to solve the textNodes problem and going to the parent element and applying .replace there just generates the same problem as the first bullet.

I've searched for answers to other similar questions but I haven't found any that solves this three points.

Answer 1

You're close, but you need to replace the entire text node with a set of three new nodes:

1. a textnode that contains "everything before your string",
2. an HTML node for the tag you want (and don't use <a> unless it's an actual link), and then
3. another textnode that contains all the remaining text.

And then, of course, that remaining textnode is now part of the still-unprocessed set of text nodes.

(unless you do a split for your term, then interleave as many additional nodes as needed. Then you just run through textnodes one by one without having to put "the remainder" back on your stack)