8

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

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

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

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

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

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

4

3 回答 3

11

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

document.body.innerHTML = document.body.innerHTML.replace(/target string/g, "replacement string");
于 2012-11-25T03:48:55.230 回答
1

我建议不要从这个博客（ https://j11y.io/javascript/replacing-text-in-the-dom-solved/）替换innerHTML ：

  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 函数有很大的灵活性。

于 2017-03-02T19:47:31.200 回答
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;
}

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

于 2019-11-07T08:27:57.363 回答