Code Snippet
Make jQuery :contains Case-Insensitive
jQuery.expr[':'].Contains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
jQuery.expr[':'].contains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};With this in place,
$("div:contains('John')")would select all three of these elements:
<div>john</div>
<div>John</div>
<div>hey hey JOHN hey hey</div>Demo via Pablo Fortes.
Some time ago, I found this snippet somewhere on the net:
$.extend($.expr[":"], {
"containsNC": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
I like it better because with this code you leave the :contains selector himself and have a new :containsNC selector, which is case insensitive.
$("div:containsNC('John')")
This is solid and definitely useful, but I can’t agree with overriding the behavior of a core jquery component. It’s much better to make a new selector named “:icontains” or similar and use that.
Other than that, thanks! Saved me some time.