web-dev-qa-db-fra.com

Expressions régulières de sélecteur jQuery

Je suis après la documentation sur l'utilisation d'expressions génériques ou régulières (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 ni sur la façon de l'utiliser. Est-ce que quelqu'un sait où se trouve la documentation de la syntaxe?

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

javascriptjqueryregexjquery-selectors
545
Joel Cunningham

James Padolsey a créé un merveilleux filtre qui permet d’utiliser regex pour la sélection.

Disons que vous avez le code div suivant:

<div class="asdf">

Le filtre :regex de Padolsey peut le sélectionner comme suit:

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

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

325
Xenph Yan

Vous pouvez utiliser la fonction filter pour appliquer une correspondance de regex plus complexe.

Voici un exemple qui correspondrait aux trois premiers divs:

$('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>
710
nickf

Ceux-ci peuvent être utiles.

Si vous trouvez par contient alors 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 termine par alors ce sera comme ça

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

Si vous voulez sélectionner des éléments qui 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 voulez sélectionner des éléments qui id contient un mot donné, délimité par des espaces

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

Si vous voulez sélectionner des éléments qui id est égal à une chaîne donnée ou 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
     });
258
dnxit

Si votre utilisation de l'expression régulière est limitée pour vérifier si un attribut commence par une certaine chaîne, vous pouvez utiliser le sélecteur ^ jquery.

Par exemple, si vous voulez uniquement div avec un identifiant commençant par "abc", vous pouvez utiliser $("div[id^='abc']")

Vous trouverez ici de nombreux sélecteurs très utiles pour éviter l'utilisation de regex: http://api.jquery.com/category/selectors/attribute-selectors/

44
Nicolas Janel
var test = $('#id').attr('value').match(/[^a-z0-9 ]+/);

Voici!

22
Kamil Dąbrowski

les identifiants et les classes sont toujours des attributs. Vous pouvez donc leur appliquer un filtre d'attributs regexp si vous les sélectionnez en conséquence. Lisez plus ici: http://rosshawkins.net/archive/2011/10/14/jquery-wildcard-selectors-some-simple-examples.aspx

7
Jānis Elmeris

Ajouter 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);

Ensuite,

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

sélectionnera tous les éléments de portée avec les correspondances de texte/Envoyés /.

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

sélectionnera tous les éléments span dont les classes correspondent /tooltip.year/.

7
brook hong
$("input[name='option[colour]'] :checked ")
2
irfan akhtar

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

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

1
Prakash GPz

Je donne juste mon exemple en temps réel:

En javascript natif, j'ai utilisé l'extrait suivant pour trouver les éléments dont l'identifiant commence par "select2-qownerName_select-result".

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

Lorsque nous sommes passés de javascript à jQuery, nous avons remplacé le fragment ci-dessus par le texte suivant, qui implique moins de modifications de code sans perturber la logique.

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

1
Vishnu Prasanth G