jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Trucs et astuces > Sélecteur RegExp pour jQuery

Sélecteur RegExp pour jQuery

jeudi 26 février 2009, par James Padolsey, Olivier G.

Traduction de l’article de James Padlosey : Regex Selector for jQuery.


il y a quelques temps, j’ai publié un article (traduction) expliquant combien c’était ultimement génial d’étendre les sélecteurs de filtres de jQuery. En partant de ça, voici quelque chose de nouveau : un sélecteur par expressions régulières. les sélecteurs (CSS 3) d’attributs actuels de jQuery permettent une notation par expressions régulière basique, mais rien qui s’approche de ceci.

:regex

jQuery.expr[':'].regex = function(elem, index, match) {
   var matchParams = match[3].split(','),
       validLabels = /^(data|css):/,
       attr = {
           method: matchParams[0].match(validLabels) ?
                       matchParams[0].split(':')[0] : 'attr',
           property: matchParams.shift().replace(validLabels,'')
       },
       regexFlags = 'ig',
       regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
   return regex.test(jQuery(elem)[attr.method](attr.property));
}

Utilisation

C’est assez simple à utiliser, vous avez besoin de passer un attribut et une expression régulière à tester. L’expression régulière doit être en notation non-littérale ; vous devez donc remplacer tous les backslashes par deux backslashes (ie ^\w+$ devient ^\\w+$)).

// Sélectionne tous les éléments dont l'id commence par une voyelle :
$(':regex(id,^[aeiou])');

// Sélectionne tous les divs dont la classe contient un chiffre :
$('div:regex(class,[0-9])');

// Sélectionne toutes les balises script dont la source contient jQuery :
$('script:regex(src,jQuery)');

// Oui, je sais que le dernier exemple peut être fait avec les sélecteur d'attributs CSS3. C'est juste un exemple...

Note : toutes les recherches sont insensibles à la casse ; vous pouvez changer ça en retirant le drapeau i dans le plugin.

Ce plugin vous permet aussi d’interroger les styles CSS avec des expressions régulières, par exemple :

// Sélectionne tous les éléments dont la largeur est comprise entre 100 et 300 pixels :
$(':regex(css:width, ^[1-3]\\d{2}px$)');

// Sélectionne tous les divs qui ne sont pas en display: block :
$('div:not(:regex(css:display, ^block$))');

De plus, vous pouvez interroger les chaînes data ajoutées aux éléments au travers de la méthode data de jQuery :

// Ajouter une propriété data à toutes les images (c'est juste un exemple) :
$('img').each(function(){
   $(this).data('extension', $(this)[0].src.match(/\.(.{1,4})$/)[1]);
});

// Sélectionner toutes les images avec une extension PNG ou JPG :
$('img:regex(data:extension, png|jpg)');

Amusez-vous bien !

Répondre à cet article


Derniers commentaires