Expressions régulières du sélecteur jQuery

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.

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 .

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>

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

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/

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

Voici!

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/.

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

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

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']")

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")')