Я ищу способ заменить все экземпляры Foo на {amp}lt;a{amp}gt;Bar{amp}lt;/a{amp}gt; (работающая ссылка) на данном веб-сайте. В идеале без какой-либо дополнительной библиотеки, как JQuery.

Что я пробовал:

  • document.body.innerHtml и аналогичные файлы ( document.getElementByTagName('p) ) не будут работать с простым .replace(/Foo/g, '{amp}lt;a{amp}gt;Bar{amp}lt;/a{amp}gt;') поскольку в конечном итоге он может заменить Foo имя класса или идентификатор, поэтому он разбивает страницу. Также может повлиять на некоторые js-скрипты в теле.
  • Редактирование только textNodes (с чем-то вроде этого ) не работает, потому что он отображает теги в виде текста, вместо создания элементов DOM.
  • Попытка решить проблему textNodes и переход к родительскому элементу и применение .replace там просто создает ту же проблему, что и первый пункт.

Я искал ответы на другие подобные вопросы, но я не нашел ни одного, который решает эти три пункта.

Вы близки, но вам нужно заменить весь текстовый узел набором из трех новых узлов:

  1. текстовый узел, который содержит «все перед вашей строкой»,
  2. HTML-узел для нужного тега (и не используйте {amp}lt;a{amp}gt; если это не фактическая ссылка), а затем
  3. другой текстовый узел, который содержит весь оставшийся текст.

И затем, конечно, этот оставшийся текстовый узел теперь является частью все еще необработанного набора текстовых узлов.

(если вы не выполните split для своего термина, затем чередуйте столько дополнительных узлов, сколько необходимо. Затем вы просто пробегаете текстовые узлы один за другим без необходимости помещать «остаток» обратно в свой стек)