如何使用jQuery选择文本节点？

Question

如何使用jQuery选择文本节点？

我想得到一个元素的所有后代文本节点，作为jQuery集合。最好的方法是什么？

Answer 1

jQuery没有这方面的便利功能。您需要组合contents()，它将只提供子节点但包含文本节点find()，它提供所有后代元素但不提供文本节点。这是我想出的：var&nbsp;getTextNodesIn&nbsp;=&nbsp;function(el)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$(el).find(":not(iframe)").addBack().contents().filter(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this.nodeType&nbsp;==&nbsp;3; &nbsp;&nbsp;&nbsp;&nbsp;});};getTextNodesIn(el);注意：如果您使用的是jQuery 1.7或更早版本，则上述代码将无效。为了解决这个问题，更换addBack()用andSelf()。andSelf()不赞成addBack()从1.8开始。与纯DOM方法相比，这有点低效，并且必须包含一个丑陋的解决方法，用于jQuery的contents()函数重载（感谢注释中的@rabidsnail指出），所以这里是使用简单递归函数的非jQuery解决方案。该includeWhitespaceNodes参数控制是否在输出中包含空白文本节点（在jQuery中它们被自动过滤掉）。更新：修复includeWhitespaceNodes为假时的错误。function&nbsp;getTextNodesIn(node,&nbsp;includeWhitespaceNodes)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;textNodes&nbsp;=&nbsp;[],&nbsp;nonWhitespaceMatcher&nbsp;=&nbsp;/\S/; &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;getTextNodes(node)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node.nodeType&nbsp;==&nbsp;3)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(includeWhitespaceNodes&nbsp;||&nbsp;nonWhitespaceMatcher.test(node.nodeValue))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textNodes.push(node); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;len&nbsp;=&nbsp;node.childNodes.length;&nbsp;i&nbsp;<&nbsp;len;&nbsp;++i)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getTextNodes(node.childNodes[i]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;getTextNodes(node); &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;textNodes;}getTextNodesIn(el);

Answer 2

Jauco在评论中发布了一个很好的解决方案，所以我在这里复制它：$(elem) &nbsp;&nbsp;.contents() &nbsp;&nbsp;.filter(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this.nodeType&nbsp;===&nbsp;3;&nbsp;//Node.TEXT_NODE &nbsp;&nbsp;});

Answer 3

$('body').find('*').contents().filter(function&nbsp;()&nbsp;{&nbsp;return&nbsp;this.nodeType&nbsp;===&nbsp;3;&nbsp;});