是否存在不区分大小写的jQuery:包含选择器?


Answers:


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。
Jim Ade 2010年

链接@约翰的问题/答案,因为此处的链接已被删除: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 2012年

41

从jQuery 1.3开始,不建议使用此方法。为了使其正常工作,需要将其定义为一个函数:

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

38

如果有人(例如我)感兴趣,am [3]Contains定义中意味着什么。


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

r =待检查元素的jQuery数组。(例如:r.length =元素数)

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

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

m [2] = nodeName或*我们在寻找(冒号左侧)。

m [3] =传递给: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
thanx更新。刚刚更新到JQuery 1.8,它停止工作
Wasim 2012年

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')") (匹配“上”或“上”,但不匹配“上”,“唤醒”等)
  • $("p:containsCI('(?:Red|Blue) state')") (匹配“红色状态”或“蓝色状态”,但不匹配“上状态”等)
  • $("p:containsCI('^\\s*Stocks?')") (匹配“ stock”或“ stocks”,但仅在该段的开头(忽略任何前导空白)。)

11

可能迟到了....但是

我更喜欢这样。

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

这样,您就不会篡改jQuery的NATIVE'.contains' ...以后可能需要使用默认值...如果被篡改,您可能会发现自己回到了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

“: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:不区分大小写)查找忽略大小写的代码。


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()用于元素文本的函数中,还有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;});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.