// NEW selector jQuery.expr[':'].Contains = function(a, i, m) { return jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; }; // OVERWRITES old selecor jQuery.expr[':'].contains = function(a, i, m) { return jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; };Update to work for jQuery 1.8
$.expr[":"].contains = $.expr.createPseudo(function(arg) { return function( elem ) { return $(elem).text().toUpperCase().indexOf(arg.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')")
Very helpful and needed RIGHT NOW by me! My question is WHERE do I put the first part:
$.extend($.expr[":"], {
"containsNC": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
Would that go inside the document ready function? Would it be a separate js file?
I want to use it in the following function which is in a “(function(){” code block
$(document).on('keyup', '.rowFilter', function(e){var table = $(this).parent().next('table').attr('id');
var rows = $( '#'+table+' tbody').find('tr').hide();
var data = this.value.split(" ");
$.each(data, function(i, v){
rows.filter(":containsNC('"+v+"')").show();
});
});
+1 for custom selector. Not a good idea to override core behaviour (what if someone relies on case sensivity already on the same project). I choosed “icontains” name from the comment below.
Thanks! This was really useful and worked like a charm (Y)
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.
Very useful. I am in agreement with the other folks however, in that it should be a new pseudo selector.
Thanks for the post , it helps me a lot , thanks a lot again
Nice piece of code. Run with just copy and paste
Awesome! Very helpful for me :) Thanks
Very nice, thanks!
I could not understand the code :(((
what is “jQuery.expr[‘:’]” ? I can’t find anything about it.
how do you learn how to use this:
$.expr[“:”].contains
?
amazing trick ! Thanks !
Very useful. Thanks!
I liked Emanuele’s solution a lot, because sometimes I need it to be case sensitive. Both very useful though, and both should be standard jQuery functionality.
Hi Jonathan Gravois: I know its Quite late and Your question might be answered by now. But i thought it would be helpful to others .
$(document).on(‘keyup’, ‘.rowFilter’, function(e){
var table = $(this).parent().next(‘table’).attr(‘id’);
var rows = $( ‘#’+table+’ tbody’).find(‘tr’).hide();
var data = this.value.split(” “);
$.extend($.expr[“:”], { “containsNC”: function(elem, i, match, array) { return (elem.textContent || elem.innerText || “”).toLowerCase().indexOf((match[3] || “”).toLowerCase()) >= 0;
}
});
var oObj = $( “:containsNC(‘”+v+”‘)” );
$.each(data, function(i, v){
rows.filter(‘”+oObj+”‘).show();
});
});
Simple and it works perfectly.
Love it! thanks
Here’s my method should be quite self ex-planetary.
We are searching for all “p” elements that contain any case variant of “baskey”.
var str =$(“p”).text();
var fnd = str.match(/baskey/gi);
fnd.forEach(function(a){
$(“p:contains(“+a+”)”).css({color:”red”});
});
:)baskey
Saved me lots of time. Thanks!
Thanks for this snippet! This is something that should be already included in the core library.
For brazilians users, insensitive case with accents stuff
Para brasileiros, case insensite substituindo acentos por sem acentos
Abraços
}
ecowebdesign . com . br
Great post.
Is there any way to use it in Node.js cheerio.
I get the error TypeError: Cannot read property ‘:’ of undefined