如何使用jQuery选择文本节点？ [英] How do I select text nodes with jQuery?

问题描述

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

解决方案

jQuery没有一个方便的功能。您需要组合 content（），它将仅给出子节点，但包含文本节点， find（）它给出了所有后代元素，但没有文本节点。这是我想出的：

  var getTextNodesIn = function（el）{
 return $（el） .find（：not（iframe））。addBack（）。contents（）。filter（function（）{
 return this.nodeType == 3; 
}）; 
}; 
 
 getTextNodesIn（el）; 
  

注意：如果您使用jQuery 1.7或更早版本，上述代码将无法正常工作。要解决此问题，请将 addBack（） 替换为 andSelf（） 。 andSelf（）不利于 addBack（）从1.8开始。

与纯DOM方法相比，这样做有点低效，并且必须包含一个丑陋解决方案为jQuery重载其 contents（）函数（感谢@rabidsnail在注释中指出），所以这里是非jQuery解决方案使用简单的递归函数。 includeWhitespaceNodes 参数控制输出中是否包含空格文本节点（在jQuery中，它们被自动过滤掉）。

  function getTextNodesIn（node，includeWhitespaceNodes）{
 var textNodes = []，nonWhitespaceMatcher = / \S /; 
 
函数getTextNodes（node）{
 if（node.nodeType == 3）{
 if（includeWhitespaceNodes || nonWhitespaceMatcher.test（node.nodeValue））{
 textNodes.push（node）; 
} 
} else {
 for（var i = 0，len = node.childNodes.length; i  getTextNodes（node.childNodes [一世]）; 
} 
} 
} 
 
 getTextNodes（node）; 
 return textNodes; 
} 
 
 getTextNodesIn（el）; 
  

I would like to get all descendant text nodes of an element, as a jQuery collection. What is the best way to do that?

解决方案

jQuery doesn't have a convenient function for this. You need to combine contents(), which will give just child nodes but includes text nodes, with find(), which gives all descendant elements but no text nodes. Here's what I've come up with:

var getTextNodesIn = function(el) {
    return $(el).find(":not(iframe)").addBack().contents().filter(function() {
        return this.nodeType == 3;
    });
};

getTextNodesIn(el);

Note: If you're using jQuery 1.7 or earlier, the code above will not work. To fix this, replace addBack() with andSelf(). andSelf() is deprecated in favour of addBack() from 1.8 onwards.

This is somewhat inefficient compared to pure DOM methods and has to include an ugly workaround for jQuery's overloading of its contents() function (thanks to @rabidsnail in the comments for pointing that out), so here is non-jQuery solution using a simple recursive function. The includeWhitespaceNodes parameter controls whether or not whitespace text nodes are included in the output (in jQuery they are automatically filtered out).

Update: Fixed bug when includeWhitespaceNodes is falsy.

function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [], nonWhitespaceMatcher = /\S/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
                textNodes.push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(node);
    return textNodes;
}

getTextNodesIn(el);

这篇关于如何使用jQuery选择文本节点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！