用 JavaScript 替换 HTML 中的文本答案

【问题标题】：Replacing Text in HTML with JavaScript用 JavaScript 替换 HTML 中的文本
【发布时间】：2012-11-12 21:24:45
【问题描述】：

我正在尝试编写一个不使用 jQuery 的 JavaScript 程序来替换网页上所有可见的目标文本，而不会破坏页面的功能。

具体来说，我正在尝试制作一个 Chrome 扩展程序，它可以在 Facebook 等网站上被动执行。

我在以下方面取得了有限的成功：

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

此代码遗漏了人名、头衔等内容。

我环顾四周，似乎找不到可行的解决方案。有什么想法吗？

【问题讨论】：

你能举个例子说明它遗漏了什么吗？例如，如果它是通过 AJAX 加载的，是的，除非您不断检查，否则您可能会错过它。
出于多种原因，我不推荐使用innerHTML；一方面，您将冒险修改 HTML 标记和属性的内容。
Javascript 函数 .replace 将正则表达式作为第一个参数。尝试用它的等效正则表达式版本替换第一个参数（即转义所有正则表达式特殊字符等）
重写innerHTML 是一种糟糕的方法。在这里阅读：stackoverflow.com/q/7392930/425275
它错过了一些事情，比如如果我输入一个人的名字，他们所有帖子旁边的名字都不会改变，而他们在 cmets 或帖子内容中的名字会改变。

标签： javascript replace

【解决方案1】：

链接https://j11y.io/javascript/replacing-text-in-the-dom-solved/ 很酷，但我不是 100% 同意解决方案。恕我直言，在 DOM 上行走可能有点矫枉过正。

这是我仅在 regexp 上工作的棘手解决方案，因此可以使用 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;
}

如果此解决方案有弱点，请告诉我！

【讨论】：

【解决方案2】：

出于以下几个原因，我建议不要替换此博客 (https://j11y.io/javascript/replacing-text-in-the-dom-solved/) 中的 innerHTML：

您不能保证替换的文本是文本。也许是 html 或其他相关代码中的属性。
它重置文档，就我而言，再次触发了我的 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 函数有很大的灵活性。

【讨论】：

【解决方案3】：

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

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

【讨论】：

这确实解决了我的 innerHTML 替换问题！谢谢你。虽然显然这不再是解决我的问题的正确方法，但很高兴知道未来。
这种方法的一个问题是它会从 DOM 中解除 javascript 事件处理程序的绑定。
警告 - 这似乎会重新加载整个文档，导致从 chrome 扩展触发的任何事件重新触发。我还没有找到解决方法，因为我刚刚发现了问题。仅供参考宇宙中的另一个人，这会影响......