使用JavaScript替换HTML中的文本

Question

我正在尝试编写一个JavaScript程序，不使用jQuery替换网页上所有可见的目标文本，同时不影响页面的功能。具体来说，我正在尝试制作一个Chrome扩展程序，可以在Facebook等网站上被动地实现此功能。以下是我尝试过的方法，但效果有限：

checkLoad();
function checkLoad(){
    if (document.readyState === "complete") {
        document.body.innerHTML = document.body.innerHTML.replace("target string", "replacement string");
    } else {
        setTimeout('checkLoad();', 500)
    }
}

这段代码缺少人名、职称等内容。

我已经查找过，似乎找不到可行的解决方案。有什么建议吗？

- Andrew

---

你能举个它会错过什么的例子吗？如果是通过 AJAX 加载的内容，那么除非你不断地进行检查，否则可能会错过。 - Matt Burland

出于多方面的原因，我不建议使用 innerHTML，其中之一是因为这样会冒着修改HTML标签和属性内容的风险。 - Jim Blackler

Javascript函数.replace将正则表达式作为第一个参数。尝试使用等效的正则表达式版本替换第一个参数（即转义所有正则表达式特殊字符等）。 - MadSkunk

重写 innerHTML 是一个可怕的方法。阅读这里：https://dev59.com/DGs05IYBdhLWcg3wLfAj - Šime Vidas

请查看这篇文章 http://blog.alexanderdickson.com/javascript-replacing-text - Jim Blackler

Answer 1

简单的正则表达式来修复它：

document.body.innerHTML = document.body.innerHTML.replace(/target string/g, "replacement string");

- Bruno Sousa

---

那确实解决了我的innerHTML替换问题！谢谢。虽然显然这不再是解决我的问题的正确方法，但对于未来很有帮助。 - Andrew

这种方法的一个问题是将JavaScript事件处理程序与DOM解绑。 - Dylan Valade

警告 - 这似乎重新加载整个文档，导致从Chrome扩展触发的任何事件重新触发。 我还没有找到解决方法，因为我刚刚发现了这个问题。 提供给宇宙中受此影响的另一个人的FYI... - Joe B.

Answer 2

这个链接https://j11y.io/javascript/replacing-text-in-the-dom-solved/很酷，但我不完全同意其中的解决方案。在我看来，操作DOM可能过于复杂。

下面是我的棘手解决方案，仅使用正则表达式即可，因此可以使用element.innerHTML。这将替换除标签和类似于nbsp的内容之外的所有文本：

function highlightInHtml(html, textToHighlight) {
  const t = textToHighlight'

  const tagsRe = new RegExp('(<.+?>|&\\w+;)');

  const htmlParts = html.split(tagsRe).filter(Boolean);

  const r = htmlParts.map( item =>
    tagsRe.test(item)
      ? item
      : item.replace(new RegExp(`(${t})`, 'ig'), `<span class="highlight">$1</span>`)
  ).join('');

  return r;
}

如果这个解决方案有什么不足之处，请告诉我！

- alex_1948511

Answer 3

我建议不要替换innerHTML，原因如下这篇博客中所述(https://j11y.io/javascript/replacing-text-in-the-dom-solved/)：

1. 您无法保证被替换的文本是文本。也许它是html中的属性或其他相关代码。
2. 它会重置文档，在我的情况下，再次触发了我的Chrome扩展程序。这导致我的扩展程序一遍又一遍的重新加载。

我通过从该博客下载js文件并像以下方式调用来解决了这个问题:

  var regex = new RegExp(targetString, "g");
  findAndReplaceDOMText(document.body, {
    find: regex,
    replace: function(portion) {
      var e = document.createElement('span');
      e.appendChild(document.createTextNode(replacementString));
      return e;
    }
  });

我上面的用例将要替换的文本包裹在一个span标签中，所以它与您的略有不同。这个javascript函数非常灵活。

- Joe B.