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

StackOverflow https://stackoverflow.com/questions/187537

質問

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

役に立ちましたか？

解決

jQuery 1.2でやったことは：

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

これは、大文字小文字を区別しない：Containsセレクターを持つようにjqueryを拡張し、：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;
    };
});

他のヒント

オプションで大文字と小文字を区別しないようにするには： 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;
  }
});

次に、：contains

の代わりに：containsi を使用します

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

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

誰かが（私のように）興味を持ったらどうしますか ある そして m[3] で意味する 含まれています 意味。

キー/凡例:セレクター定義で使用するために jQuery によって利用可能になるパラメータ:

r = 精査される要素の jQuery 配列。（例えば： r.長さ = 要素の数)

私 = 配列内で現在調査中の要素のインデックス r.

ある = 要素は現在精査中です。セレクター ステートメントを一致結果に含めるには、true を返す必要があります。

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

m[3] = param は :selector(param) に渡されます。通常は次のようなインデックス番号です。 :nth-of-type(5), 、または次のような文字列 ：青色）.

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

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

パフォーマンスがわずかに速く、正規表現も許可するバリエーションは次のとおりです。

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


大文字と小文字が区別されないだけでなく、次のような強力な検索が可能です。

  • $（＆quot; p：containsCI（ '\\ bup \\ b'）＆quot;）（＆quot; Up＆quot;または＆quot; up＆quot;と一致しますが、＆quot; upper＆quot;と一致しません; wakeup＆quot;など）
  • $（＆quot; p：containsCI（ '（？：Red | Blue）state'）＆quot;）（「赤の状態」または「青の状態」と一致しますが、「」は一致しません状態など」
  • $（＆quot; p：containsCI（ '^ \\ s * Stocks？'）＆quot;）（＆quot; stock＆quot;または＆quot; stocks＆quot;と一致しますが、段落（先頭の空白を無視）。

遅れる可能性があります。...しかし、

この方法で行きたいです。

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

この方法では、jQueryのネイティブ '。contains' を改ざんしないしない ...後でデフォルトの設定が必要になる可能性があります...改ざんされた場合は、 stackOverFlow ...

に戻ります。 
jQuery.expr[':'].contains = function(a,i,m){
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

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

＆quot;：contains＆quot;を使用するには、以下を参照してください。 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を作成：大文字と小文字を区別しない

以下が機能しないという同様の問題がありました... 

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

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

$.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());
};
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top