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

Posted

技术标签:

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

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

【问题讨论】:

对于 jQuery 8.1 + 检查answer ^ 那是 1.8.1,不是 8.1。 好例子here。 【参考方案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 的问题/答案,因为此处的链接已被删除:***.com/questions/1407434/… 这不适用于 jQuery 1.8。有关更新版本,请参阅下面 seagullJS 的答案——***.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'...您以后可能需要默认的...如果被篡改,您可能发现自己回到 ***...

【讨论】:

【参考方案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】:

如果有人(比如我)感兴趣,am[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)

【讨论】:

以上是关于是否有不区分大小写的 jQuery :contains 选择器?的主要内容,如果未能解决你的问题,请参考以下文章

Redshift SQL 可以执行不区分大小写的正则表达式求值吗?

使用“/”和“ - ”进行不区分大小写的搜索

jquery 是不是区分大小写

jquery .append() 区分大小写的元素

如何使 jQuery Contains 不区分大小写,包括 jQuery 1.8+?

不区分大小写的jQuery:包含选择器