如何使用 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中文網其他相關文章！