Javascript 替换网站中的文本_Javascript_Html

Javascript 替换网站中的文本

javascript html

Javascript 替换网站中的文本,javascript,html,Javascript,Html,我想用JavaScript替换网页（我想运行它的任何网页）中的文本。我不是JavaScript方面的专家，所以我有点迷路了。如果我能帮上忙，我希望避免使用jQuery 通过谷歌，我发现了这个问题。但是当我注入document.body.innerHTML=document.body.innerHTML.replace（'hello'，'hi'）编码到网页中，会把页面搞得一团糟。它似乎使页面恢复为基本文本和格式另外，我想知道是否可以使用来自的正则表达式代码。再说一次，我真的不知道如何使用它。它将

我想用JavaScript替换网页（我想运行它的任何网页）中的文本。我不是JavaScript方面的专家，所以我有点迷路了。如果我能帮上忙，我希望避免使用jQuery

通过谷歌，我发现了这个问题。但是当我注入

document.body.innerHTML=document.body.innerHTML.replace（'hello'，'hi'）编码到网页中，会把页面搞得一团糟。它似乎使页面恢复为基本文本和格式
另外，我想知道是否可以使用来自的正则表达式代码。再说一次，我真的不知道如何使用它。它将只替换网页文本，而不是链接或文件名
我正在使用Google Chrome，以备不时之需。
您可以在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");
  }
}

请注意，您需要在较旧的浏览器中运行该代码，或者使用如下循环替换该代码：
var nodes = getAllTextNodes();
for(var i = 0; i < nodes.length; i++){
    nodes[i].nodeValue = nodes[i].nodeValue.replace(new RegExp(quote(from), 'g'), to);
}

var nodes=getAllTextNodes（）；
对于（var i=0；i
最近，我不得不练习一个类似的问题，我想出了类似的方法：
<!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>


HTML JS替换
函数转换（elem）{
var content=document.getElementById（elem.innerHTML；//获取给定元素的HTML内容
var模式=新的RegExp（/hello/gi）；
content=content.replace（模式，'hi'）；
document.getElementById（elem.innerHTML=content；//放回替换内容
}
一些包含hello和hi的文本。你好。
window.onload=转换（“内容”）；

结果将是，您将看到一个页面，上面写着：
包含hi和hi的某些文本。你好
而原始消息来源仍然说：
一些包含hello和hi的文本。你好
棘手的地方其实只是一些——首先，您希望window.onload触发器包含在主体的底部，这样DOM在运行任何JS之前都会完全加载。
其次，您必须有一个顶级块元素，您可以为该元素分配一个唯一的ID，您可以从JS引用该ID。
第三，convert函数使用正则表达式，通过将字符串“hello”更改为“hi”，执行不区分大小写的全局替换
您的特定应用程序可能需要捕获所有事件，然后在循环中解析它们，这可能会（也可能不会）导致一些性能问题。小心：）
如果在innerHTML
上执行字符串替换，它将重新生成所有元素并丢失事件绑定。这将导致上述问题？您试图实现什么？将“你好”改为“你好”？或者别的什么？你说的“我想在任何网页上运行它”是什么意思？您有权访问所有这些网站的代码吗？或者你想在类似的网站上做替换吗？哦，这只是一个例子。我真的希望能够自动筛选某些文本：你可能也有兴趣在我的答案中尝试解决方案。如果HTML包含要替换的字符串，则更安全（请考虑尝试将所有）。它还保留了所有Javascript事件，不需要重新创建页面上的每个DOM元素！对不起，我只能接受一个答案：）谢谢Paulpro，我绝对会调查的。但是，我的特定应用程序（我没有包括它，因为它对于本例来说太复杂了），必须将货币与单位匹配，单位可能包含或不包含几乎任何标记，并根据提取的数值执行数学运算。我一直在尝试在Chrome扩展中实现这一点，但它只替换了一些匹配项。还要帮忙吗？（My Chrome是最新版本。）@Numeri如果该短语在同一文本节点中出现多次，您需要继续调用replace，直到它不执行任何操作，或者使用带有全局标志的。我更新了我的答案，展示了如何使用RegExp完成它。谢谢！我试过regex，但我不知道我在做什么（在javascript方面）！：D@Numeri没问题，我很高兴能帮上忙。
<!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>