大文字と小文字を区別しないjQuery:containsセレクターはありますか?


145

:contains jQueryセレクターの大文字と小文字を区別しないバージョンはありますか、またはすべての要素をループして手動で作業を行い、それらの.text()を私の文字列と比較する必要がありますか?


2
jQuery 8.1の場合+この回答を
Praveen

1
^ 8.1ではなく1.8.1です。
TylerH 2015年

ここで良い例です
劉鎮瑲

回答:


125

私がjQuery 1.2のためにやったことは次のとおりです:

jQuery.extend(
    jQuery.expr[':'], { 
        Contains : "jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0" 
});

これはjqueryを拡張して、大文字と小文字を区別しない:Containsセレクターを持ちます。:containsセレクターは変更されません。

編集:jQuery 1.3(@ user95227に感謝)以降では、

jQuery.expr[':'].Contains = function(a,i,m){
     return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

編集:どうやらDOMに直接アクセスして

(a.textContent || a.innerText || "") 

の代わりに

jQuery(a).text()

前の式では速度が大幅に向上するため、速度が問題になる場合は自己責任で試してください。(@John質問を参照)

最新の編集:jQuery 1.8の場合:

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

@Patや他の人がjQuery 1.3について説明したソリューションが1.4.3でも機能することを人々に知らせたかっただけです。
ジムアデ

リンクへのリンクがここに削除されたので、ジョンの質問/答え@:stackoverflow.com/questions/1407434/...
Mottie

これはjQuery 1.8では機能しません。-更新されたバージョンは、以下を参照してくださいseagullJSの答えstackoverflow.com/a/12113443/560114
マット・ブラウン

105

オプションで大文字と小文字を区別しないようにするには:http : //bugs.jquery.com/ticket/278

$.extend($.expr[':'], {
  'containsi': function(elem, i, match, array)
  {
    return (elem.textContent || elem.innerText || '').toLowerCase()
    .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});

次に:containsi代わりに使用:contains


3
新しい機能を追加することは私には上書きよりも最高ですが、私は今、このオプション(魔法のように動作します)を使用する
後藤

22
これは標準のjqueryライブラリに追加する必要があります
user482594

41

jQuery 1.3以降、このメソッドは廃止されました。これを機能させるには、関数として定義する必要があります。

jQuery.expr[':'].Contains = function(a,i,m){
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

38

(私のような)誰かが興味を持っている場合、Contains定義でam [3]は何を意味するのでしょうか。


KEY / LEGEND:セレクター定義で使用するためにjQueryによって利用可能にされたパラメーター:

r =精査される要素のjQuery配列。(例:r.length =要素の数)

i =配列r内の現在調査中の要素のインデックス。

a =現在精査中の要素。Selectorステートメントは、一致した結果に含めるためにtrueを返す必要があります。

m [2] = nodeNameまたは*探している(コロンの左側)。

m [3] = paramが:selector(param)に渡されました。通常、:nth-​​of-type(5)のようなインデックス番号、または:color(blue)のような文字列。


31

jQuery 1.8では、使用する必要があります

jQuery.expr[":"].icontains = jQuery.expr.createPseudo(function (arg) {                                                                                                                                                                
    return function (elem) {                                                            
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;        
    };                                                                                  
});

2
ありがとうございます!1.8に更新すると、動作しなくなりました。
Andreas

3
アップデートありがとうございます。jQuery 1.8にアップデートしたところ、機能しなくなりました
Wasim

15

わずかに速く実行され、正規表現許可されるバリエーションは次のとおりです。

jQuery.extend (
    jQuery.expr[':'].containsCI = function (a, i, m) {
        //-- faster than jQuery(a).text()
        var sText   = (a.textContent || a.innerText || "");     
        var zRegExp = new RegExp (m[3], 'i');
        return zRegExp.test (sText);
    }
);



これは大文字と小文字を区別しないだけでなく、次のような強力な検索を可能にします。

  • $("p:containsCI('\\bup\\b')") (「Up」または「up」と一致しますが、「upper」、「wakeup」などとは一致しません。)
  • $("p:containsCI('(?:Red|Blue) state')") (「赤の状態」または「青の状態」に一致しますが、「アップ状態」には一致しません)
  • $("p:containsCI('^\\s*Stocks?')") (「株式」または「株式」と一致しますが、段落の開始時のみです(先頭の空白は無視されます)。

11

遅くなるかもしれませんが……。

私はこのように行きたいです。

$.extend($.expr[":"], {
"MyCaseInsensitiveContains": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});

このように、あなたはしていない jQueryのNATIVEを改ざん」.contains'あなたは改ざん場合、デフォルトの1が後に...、あなたが戻って自分自身を見つけるかもしれない必要があるかもしれません... stackoverflowの ...


6
jQuery.expr[':'].contains = function(a,i,m){
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

更新コードは1.3では適切に機能しますが、前の例とは異なり、「次を含む」は最初の文字を小文字にする必要があります。


1
私は彼が両方という明確な機能を望んでいたと思う:contains:Contains同時にでしょう仕事の両方。
joshperry '31年

「:containsセレクターは変更されません。」
ハリーB

4

「:contains」を使用してHTMLコードから大文字と小文字の区別を無視してテキストを検索するには、以下を参照してください。

 $.expr[":"].contains = $.expr.createPseudo(function(arg) {
            return function( elem ) {
                return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
            };
        });
        $("#searchTextBox").keypress(function() {
          if($("#searchTextBox").val().length > 0){
            $(".rows").css("display","none");
            var userSerarchField = $("#searchTextBox").val();
            $(".rows:contains('"+ userSerarchField +"')").css("display","block");
          } else {
            $(".rows").css("display","block");
          }              
        });

このリンクを使用して、jqueryバージョンに基づいてコードを無視するケースを見つけることもできます。jQuery を作成:contains Case-Insensitive


2

正規表現を使用した高速バージョン。

$.expr[':'].icontains = function(el, i, m) { // checks for substring (case insensitive)
    var search = m[3];
    if (!search) return false;

    var pattern = new RegExp(search, 'i');
    return pattern.test($(el).text());
};

よくできました!どうもありがとうございました。これがこの質問に対する最良かつ最新の回答だと思います。
mavrosxristoforos

0

私は以下が機能しないという同様の問題を抱えていました...

// This doesn't catch flac or Flac
$('div.story span.Quality:not(:contains("FLAC"))').css("background-color", 'yellow');

これは機能し、拡張機能は必要ありません

$('div.story span.Quality:not([data*="flac"])').css("background-color", 'yellow');

これも機能しますが、おそらく「手動ループ」カテゴリに分類されます。

$('div.story span.Quality').contents().filter(function()
{
  return !/flac/i.test(this.nodeValue);
}).parent().css("background-color", 'yellow');

0

新しい変数にsubStringという名前を付け、検索する文字列をいくつかの要素のテキストに入力します。次に、Jqueryセレクターを使用して、私の例のように必要な要素を選択し$("elementsYouNeed")、でフィルタリングし.filter()ます。では、.filter()各要素を$("elementsYouNeed")関数と比較します。

.toLowerCase()要素テキストに使用している関数i でも、大文字と小文字を区別する条件を回避し、その中にsubStringがあるかどうかを確認できるsubStringがあります。その後、.filter()メソッドは一致する要素のサブセットから新しいjQueryオブジェクトを構築します。

これで、matchObjectsのmatch要素を取得して、好きなことを行うことができます。

var subString ="string you want to match".toLowerCase();

var matchObjects = $("elementsYouNeed").filter(function () {return $(this).text().toLowerCase().indexOf(subString) > -1;});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.