Expressions régulières de sélecteur jQuery

StackOverflow https://stackoverflow.com/questions/190253

Question

Je suis à la recherche de documentation sur l'utilisation d'expressions génériques ou régulières (vous ne savez pas exactement quelle est la terminologie) avec un sélecteur jQuery.

J'ai recherché cela moi-même, mais je suis incapable de trouver des informations sur la syntaxe et son utilisation. Est-ce que quelqu'un sait où se trouve la documentation pour la syntaxe?

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

Était-ce utile?

La solution

James Padolsey a créé un excellent filtre permettant à regex d'être utilisé pour la sélection.

Disons que vous avez le div suivant: 

<div class="asdf">

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

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

Vérifiez également la documentation officielle sur les sélecteurs .

Autres conseils

Vous pouvez utiliser la fonction filtre pour en appliquer d'autres. correspondance complexe regex.

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>

Cela peut être utile.

Si vous recherchez par contient , ce sera comme ceci 

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

Si vous recherchez par Commence par , ce sera comme ceci 

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

Si vous recherchez par termine par , ce sera comme ceci 

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

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

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

Si vous souhaitez sélectionner des éléments dont 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
     });

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 souhaitez uniquement sélectionner div avec l'id commençant par "abc", vous pouvez utiliser $ ("div [id ^ = 'abc']")

De nombreux sélecteurs très utiles pour éviter l'utilisation de regex peuvent être trouvés ici: http: // api. jquery.com/category/selectors/attribute-selectors/ 

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

Voilà!

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

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 avec des correspondances de texte / Sent /.

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

sélectionnera tous les éléments de portée dont les classes correspondent /tooltip.year /.

$("input[name='option[colour]'] :checked ")

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

$ (': contient (" chaîne de recherche ")')

Je ne fais que donner mon exemple en temps réel:

En javascript natif, j'ai utilisé l'extrait suivant pour rechercher 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'] ")

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top