gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 06:09:27 25 4
gpt4 key购买 nike

好的,我正在制作一个 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>

关于javascript - 单击 Javascript 时替换网页中字符串的所有实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39380229/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com