Javascript DOM TreeWalker返回所有文本节点

我试图访问给定元素中的所有文本节点，这样我就可以隔离单词并将它们包装成跨距

TreeWalker

似乎是这项工作的API，但我发现它非常不直观。在我看来，两者（通常非常擅长解释神秘的domapi）都不是不言而喻的

我的第一个假设是，我需要传递的只是作为第二个参数的正确过滤器，类似于

document.createTreeWalker（element，NodeFilter.TEXT\u NODE）

。但这似乎会在遇到非文本节点时立即停止：

wordWrap（document.body）
函数换行符（元素）{
var节点=document.createTreeWalker（元素，NodeFilter.TEXT\u节点）
变量节点
变量文本
变量词
while（node=nodes.nextNode（））{
text=node.nodeValue.replace（/（^\s+\s+$）/，''）.split（/\s+/g）
while（text.length）{
word=document.createElement（'span'）
word.className='word'
word.innerText=text.shift（）
node.parentNode.insertBefore（word，节点）
如果（text.length）
node.parentNode.insertBefore（document.createTextNode（“”），节点）
}
node.parentNode.removeChild（节点）
}
}

.word{
背景：#费用；
填充：0.5em0；
}

请与我们联系，以获取意见&；其他查询。

我错过了什么

node.parentNode.removeChild（node）

是问题所在-您正在从DOM中删除当前节点，因此walker将在那里找不到

.nextNode（）

您应该在移除节点之前推进walker，或者干脆不移除它，而是收缩其内容（将所有单词移出后剩下的内容）

wordWrap（document.body）；
函数换行符（元素）{
var nodes=document.createTreeWalker（元素，NodeFilter.SHOW_TEXT，null，null）；
var节点；
while（node=nodes.nextNode（））{
var p=node.parentNode；
var text=node.nodeValue；
var-m；
而（m=text.match（/^（\s*）（\s+/））{
text=text.slice（m[0]。长度）；
p、 insertBefore（document.createTextNode（m[1]），node）；
var word=p.insertBefore（document.createElement（'span'），节点）；
appendChild（document.createTextNode（m[2]）；
word.className='word'；
}
node.nodeValue=文本；
}
}

.word{
背景：#美国联邦航空局；
填充：0.5em0；
}

---

请与我们联系，以获取意见&；其他查询。

我想问题出在

node.parentNode.removeChild（node）

上-您正在从DOM中删除当前节点，因此walker在分离状态下将找不到

.nextNode（）

。@Bergi听起来像是我在寻找的答案！太棒了，谢谢-使用匹配的迭代性质是一种非常好的方法。@Barney:在这种情况下，我实际上使用了

text=text.slice（…）

进行迭代。但是，您可以执行

var re=/^（\s*）（\s+）/g；当（m=text.match（re））…

使用全局标志setah时，我明白了。低级JSAPI的副作用总是让我感到困惑。理论上更喜欢匹配的副作用，因为迭代机制处于循环状态，但匹配行为可能更模糊。