Grow your CSS skills. Land your dream job.

Last updated on:

Make jQuery :contains Case-Insensitive

// 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.

Comments

  1. 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')")

    • Jonathan Gravois
      Permalink to comment#

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

  2. Jimbooooooo
    Permalink to comment#

    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.

  3. Very useful. I am in agreement with the other folks however, in that it should be a new pseudo selector.

  4. samir
    Permalink to comment#

    Thanks for the post , it helps me a lot , thanks a lot again

  5. GAURAV
    Permalink to comment#

    Nice piece of code. Run with just copy and paste

  6. Cezar Luiz

    Awesome! Very helpful for me :) Thanks

  7. Rafael Paranaiba
    Permalink to comment#

    Very nice, thanks!

  8. nicolas
    Permalink to comment#

    I could not understand the code :(((

    what is “jQuery.expr[':']” ? I can’t find anything about it.

  9. nicolas
    Permalink to comment#

    how do you learn how to use this:

    $.expr[":"].contains

    ?

  10. caiman
    Permalink to comment#

    amazing trick ! Thanks !

  11. Akin
    Permalink to comment#

    Very useful. Thanks!

  12. Ben Power
    Permalink to comment#

    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.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".