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

Question

好的，我要制作一个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);

Answer 1

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

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

您可以使用TreeWalker api进行此操作。 使用createTreeWalker()传入NodeFilter.SHOW_TEXT创建树createTreeWalker()器，以仅选择文本节点，然后在每个节点上替换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>

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

问题描述

1 个解决方案

解决方案1
1 2016-09-08 00:07:22

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

问题描述

1 个解决方案

解决方案1 1 2016-09-08 00:07:22

解决方案1
1 2016-09-08 00:07:22