1

最近、いくつかの jQuery セレクターにテキスト ノード選択を組み込む必要があることに気が付きました。

jQuery は、本来テキストノードをサポートしていません。このタイプの質問に関するほとんどの回答では使用.contents()が推奨されていますが、これは実際には「セレクター」ではなく「トラバース」に分類されます。そのため、直接の子のみを提供し、テキスト ノードだけでなく、すべての子を提供します。

任意にマークアップされたテキスト内のすべてのテキスト ノードを選択する必要があることがわかったので、関心のあるテキスト ノードのいくつかは孫、ひ孫などになります。

<div id="formattedText">
  This is a <b>sample</b> block <a href="http://somewhere.com">of <em>text</em></a>
  that I might want to get a list of <span class="groovy">all</span> text nodes in.
</div>

したがって、再帰呼び出しを実装しようとするのではなく、これを実現する最も表現力豊かな方法は.children()、jQuery セレクターを次のように拡張することです。

var txtNodes = $('#formattedText §');

Where§は、テキスト ノードを表す jQuery に追加する新しい構文を表します。:odd()未使用の ASCII シンボルまたは拡張子のようなものを見つける必要があります。

var txtNodes = $('#formattedText:textNodes()');

jQuery のセレクター エンジンをこのように拡張するにはどうすればよいでしょうか。既存の DOM-walking メソッドにフックしたいので、新しいメソッドを構築する必要はないと思いますか?

それとも、.contents()jQuery を拡張しなくても、思いもよらないことを行う表現力のあるトリックがあるのでしょうか。

私の使用例: ユーザースクリプト (greasemonkey など) で、サードパーティの Web サイトからのテキストのカスタム「ハイライト」を実行したいと考えています。「カスタム」とは、さまざまなパターンがさまざまなbackground-colors などを取得することを意味します。そのため、深さに関係なくすべてのテキストノードが必要であり、それらの周りにタグを付けたくなく、すべてのテキストを 1 つの大きなチャンクにまとめたくありません.text()。ください。

4

1 に答える 1

1

:-pseudo-selector 拡張機能を作成するために必要な新しい署名に追いついていませんが、方法は次のとおりです。

(function($){

    function walk( node, ret ) {
        var ret = ret || [],
            cur,
            nodes = node.childNodes;

        for( var i = 0, l = nodes.length; i < l; ++i ) {
            cur = nodes[i];

            if( cur.nodeType === 1 ) {
                walk( cur, ret );
            }
            else if( cur.nodeType === 3 ) {
                ret.push( cur );
            }
        }

        return ret;
    }

    $.fn.findText = function() {

        var ret = this.map( function() {
            return walk( this );
        });

        return this.pushStack( ret, "textNodes", "" );
    };

})( jQuery );

ここのデモでは、見つかったテキストノードを見つかった順に反復処理して、ページでの順序を確認できるようにします。

于 2012-11-23T10:56:44.210 に答える