Is there a case insensitive jQuery :contains selector?

后端 未结 12 2134
悲哀的现实
悲哀的现实 2020-11-22 02:45

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?<

相关标签:
12条回答
  • 2020-11-22 03:04

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

    0 讨论(0)
  • 2020-11-22 03:05

    Refer below to use ":contains" to find text ignoring its case sensitivity from an HTML code,

     $.expr[":"].contains = $.expr.createPseudo(function(arg) {
                return function( elem ) {
                    return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
                };
            });
            $("#searchTextBox").keypress(function() {
              if($("#searchTextBox").val().length > 0){
                $(".rows").css("display","none");
                var userSerarchField = $("#searchTextBox").val();
                $(".rows:contains('"+ userSerarchField +"')").css("display","block");
              } else {
                $(".rows").css("display","block");
              }              
            });
    

    You can also use this link to find case ignoring code based on your jquery version, Make jQuery :contains Case-Insensitive

    0 讨论(0)
  • 2020-11-22 03:07

    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;
        };
    });
    
    0 讨论(0)
  • 2020-11-22 03:11

    New a variable I give it name subString and put string you want to search in some elements text. Then using Jquery selector select elements you need like my example $("elementsYouNeed") and filter by .filter(). In the .filter() it will compare each elements in $("elementsYouNeed") with the function.

    In the function i using .toLowerCase() for element text also subString that can avoid case sensitive condition and check if there is a subString in it. After that the .filter() method constructs a new jQuery object from a subset of the matching elements.

    Now you can get the match elements in matchObjects and do whatever you want.

    var subString ="string you want to match".toLowerCase();
    
    var matchObjects = $("elementsYouNeed").filter(function () {return $(this).text().toLowerCase().indexOf(subString) > -1;});
    
    0 讨论(0)
  • 2020-11-22 03:12

    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;
    };
    
    0 讨论(0)
  • 2020-11-22 03:13

    A faster version using regular expressions.

    $.expr[':'].icontains = function(el, i, m) { // checks for substring (case insensitive)
        var search = m[3];
        if (!search) return false;
    
        var pattern = new RegExp(search, 'i');
        return pattern.test($(el).text());
    };
    
    0 讨论(0)
提交回复
热议问题