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

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

jQuery を使用して要素の子孫テキスト ノードを選択するには、少し創造性が必要です。 jQuery はこのタスク用の特定の関数を提供しませんが、メソッド content() と find() を組み合わせて目的の結果を得ることができます。

jQuery ソリューション

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

getTextNodesIn(el);

このコードは、contents() を使用して、テキスト ノードを含む子ノードを収集します。次に、find() を使用して子孫要素とテキスト ノードを分離します。このソリューションでは、iframe 要素に特別な処理が必要であることに注意してください。

純粋な JavaScript ソリューション

純粋な JavaScript アプローチを希望する場合は、次の関数を使用できます。

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

この関数は DOM ツリーを再帰的に走査し、ノード タイプに基づいてテキスト ノードを識別します。パラメータを渡すことで空白ノードを含めることができます。

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