是否有不區分大小寫的 jQuery :contains 選擇器？

Question

是否有不區分大小寫的:contains jQuery 選擇器版本，還是我應該通過循環所有元素並將它們的 .text() 與我的字符串進行比較來手動完成工作？

Answer 1

我最終為 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;
    };
});

Answer 2

使其可選不區分大小寫： 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

Answer 3

從 jQuery 1.3 開始，不推薦使用此方法。 為了讓它工作，它需要定義為一個函數：

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

Answer 4

如果有人（像我一樣）對包含定義中的a和m[3]表示什么感興趣。

---

關鍵/圖例：jQuery 提供的參數可用於選擇器定義：

r = 正在檢查的元素的 jQuery 數組。 （例如： r.length = 元素數）

i = 當前正在審查的元素的索引，在數組r 中。

a = 當前正在審查的元素。 Selector 語句必須返回 true 才能將其包含在其匹配結果中。

m[2] = nodeName 或 * 我們正在尋找（冒號左側）。

m[3] = param 傳入 :selector(param)。 通常是索引號，如:nth-of-type(5) ，或字符串，如:color(blue) 。

Answer 5

在 jQuery 1.8 中，您需要使用

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

Answer 6

一個似乎執行得稍微快一點並且也允許使用正則表達式的變體是：

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?')") （匹配“stock”或“stocks”，但僅在段落的開頭（忽略任何前導空格）。）

Answer 7

可能會遲到......但是，

我寧願走這條路..

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

這樣，您就不會篡改 jQuery 的 NATIVE '.contains' ...您以后可能需要默認的...如果被篡改，您可能會發現自己又回到了stackOverFlow ...

Answer 8

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

更新代碼在 1.3 中效果很好，但與前面的示例不同，“包含”的第一個字母應該是小寫的。

Answer 9

請參閱下文以使用“: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 版本查找忽略大小寫的代碼， Make jQuery :contains Case-Insensitive

Answer 10

使用正則表達式的更快版本。

$.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());
};

Answer 11

我遇到了類似的問題，以下不起作用...

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

Answer 12

新建一個變量，我將其命名為 subString 並將要搜索的字符串放入某些元素文本中。 然后使用 Jquery 選擇器選擇您需要的元素，例如我的示例$("elementsYouNeed")並按.filter()過濾。 在.filter()它會將$("elementsYouNeed")每個元素與函數進行比較。

在我對元素文本使用.toLowerCase()的函數中，還有 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;});