我想编写一个脚本,使页面“腐烂”,随机更改字符。假设我有一些如下所示的 HTML:
<div class="eebee">
Lorem Ipsum <a href="http://example.com">Anchor here</a>
</div>
我想用“∑”替换“e”的每个实例,这样就可以了
<div class="eebee">
Lor∑m Ipsum <a href="http://example.com">Anchor h∑r∑</a>
</div>
但是,显然,我不希望它成为
<div class="∑∑b∑∑">
Lor∑m Ipsum <a hr∑f="http://∑xample.com">Anchor h∑r∑</a>
</div>
如何实现? DOM 解析器?或者只是一些正则表达式,搜索 ∑∑n ">"和 "<"之间的内容?
编辑: 根据下面 Oriol 的解决方案,将其放入接受任何查找和替换字符串的函数中:
function decay(find_string, replace_string) {
var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
while(treeWalker.nextNode()) {
var node = treeWalker.currentNode;
re = new RegExp(find_string, "g");
node.nodeValue = node.nodeValue.replace(re, replace_string);
}
}
最佳答案
您可以编写一个简单的递归函数来迭代所有文本节点:
function iterateTextNodes(root, callback) {
for(var i=0; i<root.childNodes.length; ++i) {
var child = root.childNodes[i];
if(child.nodeType === 1) { // element node
iterateTextNodes(child, callback); // recursive call
} else if(child.nodeType === 3) { // text node
callback(child); // pass it to callback
}
}
}
iterateTextNodes(document.body, function(node) {
node.nodeValue = node.nodeValue.replace(/e/g, '∑');
});
<div class="eebee">Lorem Ipsum <a href="http://example.com">Anchor here</a></div>
或者如果你更喜欢内置的方式,你可以使用 tree walker
var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
while(treeWalker.nextNode()) {
var node = treeWalker.currentNode;
node.nodeValue = node.nodeValue.replace(/e/g, '∑');
}
<div class="eebee">Lorem Ipsum <a href="http://example.com">Anchor here</a></div>
一些注意事项:
- 不要使用 HTML 解析器。如果你解析一个 HTML 字符串,然后用新的替换旧的 DOM 树,你将删除元素的所有内部数据(事件监听器、checkedness、...)
- 尤其不要使用正则表达式来解析 HTML。 You can't parse (X)HTML with regex.
关于javascript - 如何通过 JS 更改 HTML 文档中字符串的所有实例而不影响其标记?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36974007/