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

问题描述

我想获取一个元素的所有后代文本节点，作为一个 jQuery 集合.最好的方法是什么?

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 没有为此提供方便的功能.您需要将 contents() 与 find() 结合起来，它只给出子节点，但包含文本节点，而 find() 给出所有后代元素，但不给出文本节点.这是我想出的:

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

注意:如果您使用的是 jQuery 1.7 或更早版本，则上面的代码将不起作用.要解决此问题，请将 addBack() 替换为 andSelf().从 1.8 开始，andSelf() 被弃用，取而代之的是 addBack().

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.

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

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).

更新:修正了当 includeWhitespaceNodes 为假时的错误.

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屋！