Question

在that讨论之后，我想了解如何使用TreeWalker更改按类名过滤的textNodes上的文字。

我想用＆＃34; x＆＃34;替换所有数字仅限<p class="french">。

有一个解决方案here，但最终的jQuery对我来说并不实用。我想了解为什么我的以下解决方案无效。

＆＃13;

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');   
 }

＆＃13;

<body>
<p>890008900089000</p>
<p class="french">890008900089000</p>
</body>

＆＃13;

Answer 1

您的代码

遍历所有文本节点（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');   
 }

使用Javascript TreeWalker按类名筛选以更改文本

1 个答案: