Question

我正在寻找使用JavaScript替换网页（我想要运行它的任何网页）中的文字。我不是JavaScript的专家，所以我有点迷茫。如果我可以帮助它，我想避免使用jQuery。

通过Google，我发现了this stackoverflow问题。但是，当我将document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');注入网页时，它会让页面混乱。它似乎使页面恢复为基本文本和格式。

另外，我想知道是否可以使用来自here的正则表达式代码。再说一次，我真的不确定如何使用它。它的作用是只替换网页文本 - 而不是链接或文件名。

我正在使用Google Chrome浏览器。

Answer 1

您可以在DOM中的所有文本节点上执行您的补充：

function replaceTextOnPage(from, to){
  getAllTextNodes().forEach(function(node){
    node.nodeValue = node.nodeValue.replace(new RegExp(quote(from), 'g'), to);
  });

  function getAllTextNodes(){
    var result = [];

    (function scanSubTree(node){
      if(node.childNodes.length) 
        for(var i = 0; i < node.childNodes.length; i++) 
          scanSubTree(node.childNodes[i]);
      else if(node.nodeType == Node.TEXT_NODE) 
        result.push(node);
    })(document);

    return result;
  }

  function quote(str){
    return (str+'').replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
  }
}

Quote function borrowed from this answer.

用法：

replaceTextOnPage('hello', 'hi');

请注意，您需要在旧版浏览器中使用SHIM forEach或使用如下循环替换该代码：

var nodes = getAllTextNodes();
for(var i = 0; i < nodes.length; i++){
    nodes[i].nodeValue = nodes[i].nodeValue.replace(new RegExp(quote(from), 'g'), to);
}

Answer 2

最近，我不得不运用类似的问题，我想出了类似的东西：

<!DOCTYPE html>
<html>
<head>
  <title>HTML JS REPLACE</title>
  <script type="text/javascript">
  function convert(elem) {
    var content = document.getElementById(elem).innerHTML; // get HTML content for the given element
    var pattern = new RegExp(/hello/gi);
    content = content.replace(pattern,'hi');
    document.getElementById(elem).innerHTML = content; // put the replace content back
  }
  </script>
</head>
<body>
  <div id="content">
    Some text that includes both hello and hi. And a hello.
  </div>
  <script type="text/javascript">
    window.onload = convert('content');
  </script>
</body>
</html>

结果将是你会得到一个页面说：

包含hi和hi的一些文字。还有一个嗨。

虽然原始资料仍然说：

包含hello和hi的一些文字。和你好。

棘手的部分实际上只是少数 - 首先，您希望window.onload触发器包含在body的底部，因此DOM在运行任何JS之前完全加载。其次，您必须拥有一个顶级块元素，您可以为其分配一个可以从JS引用的唯一ID。第三，convert函数使用正则表达式，它通过将字符串“hello”更改为“hi”来执行对字符串“hello”的全局不区分大小写的替换。

您的特定应用程序可能需要捕获所有出现的内容，然后在循环中解析它们，这可能（或可能不会）导致某些性能问题。小心：）

替换网站中的文字

2 个答案: