如何在不干扰标记的情况下通过JS更改HTML文档中字符串的所有实例？

Question

我想编写一个脚本，使页面“衰减”，随意改变字符。 假设我有一些看起来像这样的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解析器？ 或只是一些正则表达式，搜索内容betwΣΣ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);
    }
}

Answer 1

您可以编写一个简单的递归函数来迭代所有文本节点：

 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> 

或者如果您更喜欢内置方式，则可以使用树木助行器

 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树替换旧的DOM树，您将删除元素的所有内部数据（事件侦听器，检查，...）
• 特别是，永远不要使用正则表达式来解析HTML。 您无法使用正则表达式解析（X）HTML。