jQuery でテキスト ノードを選択するにはどうすればよいですか?

jQuery を使用したテキスト ノードのクエリ

jQuery は、DOM の操作とトラバーサルのための堅牢な機能を提供します。ただし、要素のテキスト コンテンツにアクセスするために重要なテキスト ノードを選択する簡単な方法は提供されていません。

解決策

これに対処するには、次のことができます。 jQuery の content() 関数と find() 関数の能力を活用します。 content() はテキスト ノードを含むすべての子ノードを取得し、find() は子孫要素を対象とします。これら 2 つの関数を組み合わせることで、すべての子孫テキスト ノードを含む jQuery コレクションを効果的に取得できます。

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

このアプローチでは、クロスサイト スクリプティングの脆弱性を防ぐために、選択から iframe 要素が除外されます。

jQuery バージョン 1.7 以前に関する注意事項

バージョンについて1.8 より前の jQuery では、上記のコードは正しく機能しません。これを修正するには:

• addBack() を andSelf() に置き換えます。
• jQuery 1.8 以降では、andSelf() が非推奨になり、addBack() が使用されることに注意してください。

または: 純粋な DOM解決策

効率を高めるため、再帰関数を使用して 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;
}

このソリューションでは、空白テキスト ノードを含めたり除外したりできるため、柔軟性が得られます。 .

結論として、これらのメソッドを使用すると、要素内のテキスト ノードを効果的に選択できるようになり、テキストを正確に制御できるようになります。操作。

以上がjQuery でテキスト ノードを選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。