在讨论之后，我想了解如何使用TreeWalker来更改按类名过滤的textNodes上的文本。
我想只在<p class="french">上用"x"替换所有数字。
这里有一个解决方案，但最终的jQuery对我来说并不实用。我想了解为什么我的以下解决方案不起作用。
myfilter = function(node){
if (node.className=="french")
return NodeFilter.FILTER_ACCEPT
else
return NodeFilter.FILTER_SKIP;
}
var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, myfilter, false);
while (walker.nextNode()) {
walker.currentNode.nodeValue.replace(/(d)/gu, 'x');
}<body>
<p>890008900089000</p>
<p class="french">890008900089000</p>
</body>你的代码
- 遍历所有文本节点 (
NodeFilter.SHOW_TEXT) - 其中
className=="french"和 - 用"x"替换其值中的每个数字
有几个问题。
- 文本节点没有类。您必须测试它们的父节点类。
- 字符串是不可变的，不使用替换结果。
- 您实际上希望将所有数字替换为"x"，而不是所有数字。(?)
所以把node.className改成node.parentNode.className，d改成d+，并将String#replace的结果赋回walker.currentNode.nodeValue：
myfilter = function(node){
if (node.parentNode.className=="french")
return NodeFilter.FILTER_ACCEPT
else
return NodeFilter.FILTER_SKIP;
}
var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, myfilter, false);
while (walker.nextNode()) {
walker.currentNode.nodeValue = walker.currentNode.nodeValue.replace(/d+/g, 'x');
}