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

时间:2008-10-09 14:30:20

标签: javascript jquery jquery-selectors

是否存在:contains jQuery选择器的不区分大小写的版本,还是应该通过循环遍历所有元素并将其.text()与我的字符串进行比较来手动完成工作?

12 个答案:

答案 0 :(得分:119)

我最终为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()

在上一个表达式中,它会大大加快速度,因此如果速度有问题,请自行承担风险。 (请参阅@Johnquestion

最新编辑:对于jQuery 1.8,它应该是:

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

答案 1 :(得分:101)

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

答案 2 :(得分:40)

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

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

答案 3 :(得分:37)

如果某人(像我一样)感兴趣的话 m [3] 包含定义中是什么意思。


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

r =正在审查的jQuery元素数组。 (例如: r.length =元素数量)

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

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

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

m [3] = param传递给:selector(param)。通常是索引号,如:nth-​​of-type(5)或字符串,如:color(blue)

答案 4 :(得分:31)

在jQuery 1.8中,您需要使用

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

答案 5 :(得分: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?')")(匹配“股票”或“股票”,但仅在段落的开头(忽略任何前导空格)。)

答案 6 :(得分:10)

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

我更喜欢这样..

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

这样,你不要篡改jQuery的NATIVE '。包含' ......稍后您可能需要默认的...如果被篡改,您可能会找回 stackOverFlow ...

答案 7 :(得分:6)

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

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

答案 8 :(得分: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版本忽略代码的案例, Make jQuery :contains Case-Insensitive

答案 9 :(得分: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');

答案 10 :(得分:0)

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

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

答案 11 :(得分:0)

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

在函数i中,我使用.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;});