2

jQuery カスタム セレクターを使用して DOM 要素からテキストを抽出したいと考えています。タグ付けされた兄弟なしでテキスト ノードのみを選択する必要があります (XPath の /text() によく似ています)。

背景: 私は、非常に異なる Web サイトで特定の情報 (ユーザー名など) を抽出する Firefox 拡張機能に取り組んでいます。ここで、ユーザーが新しい Web サイトのパス定義をできるだけ単純なフォームに動的に追加できるようにしたいと考えています。

新しいウェブサイトを追加:

URL: _ _ _ _ _ _ __ _ __ (例: "http://stackoverflow.com/questions/")

パス: _ _ _ _ _ _ _ _ ___ (例: 質問をしているユーザーの名前は「.user-details>a:eq(0)」)

たとえば、stackoverflow では、 $(path).text() はユーザー名をテキストとして返します。しかし、他のいくつかのサイトでは、次の例のように、タグ付けされた兄弟を持つテキスト ノードとしてのみユーザー名を使用できます。

<div id="person">
    johndoe <span id="age">(57)</span>
    <span id="description">Lorem ipsum dolor sit amet…&lt;/span>
</div>

jQuery はテキスト ノードのセレクター (XPath の /text() など) を提供しないため、カスタム セレクターを作成するソリューションを見つけたいと考えていました。

テキストノードを「セレクター以外」の方法で取得する方法を知っています：

var textNode = $('#person').contents().filter(function(){
    return this.nodeType == 3;
}).text();

alert(textNode); // gives me "johndoe"

これをカスタムセレクターに変換するにはどうすればよいですか? 以下は、その一部がテキストノードになるとすぐに完全な要素を常に返すため、明らかに機能しません(@VinayCが彼の回答で説明しているように):

$.extend($.expr[':'],{
    getText: function(element){
        return $(element).contents().filter(function() {return this.nodeType == 3;}).text();
    }
});

alert($('#person:getText')); //returns the whole DIV element

私のjsfiddleを見てください

おそらく、jQuery カスタム セレクターでこれを行うことはできません。そのため、より用途が広いと思われる XPath に「戻る」ことを考えています。

ご協力いただきありがとうございます。

4

1 に答える 1

2

あなたがしているのはjqueryセレクターを作成することであり、セレクター関数はブール値を返して、渡されたノードが一致したかどうかを示すことになっています。したがって、現在の関数は「#person」divの「true」を返します((実際の戻り値は空ではないdiv内のテキストであり、したがってtrueと見なされます)。したがって、結果としてdiv要素を取得します。

試してみることもできますがgetText: function(node){ return node.nodeType == 3;}、これはjqueryエンジンのみが機能し、セレクター関数を介してテキストノードを含むすべてのドキュメントノードを渡します(そうかどうかはわかりません)。代替手段は、カスタム セレクターの代わりにヘルパー関数を作成することです。

編集:jqueryオブジェクトを拡張するのはどうですか? 例えば、

$.fn.extend({
    getText: function() {
        return this.contents().filter(function() {return this.nodeType == 3;}).text();
    }
});

alert($('#person').getText());
于 2011-05-03T08:29:01.370 に答える