☰

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

tag-icon • tag-icon javascript jquery dom
jQuery でテキストノードを選択するにはどうすればいいですか? 質問する

要素のすべての子孫テキスト ノードを jQuery コレクションとして取得したいと思います。これを行う最適な方法は何ですか?

ベストアンサー1

jQuery には、これに対する便利な関数はありません。contents()と、テキスト ノードを含めて子ノードだけを返す を組み合わせる必要があります。 は、find()テキスト ノードを含めずに子孫要素をすべて返します。 私が思いついたのは次のようなものです。

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

getTextNodesIn(el);

注意: jQuery 1.7以前を使用している場合、上記のコードは動作しません。これを修正するには、addBack()とandSelf()1.8 以降ではandSelf()が推奨されなくなりました。addBack()

これは純粋なDOMメソッドに比べてやや非効率的であり、jQuery のcontents()関数オーバーロードに対する醜い回避策(コメントで指摘してくれた @rabidsnail に感謝します)、ここでは単純な再帰関数を使用した jQuery 以外のソリューションを示します。パラメーターは、includeWhitespaceNodes出力に空白テキスト ノードを含めるかどうかを制御します (jQuery では、それらは自動的に除外されます)。

更新: includeWhitespaceNodes が false の場合のバグを修正しました。

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

おすすめ記事