web-dev-qa-db-ja.com

jQueryを使ってテキスト文字列を探す？

Webページに「私は単純な文字列です」などの文字列があるとします。 JQueryを使用してこれをどのように進めますか？

jquerytext
236
Keith Donegan

jQueryにはcontainsメソッドがあります。これはあなたのためのスニペットです：

<script type="text/javascript">
$(function() {
    var foundin = $('*:contains("I am a simple string")');
});
</script>

上記のセレクターは、ターゲット文字列を含む要素を選択します。 foundinは、一致した要素を含むjQueryオブジェクトになります。 API情報を参照してください。 http://docs.jquery.com/Selectors/contains#text

ワイルドカード「*」を使用して注意することの1つは、HTMLやbody要素など、すべての要素を取得することです。そのため、jQueryや他の場所のほとんどの例で$（ 'div：contains（ "私は単純な文字列です）"）を使用しています

320
Tony Miller

通常、jQueryセレクタはDOMの「テキストノード」内を検索しません。ただし、.contents（）関数を使用すると、テキストノードが含まれるため、nodeTypeプロパティを使用してテキストノードのみをフィルタ処理し、nodeValueプロパティを使用してテキスト文字列を検索できます。

 $（ '*'、 'body'）
 .andSelf（）
 .contents（）
 .filter（function（）{
 return this.nodeType === 3; 
}）
 .filter（function（）{
 //テキスト内の任意の場所に「単純な文字列」が含まれる場合にのみ一致します。 this.nodeValue.indexOf（ 'simple string'）！= -1; 
}）
 .each（function（）{
 //これで何かをしてください。 nodeValue 
}）;
50
BarelyFitz

これは、「私は単純な文字列」を含むリーフ要素だけを選択します。

$('*:contains("I am a simple string")').each(function(){
     if($(this).children().length < 1) 
          $(this).css("border","solid 2px red") });

それをテストするためにアドレスバーに以下を貼り付けてください。

javascript: $('*:contains("I am a simple string")').each(function(){ if($(this).children().length < 1) $(this).css("border","solid 2px red") }); return false;

あなただけの"私は単純な文字列です"をつかみたいのなら。まずそのように要素でテキストを囲みます。

$('*:contains("I am a simple string")').each(function(){
     if($(this).children().length < 1) 
          $(this).html( 
               $(this).text().replace(
                    /"I am a simple string"/
                    ,'<span containsStringImLookingFor="true">"I am a simple string"</span>' 
               )  
           ) 
});

そしてこれを行います。

$('*[containsStringImLookingFor]').css("border","solid 2px red");
28
Slim

あなたが探しているテキストに最も近いノードが欲しい場合は、これを使うことができます：

$('*:contains("my text"):last');

あなたのHTMLがこのように見えるならば、これはうまくいくでしょう：

<p> blah blah <strong>my <em>text</em></strong></p>

上記のセレクタを使用すると<strong>タグが見つかります。これは、その文字列全体を含む最後のタグだからです。

17
nickf

強調表示 （jQueryプラグイン）を見てください。

12
Chris Doggett

Tony Millerの答えにこれを追加するだけで、私が探していたものに向かって90％得られましたが、それでもうまくいきませんでした。彼のコードの最後に.length > 0;を追加することで、私のスクリプトは機能しました。

 $(function() {
    var foundin = $('*:contains("I am a simple string")').length > 0;
 });
7
Pixelomo

この機能は動作するはずです。基本的にはリーフノードの明確なリストが得られるまで再帰的ルックアップを行います。

function distinctNodes(search, element) {
    var d, e, ef;
    e = [];
    ef = [];

    if (element) {
        d = $(":contains(\""+ search + "\"):not(script)", element);
    }
    else {
            d = $(":contains(\""+ search + "\"):not(script)");
    }

    if (d.length == 1) {
            e.Push(d[0]);
    }
    else {
        d.each(function () {
            var i, r = distinctNodes(search, this);
            if (r.length === 0) {
                e.Push(this);
            }
            else {
                for (i = 0; i < r.length; ++i) {
                    e.Push(r[i]);
                }
            }
        });
    }
    $.each(e, function () {
        for (var i = 0; i < ef.length; ++i) {
            if (this === ef[i]) return;
        }
        ef.Push(this);
    });
    return ef;
}
2
danatcofo