How Can I Select Text Nodes with jQuery?

Querying Text Nodes with jQuery

jQuery offers robust functionality for DOM manipulation and traversal. However, it does not provide a straightforward method to select text nodes, which are crucial for accessing the text content of elements.

Solution

To address this, you can harness the power of jQuery's contents() and find() functions. contents() retrieves all child nodes, including text nodes, while find() targets descendant elements. By combining these two functions, you can effectively obtain a jQuery collection containing all descendant text nodes.

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

This approach excludes iframe elements from the selection to prevent cross-site scripting vulnerabilities.

Caveat for jQuery Versions 1.7 and Earlier

For versions of jQuery prior to 1.8, the code above will not function correctly. To remedy this:

• Replace addBack() with andSelf().
• Note that andSelf() is now deprecated in favor of addBack() in jQuery 1.8 and above.

Alternatively: A Pure DOM Solution

For efficiency, consider using a recursive function to traverse the DOM and collect text nodes:

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

This solution provides flexibility by allowing you to include or exclude whitespace text nodes.

In conclusion, these methods empower you to effectively select text nodes within an element, giving you precise control over text manipulation.

The above is the detailed content of How Can I Select Text Nodes with jQuery?. For more information, please follow other related articles on the PHP Chinese website!