Expressions régulières du sélecteur jQuery

580

Je suis après la documentation sur l'utilisation de caractères génériques ou d'expressions régulières (je ne suis pas sûr de la terminologie exacte) avec un sélecteur jQuery.

J'ai moi-même cherché cela, mais je n'ai pas pu trouver d'informations sur la syntaxe et comment l'utiliser. Quelqu'un sait-il où se trouve la documentation de la syntaxe?

EDIT: les filtres d'attribut vous permettent de sélectionner en fonction des modèles d'une valeur d'attribut.

Joel Cunningham
la source

Réponses:

340

James Padolsey a créé un merveilleux filtre qui permet d'utiliser l'expression régulière pour la sélection.

Disons que vous disposez des éléments suivants div:

<div class="asdf">

Le :regexfiltre de Padolsey peut le sélectionner comme suit :

$("div:regex(class, .*sd.*)")

Consultez également la documentation officielle sur les sélecteurs .

Xenph Yan
la source
3
D'accord. J'y suis allé mais je ne savais pas vraiment le nom de ce que je cherchais. Ive a jeté un nouveau coup d'œil et utiliser des filtres d'attributs est ce que je recherchais.
Joel Cunningham
Le sélecteur d'expressions régulières par @padolsey fonctionne très bien. Voici un exemple où vous pouvez parcourir les champs de saisie de texte, de fichier et de case à cocher ou les zones de texte avec lui: $ j ('input: regex (type, text | file | checkbox), textarea'). Each (function (index) {// ...});
Matt Setter
13
La réponse ci-dessous de nickf devrait être la réponse acceptée. Si vous lisez cette réponse, assurez-vous de la lire!
Quentin Skousen
5
Je reçois une erreur: erreur de syntaxe, expression non reconnue: pseudo non pris en charge: regex
ryan2johnson9
2
-1. Le code pour implémenter cela n'est pas inclus dans la réponse et est susceptible de lier la pourriture. De plus, j'ai trouvé deux bogues lors du test du code - il supprimera les virgules des expressions régulières les contenant (résolues en les remplaçant matchParams.join('')par matchParams.join(',')), et tout modèle qui correspond 'undefined'ou 'null'correspondra undefinedet null, respectivement. Ce deuxième bogue peut être résolu en vérifiant que la valeur testée !== undefinedet d' !== nullabord. Quoi qu'il en soit, passer une fonction .filter()est plus facile et me semble plus propre / plus lisible.
James T
732

Vous pouvez utiliser la filterfonction pour appliquer une correspondance regex plus compliquée.

Voici un exemple qui correspondrait simplement aux trois premières divisions:

$('div')
  .filter(function() {
    return this.id.match(/abc+d/);
  })
  .html("Matched!");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="abcd">Not matched</div>
<div id="abccd">Not matched</div>
<div id="abcccd">Not matched</div>
<div id="abd">Not matched</div>

nickf
la source
comment utiliser les variables à la place de la correspondance (/ abc + d /); ?
Sasi varna kumar
2
@Sasivarnakumar la réponse à cette question est ici
Felipe Maia
283

Ces informations peuvent être utiles.

Si vous trouvez par Contient, ce sera comme ça

    $("input[id*='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

Si vous trouvez par Commence par alors ce sera comme ça

    $("input[id^='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

Si vous trouvez par Ends With alors ce sera comme ça

     $("input[id$='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

Si vous souhaitez sélectionner des éléments dont l' id n'est pas une chaîne donnée

    $("input[id!='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

Si vous souhaitez sélectionner des éléments dont le nom contient un mot donné, délimité par des espaces

     $("input[name~='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

Si vous souhaitez sélectionner des éléments dont l' id est égal à une chaîne donnée ou en commençant par cette chaîne suivie d'un trait d'union

     $("input[id|='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });
dnxit
la source
3
Excellente réponse, mais ids, étant des identifiants, ne peut pas contenir d'espace , l' ~=exemple doit être changé en quelque chose d'autre, comme class, qui est une liste d'identifiants délimitée par des espaces blancs. Des choses comme classce à quoi le ~=sélecteur d'attribut était destiné.
Code inutile
49

Si votre utilisation de l'expression régulière se limite à tester si un attribut commence par une certaine chaîne, vous pouvez utiliser le ^sélecteur JQuery.

Par exemple, si vous souhaitez uniquement sélectionner div avec id commençant par "abc", vous pouvez utiliser:

$("div[id^='abc']")

Un grand nombre de sélecteurs très utiles pour éviter l'utilisation de l'expression régulière peuvent être trouvés ici: http://api.jquery.com/category/selectors/attribute-selectors/

Nicolas Janel
la source
cela ne fonctionnera pas pour les exigences de correspondance insensible à la casse. La fonction .filter correspond mieux à ces besoins.
brainondev
2
c'était bon pour moi, je voulais juste voir s'il y avait un '__destroy' à la fin d'un identifiant d'entrée donc j'ai utilisé *=comme ceci:$("input[id*='__destroy'][value='true']")
ryan2johnson9
22
var test = $('#id').attr('value').match(/[^a-z0-9 ]+/);

Voici!

Kamil Dąbrowski
la source
8

Ajoutez une fonction jQuery,

(function($){
    $.fn.regex = function(pattern, fn, fn_a){
        var fn = fn || $.fn.text;
        return this.filter(function() {
            return pattern.test(fn.apply($(this), fn_a));
        });
    };
})(jQuery);

Alors,

$('span').regex(/Sent/)

sélectionnera tous les éléments span avec des correspondances de texte / Sent /.

$('span').regex(/tooltip.year/, $.fn.attr, ['class'])

sélectionnera tous les éléments span avec leurs classes correspondant à /tooltip.year/.

ruisseau hong
la source
2
$("input[name='option[colour]'] :checked ")
irfan akhtar
la source
2

Je donne juste mon exemple en temps réel:

En javascript natif, j'ai utilisé l'extrait suivant pour trouver les éléments avec des identifiants commençant par "select2-qownerName_select-result".

document.querySelectorAll("[id^='select2-qownerName_select-result']");

Lorsque nous sommes passés de javascript à jQuery, nous avons remplacé l'extrait ci-dessus par ce qui suit, ce qui implique moins de changements de code sans perturber la logique.

$("[id^='select2-qownerName_select-result']")

Vishnu Prasanth G
la source
Seule option que j'ai trouvée sans jQuery, et la plus efficace. Je vous remercie!
ggonmar
1

Si vous souhaitez simplement sélectionner des éléments qui contiennent une chaîne donnée, vous pouvez utiliser le sélecteur suivant:

$(':contains("search string")')

Prakash GPz
la source