Is There a Case Insensitive Jquery :Contains Selector

jQuery :contains() selector uppercase and lower case issue

You can change the .contains filter to be case insensitive or create your own selector.

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

This creates a new selector: icontains (or you could name it insensitive-contains, or whatever suits your fancy).
It's usage would be the same as contains: $('div:icontains("Stack")'); would match:

<div>stack</div>
<div>Stack</div>
<div>StAcKOverflow</div>

Or override the existing .contains filter:

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>

Is there a case insensitive jQuery :contains selector?

What I ended up doing for jQuery 1.2 is :

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

This will extend jquery to have a :Contains selector that is case insensitive, the :contains selector remains unchanged.

Edit: For jQuery 1.3 (thanks @user95227) and later you need

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

Edit:
Apparently accessing the DOM directly by using

(a.textContent || a.innerText || "") 

instead of

jQuery(a).text()

In the previous expression speeds it up considerably so try at your own risk if speed is an issue. (see @John 's question)

Latest edit: For jQuery 1.8 it should be:

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

How do I make jQuery Contains case insensitive, including jQuery 1.8+?

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.

how to make case insensitive jquery contains?

jQuery.expr.filters.icontains = function(elem, i, m) {
    return (elem.innerText || elem.textContent || "").toLowerCase().indexOf(m[3].toLowerCase()) > -1;
}

$("div:icontains('text')")

http://jsfiddle.net/SXsbP/

Case-insensitive contains

Here's a custom implementation:

$.expr[':'].icontains = $.expr.createPseudo(function( text ) {
    text = text.toLowerCase();
    return function (el) {
        return ~$.text(el).toLowerCase().indexOf( text );
    }
});

Use it like this:

$(':icontains(SoMeThInG)');

---

Here's the fiddle: http://jsfiddle.net/CTg86/

jQuery:Case insensitive :contains

Try this:

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

and then you ca use it like: $("element:Contains")

Case insensitive jQuery attribute selector

You can always use .filter():

var mans = $('input').filter(function() {
    return $(this).attr('name').toLowerCase().indexOf('man') > -1;
});

mans.css('background-color', 'black');

The key part here is toLowerCase() which lowercases the name attribute, allowing you to test it for containing man.

JQuery how to .find() case insensitive?

Rather than building your check into your find, you should match off of "Manufacturer", and then search by the name of the manufacturer and the query both cast to lower case within the function

$(xml).find("Manufacturer").each(function(i){
  console.log($(this)[0].attributes.name.value.toLowerCase().indexOf(query.toLowerCase()) >= 0;
})

JQuery - How can I write a case-insensitive 'Attribute Contains' selector?

This is adapted from a post by Karl Swedburg on the jQuery docs page for the 'Attributes Contains Selector'. It uses a RegEx and the i case insensitive switch along with the filter function -

<img title="Star Wars"/>
<img title="Star Wars 2"/>
<img title="Star Wars 3"/>
<img title="Back To The Future"/>

var videoTitle = "star wars";
var re =  RegExp(videoTitle ,"i"); 
$('img[title]').filter(function() {
   return re.test(this.title);
}).each(function() {alert(this.title)});

The names of the three 'Star Wars' films should be alerted.

Demo - http://jsfiddle.net/FKBTx/3

jQuery contains insensitive search for data from one list to another

As you've seen, :contains is case-sensitive. One alternative is to build your own logic in to filter() which matches the text of the two elements using a case-insensitive regular expression. Also note that the inner each() loop is not required.

$('.blog-tags > span > a').each(function() {

  var aText = $(this).text();

  $('.sp_sectors li').filter(function() {

    return RegExp(aText, 'gi').test($(this).text());

  }).addClass('active');

});

.active { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="blog-tags minor-meta">

  <span>

    <a rel="tag">3d printing</a>

    <a rel="tag">art</a>

    <a rel="tag">medical</a>

    <a rel="tag">Prototyping</a>

  </span>

</span>

<ul class="sp_sectors">

  <li>Engineering</li>

  <li>Automotive</li>

  <li>Medical</li>

  <li>Prototyping</li>

  <li>ART</li>

</ul>

---

Related Topics