在单击Javascript时替换网页中字符串的所有实例

Replace all instance of a string in a webpage on click Javascript

本文关键字：字符串 实例 网页 单击 Javascript 替换      更新时间：2023-09-26

好的，所以我正在制作一个Chrome扩展，我想要它，以便扩展有2个按钮，一个打开扩展，一个关闭它。而扩展正在运行，我希望它取代"ab"到"ef"的网页上的所有实例(只是一个例子)。这意味着，在用户点击后，扩展将始终转换"ab"到"ef"上的每个网页，而不必每次打开它。我是通过Javascript来做到这一点的。这是我的代码(HTML和Javascript)，请看看你能做什么!

JSFiddle: https://jsfiddle.net/syf5f687/

HTML: 

<!doctype html>
<html>
  <head>
    <title>AB to EF</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>AB to EF Converter</h1>
    <button id="turnOn">Turn On</button>
    <button id="turnOff">Turn Off</button>
  </body>
</html>

JS(我认为这是完全错误的，我甚至没有把关闭按钮):

var markup = document.documentElement.innerHTML;
document.addEventListener('DOMContentLoaded', function() {
  var checkPageButton = document.getElementById('turnOn');
  checkPageButton.addEventListener('clickOn', function() {

    chrome.tabs.getSelected(null, function(tab) {
      markup.replace(/ab/, "ef")
    });
  }, false);
}, false);

我建议不要替换html。首先，您可能会意外地更改元素标签名称，其次，替换html将使整个文档不得不重新解析和重新呈现，因为您正在引入一组新的html代码。

我建议遍历文本节点并替换textContent属性。

你可以通过使用TreeWalker api来实现。创建一个树行走器，createTreeWalker()通过NodeFilter.SHOW_TEXT，只选择文本节点，然后在每个节点上替换textContent。

var element = null;
var walker = document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,null,false);
while(element=walker.nextNode()){
   element.textContent = element.textContent.replace(/ab/g,"ef");
}

注意，这将改变脚本和样式标签中的文本节点，所以如果你不想这样做，你可以添加一个过滤器作为第三个参数来跳过它们。

演示

function changeIt() {
  var element = null;
  var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
  while (element = walker.nextNode()) {
    element.textContent = element.textContent.replace(/ab/g, "ef");
  }
}
document.querySelector("button").addEventListener("click",changeIt);
div {
  padding:5px;
  border:1px solid rgba(0,0,0,0.3);
}
<button>Change text</button>
<div>
  able, dabble, fabble, crabble
  <span>mable, cable, fable</span>
</div>
<div>
  able, dabble, fabble, crabble
  <span>mable, cable, fable</span>
</div>
<div>
  able, dabble, fabble, crabble
  <span>mable, cable, fable</span>
  <div>
    able, dabble, fabble, crabble
    <span>mable, cable, fable</span>
    <div>
      able, dabble, fabble, crabble
      <span>mable, cable, fable</span>
    </div>
  </div>
</div>

相关文章：