93

I'm trying to use "contains" case insensitively. I tried using the solution at the following stackoverflow question, but it didn't work:

Is there a case insensitive jQuery :contains selector?

For convenience, the solution is copied here:

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

Here is the error:

Error: q is not a function
Source File: /js/jquery-1.4.js?ver=1.4
Line: 81

Here's where I'm using it:

  $('input.preset').keyup(function() {
    $(this).next().find("li").removeClass("bold");
    var theMatch = $(this).val();
    if (theMatch.length > 1){
      theMatch = "li:Contains('" + theMatch + "')";
      $(this).next().find(theMatch).addClass("bold");
    }
  });

My use of the original case sensitive "contains" in the same scenario works without any errors. Does anyone have any ideas? I'd appreciate it.

Community
  • 1
  • 1
Matrym
  • 16,643
  • 33
  • 95
  • 140
  • In case anyone is interested, I've updated my [blog post](http://wowmotty.blogspot.com/2010/05/jquery-selectors-adding-contains-exact.html) on three additional contains selectors `:containsExact`, `:containsExactCase` and `:containsRegex` selectors to now work in all versions of jQuery. – Mottie Sep 02 '12 at 13:08
  • See https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/, – Alan Dong Nov 18 '16 at 20:15
  • I think .filter() is another good way. [Reference](https://stackoverflow.com/a/59730613/7786739) – 劉鎮瑲 Jan 14 '20 at 09:18

6 Answers6

129

This is what i'm using in a current project, haven't had any problems. See if you have better luck with this format:

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

In jQuery 1.8 the API for this changed, the jQuery 1.8+ version of this would be:

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

You can test it out here. For more detail on 1.8+ custom selectors, check out the Sizzle wiki here.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 3
    Any chance you could talk about exactly what this is doing? – Abe Miessler Oct 25 '11 at 21:09
  • 4
    @ClovisSix - thanks for the heads up, I provided a 1.8+ method of doing the same, let me know if you have any trouble. – Nick Craver Aug 10 '12 at 12:41
  • Thanks for the 1.8 change. Had a similar extension that stopped working with with the 1.8 release. Saved my butt. – ObjectType Aug 14 '12 at 22:04
  • 2
    To Note that this does not replace :contains just add another selector :Contains. – albanx Jan 23 '14 at 16:00
  • 3
    the selector should be called `icontains`, or something similar. – Sebastian Mar 03 '14 at 10:40
  • I'd suggest that it should be `return arg != undefined && jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;` to prevent javascript error in case `contains` is called with empty `arg` – outofmind Nov 16 '15 at 23:58
43

It's worth noting that the answer is correct but only covers :Contains, and not the alias :contains which could lead to unexpected behavior (or could be used by design for advanced applications that require both sensitive and insensitive search).

This could be resolved by duplicating the extention for the alias: 

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; 
};

Took me a while to work out why it wasn't working for me.

Ellipsis
  • 599
  • 1
  • 5
  • 8
  • I would have commented this on above, but apparently I'm not able to. – Ellipsis Apr 27 '11 at 04:32
  • 5
    I'm not sure what you're getting at here. This overrides the expected, documented behavior of `:contains`. I think it's clearer to leave the original `:contains` alone and call your new selector `:icontains`. – Justin Force Jun 15 '11 at 17:12
  • 5
    That's beside the point of my post. Creating an alternative selector is certainly a valid option, however I was pointing out that extending :contains, but neglecting to extend :Contains could lead to user confusion, when they yield different results. – Ellipsis Aug 30 '11 at 11:07
  • 1
    Then thank you for sharing this "gotcha." :) Still, I think it's a good idea to mention that it's better not to override the built-in behavior when it's less work to build a non-destructive, parallel behavior. – Justin Force Aug 30 '11 at 22:53
  • I tried a few different solutions posted for this and this one finally worked. thanks. – taylor michels May 06 '14 at 13:33
27

I would do something like this 

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

And Leave :contains Alone...

DEMO

So why jQuery doesn't support it in it's library?! if it is that easy...

because Does your code pass the turkey code?

Mina Gabriel
  • 23,150
  • 26
  • 96
  • 124
6

May be late.... but,

I'd prefer to go this way..

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

This way, you DO NOT tamper with jQuery's NATIVE '.contains'... You may need the default one later...if tampered with, you might find yourself back to stackOverFlow...

ErickBest
  • 4,586
  • 5
  • 31
  • 43
0

i'll allow myself to add my friends:

$.expr[":"].containsNoCase = function (el, i, m) { 
    var search = m[3]; 
    if (!search) return false; 
    return eval("/" + search + "/i").test($(el).text()); 
};
bresleveloper
  • 5,940
  • 3
  • 33
  • 47
0

I was just able to ignore jQuery's case sensitivity altogether to achieve what I want using below code:

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

You can use this link to find code based on your jQuery versions to ignore case sensitivity, https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/

Also if you want to use :contains and make some search you may want to take a look at this: http://technarco.com/jquery/using-jquery-search-html-text-and-show-or-hide-accordingly

Umesh Patil
  • 4,668
  • 32
  • 24