Sunday, May 1, 2011

Is there a case insensitive jQuery :contains selector?

Is there a case insensitive version of the :contains jQuery selector or should I do the work manually by looping over all elements and comparing their .text() to my string?

From stackoverflow
  • 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)

  • 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).

  • 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;
    };
    
  • jQuery.expr[':'].contains = function(a,i,m){
        return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
    };
    

    The update code works great in 1.3, but "contains" should be lower case on the first letter unlike the previous example.

  • I've moved my question to: http://stackoverflow.com/questions/1407434/is-there-anyway-to-speed-up-this-solution-for-a-case-insensitive-jquery-contains

0 comments:

Post a Comment