5

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

通过谷歌，我发现了这个stackoverflow 问题。但是当我注入document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');一个网页时，它有点把页面弄乱了。它似乎使页面恢复为基本文本和格式。

另外，我想知道是否可以使用此处的正则表达式代码。同样，我真的不知道如何使用它。它将只替换网页文本 - 而不是链接或文件名。

我正在使用谷歌浏览器以防万一。

4

2 回答 2

13

您可以对 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");
  }
}

从这个答案借来的报价功能。

用法：

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);
}
于 2013-08-27T20:17:04.830 回答
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 触发器包含在主体的底部，以便 DOM 在运行任何 JS 之前完全加载。其次，您必须有一个顶级块元素，您可以为该元素分配一个唯一 ID，您可以从 JS 中引用该 ID。第三，转换函数使用正则表达式，通过将字符串“hello”更改为“hi”来执行全局不区分大小写的替换。

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

于 2013-08-27T20:32:19.110 回答