web-dev-qa-db-fra.com

Existe-t-il un sélecteur jQuery insensible à la casse?

Existe-t-il une version du sélecteur : contient jQuery insensible à la casse ou dois-je effectuer le travail manuellement en effectuant une boucle sur tous les éléments et en comparant leur .text () à ma chaîne?

javascriptjqueryjquery-selectors
139
Pat

Ce que j'ai fini par faire pour jQuery 1.2 est:

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

Cela étendra jquery pour avoir un sélecteur: Contient insensible à la casse, le sélecteur: contient reste inchangé.

Edit: Pour jQuery 1.3 (merci @ user95227) et plus tard, vous avez besoin

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

Edit: apparemment, accéder directement au DOM en utilisant

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

au lieu de

jQuery(a).text()

Dans l’expression précédente, accélérez considérablement, essayez donc à vos risques et périls si la vitesse pose problème. (voir @ Johnquestion )

Dernière édition: Pour jQuery 1.8, il devrait être:

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

Pour le rendre éventuellement insensible à la casse: 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;
  }
});

puis utilisez :containsi au lieu de :contains

102
montrealmike

Depuis jQuery 1.3, cette méthode est obsolète. Pour que cela fonctionne, il doit être défini comme une fonction:

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

Si quelqu'un (comme moi) est intéressé, que font a et m [3] signifie dans contient la définition .

KEY/LEGEND: paramètres mis à disposition par jQuery pour être utilisés dans les définitions de sélecteur:

r = jQuery tableau d'éléments examinés. (par exemple: r.length = nombre d'éléments)

i = index de l'élément sous contrôle, dans le tableau r .

a = élément actuellement sous contrôle. L'instruction de sélecteur doit renvoyer true pour l'inclure dans les résultats correspondants.

m [2] = nomNoeud ou * que nous cherchons (à gauche des deux points).

m [3] = paramètre passé dans le sélecteur (param). Typiquement un numéro d'index, comme dans : nth de type (5) , ou une chaîne, comme dans : couleur (bleu) .

37
Alexander Prokofyev

Dans jQuery 1.8, vous devrez utiliser

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

Une variante qui semble fonctionner un peu plus vite et qui aussi autorise les expressions régulières est:

jQuery.extend (
    jQuery.expr[':'].containsCI = function (a, i, m) {
        //-- faster than jQuery(a).text()
        var sText   = (a.textContent || a.innerText || "");     
        var zRegExp = new RegExp (m[3], 'i');
        return zRegExp.test (sText);
    }
);


Non seulement cette distinction est-elle sensible à la casse, mais elle permet des recherches puissantes telles que:

  • $("p:containsCI('\\bup\\b')") (correspond à "Up" ou "up", mais pas "upper", "wakeup", etc.)
  • $("p:containsCI('(?:Red|Blue) state')") (correspond à "l'état rouge" ou "l'état bleu", mais pas à "l'état actif", etc.)
  • $("p:containsCI('^\\s*Stocks?')") (correspond à "stock" ou "stocks", mais uniquement au début du paragraphe (en ignorant les espaces blancs les plus importants).)
15
Brock Adams

Peut-être en retard .... mais,

Je préférerais aller de cette façon ..

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

De cette façon, vous NE PAS altérer le NATIVE de jQuery '. Contient' ... Vous aurez peut-être besoin de celui par défaut plus tard. ..si altéré, vous pourriez vous retrouver à stackOverFlow ...

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

Le code de mise à jour fonctionne très bien dans la version 1.3, mais "contient" doit être en minuscule sur la première lettre contrairement à l'exemple précédent.

6
user122879

Reportez-vous ci-dessous pour utiliser ": contient" pour trouver du texte ignorant sa sensibilité à la casse à partir d'un code HTML,

 $.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");
          }              
        });

Vous pouvez également utiliser ce lien pour rechercher le code ignorant le casse en fonction de votre version de jquery, Rendre jQuery: contient la casse

4
Umesh Patil

J'ai eu un problème similaire avec ce qui suit ne fonctionne pas ...

// This doesn't catch flac or Flac
$('div.story span.Quality:not(:contains("FLAC"))').css("background-color", 'yellow');

Cela fonctionne et sans la nécessité d'une extension

$('div.story span.Quality:not([data*="flac"])').css("background-color", 'yellow');

Cela fonctionne aussi, mais tombe probablement dans la catégorie "en boucle manuellement" ....

$('div.story span.Quality').contents().filter(function()
{
  return !/flac/i.test(this.nodeValue);
}).parent().css("background-color", 'yellow');
0
shao.lo

Une version plus rapide utilisant des expressions régulières.

$.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
rotaercz