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

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

要素内のテキスト ノードの選択は、jQuery では困難なタスクとなる場合があります。幸いなことに、これを実現するために利用できるさまざまなアプローチがあります。

アプローチ 1:Contents() と Find() を組み合わせる

jQuery には、選択するための専用関数がありません。テキストノード。ただし、回避策としては、テキスト ノードを含む子ノードを取得する content() メソッドを利用し、それを子孫要素を選択してテキスト ノードを除外する find() メソッドと組み合わせる必要があります。

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

注: jQuery バージョン 1.7 より前の場合は、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 または Pure JavaScript を使用して要素内のテキスト ノードを効率的に選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。