如何使用 jQuery 或纯 JavaScript 高效地选择元素内的文本节点？

使用 jQuery 选择文本节点

在 jQuery 中选择元素内的文本节点可能是一项具有挑战性的任务。幸运的是，有多种方法可以实现这一点。

方法 1：结合 Contents() 和 Find()

jQuery 没有提供专门的选择函数文本节点。但是，解决方法涉及利用contents()方法，该方法检索包括文本节点的子节点，并将其与find()方法结合使用，该方法选择后代元素但排除文本节点。

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

注意： 对于 1.7 之前的 jQuery 版本，将 addBack() 替换为 andSelf()，对于 1.8 或更高版本，使用addBack().

方法 2：纯 DOM 解决方案

如果您更喜欢更高效的解决方案，可以采用非 jQuery 方法。这涉及到遍历 DOM 树的递归函数：

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

用法示例

两种方法都允许您检索指定元素内的所有文本节点。

var textNodes = getTextNodesIn(el);

通过自定义includeWhitespaceNodes参数，可以选择是否留白文本节点包含在结果中。

以上是如何使用 jQuery 或纯 JavaScript 高效地选择元素内的文本节点？的详细内容。更多信息请关注PHP中文网其他相关文章！