是否有不区分大小写的 jQuery :contains 选择器？答案

【问题标题】：Is there a case insensitive jQuery :contains selector?是否有不区分大小写的 jQuery :contains 选择器？
【发布时间】：2010-09-16 07:07:27
【问题描述】：

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

【问题讨论】：

对于 jQuery 8.1 + 检查answer
^ 那是 1.8.1，不是 8.1。
好例子here。

标签： javascript jquery jquery-selectors

【解决方案1】：

新建一个变量，我将其命名为 subString 并将您要搜索的字符串放入某些元素文本中。然后使用 Jquery 选择器选择您需要的元素，例如我的示例 $("elementsYouNeed") 并按 .filter() 过滤。在.filter() 中，它会将$("elementsYouNeed") 中的每个元素与函数进行比较。

在我使用.toLowerCase() 元素文本的函数中，还有 subString 可以避免区分大小写的条件并检查其中是否有 subString。之后，.filter() 方法从匹配元素的子集构造一个新的 jQuery 对象。

现在您可以在 matchObjects 中获取匹配元素并做任何您想做的事情。

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

var matchObjects = $("elementsYouNeed").filter(function () {return $(this).text().toLowerCase().indexOf(subString) > -1;});

【讨论】：

【解决方案2】：

请参阅下文以使用“: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

【讨论】：

【解决方案3】：

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

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

【讨论】：

干得好！非常感谢。我相信这是对这个问题的最好和最新的回答。

【解决方案4】：

我遇到了类似的问题，以下不起作用...

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

【讨论】：

【解决方案5】：

我最终为 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的question）

最新编辑：对于 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。
链接到@John 的问题/答案，因为此处的链接已被删除：stackoverflow.com/questions/1407434/…
这不适用于 jQuery 1.8。有关更新版本，请参阅下面 seagullJS 的答案——stackoverflow.com/a/12113443/560114

【解决方案6】：

可能会迟到……但是，

我宁愿走这条路..

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

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

【讨论】：

【解决方案7】：

在 jQuery 1.8 中你需要使用

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

【讨论】：

完美运行，谢谢！刚刚更新到 1.8，这停止了工作。
感谢更新。刚刚更新到 JQuery 1.8，它停止工作

【解决方案8】：

似乎执行得稍快一些并且也允许正则表达式的变体是：

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”，但仅在段落的开头（忽略任何前导空格）。）

【讨论】：

【解决方案9】：

使其可选地不区分大小写： 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 库中

【解决方案10】：

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

更新代码在 1.3 中运行良好，但与前面的示例不同，“包含”的第一个字母应该是小写的。

【讨论】：

我认为他想要一个独特的功能，以便:contains 和:Contains 可以同时工作。
“:contains 选择器保持不变。”

【解决方案11】：

从 jQuery 1.3 开始，此方法已被弃用。为了让它工作，它需要被定义为一个函数：

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

【讨论】：

【解决方案12】：

如果有人（比如我）感兴趣，a 和 m[3] 在 Contains 定义中是什么意思。

KEY/LEGEND：jQuery 提供的参数可用于选择器定义：

r = 被审查的元素的 jQuery 数组。（例如：r.length = 元素数）

i = 数组 r 中当前正在审查的元素的索引。

a = 当前正在审查的元素。 Selector 语句必须返回 true 才能将其包含在匹配的结果中。

m[2] = 我们正在寻找的 nodeName 或 *（冒号左侧）。

m[3] = 传递到 :selector(param) 的参数。通常是索引号，如 :nth-of-type(5) 或字符串，如 :color(blue)。

【讨论】：