Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a case insensitive jQuery :contains selector?

People also ask

Is jQuery selector case-sensitive?

jQuery attribute value selectors are generally case-sensitive.

What are the selectors of jQuery?

jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors. All selectors in jQuery start with the dollar sign and parentheses: $().

How use contains in jQuery?

jQuery :contains() SelectorThe :contains() selector selects elements containing the specified string. The string can be contained directly in the element as text, or in a child element. This is mostly used together with another selector to select the elements containing the text in a group (like in the example above).

How many types of selectors are there in jQuery?

Two selectors: visible and: hidden are also available in JQuery.


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

To make it optionally case insensitive: http://bugs.jquery.com/ticket/278

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

then use :containsi instead of :contains


As of jQuery 1.3, this method is deprecated. To get this to work it needs to be defined as a function:

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

If someone (like me) is interested what do a and m[3] mean in Contains definition.


KEY/LEGEND: Params made available by jQuery for use in the selector definitions:

r = jQuery array of elements being scrutinised. (eg: r.length = Number of elements)

i = index of element currently under scrutiny, within array r.

a = element currently under scrutiny. Selector statement must return true to include it in its matched results.

m[2] = nodeName or * that we a looking for (left of colon).

m[3] = param passed into the :selector(param). Typically an index number, as in :nth-of-type(5), or a string, as in :color(blue).