是否有不区分大小写的 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】:如果有人(比如我)感兴趣,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)。
【讨论】:
以上是关于是否有不区分大小写的 jQuery :contains 选择器?的主要内容,如果未能解决你的问题,请参考以下文章
Redshift SQL 可以执行不区分大小写的正则表达式求值吗?