是否有一个不区分大小写的jQuery：包含选择器？

Posted 2021-04-13

是否有:contains jQuery选择器的不区分大小写的版本，还是应该通过循环所有元素并将它们的.text（）与我的字符串进行比较来手动完成工作？

答案

我最终为jQuery 1.2做的是：

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

这将扩展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的question）

最新编辑：对于jQuery 1.8应该是：

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 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');

另一答案

使用正则表达式的更快版本。

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

另一答案

使它可选择不区分大小写：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

另一答案

从jQuery 1.3开始，不推荐使用此方法。要使其工作，需要将其定义为函数：

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

另一答案

如果有人（像我一样）感兴趣，那么a和m [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）。

另一答案

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

---

这不仅不区分大小写，而且允许强大的搜索，例如：

• $("p:containsCI('\\bup\\b')")（匹配“Up”或“up”，但不是“upper”，“wakeup”等）
• $("p:containsCI('(?:Red|Blue) state')")（匹配“红色状态”或“蓝色状态”，但不是“向上状态”等）
• $("p:containsCI('^\\s*Stocks?')")（匹配“股票”或“股票”，但仅在段落的开头（忽略任何前导空格）。）

另一答案

可能会迟到......但是，

我宁愿这样走..

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

这样，你不要篡改jQuery的NATIVE'.contains'......稍后你可能需要默认的...如果被篡改，你可能会发现自己回到stackOverFlow ......

另一答案

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

更新代码在1.3中工作得很好，但与前一个示例不同，“contains”在第一个字母上应该是小写的。

另一答案

请参阅下面的使用“：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忽略代码的案例