javascript - 如何通过 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 解析器？或者只是一些正则表达式，搜索 ∑∑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>

或者如果你更喜欢内置的方式，你可以使用 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.