jQuery を使用して要素内のすべてのテキスト ノードを効率的に選択するにはどうすればよいですか?

jQuery を使用したテキスト ノードの選択

要素のすべての子孫テキスト ノードを jQuery コレクションとして取得するのは、複雑なタスクになる可能性があります。 jQuery には専用の関数がないため、メソッドを組み合わせる必要があります。

解決策としては、子ノード (テキスト ノードを含む) を取得する content() 関数と、子ノード (テキスト ノードを含む) を取得する find() 関数を使用します。すべての子孫要素 (テキスト ノードを除く) を選択します。これらの結果をマージすることで、指定された要素内のすべてのテキスト ノードを取得できます。

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

getTextNodesIn(el);

考慮事項:

• このアプローチは、純粋なアプローチと比較すると非効率である可能性があります。 DOM メソッド。
• jQuery による content() のオーバーロードのため、回避策が必要です。 function.
• 次のような非 jQuery ソリューションは、より効率的な代替手段を提供します。

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 を使用して要素内のすべてのテキスト ノードを効率的に選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。