Les expressions régulières


Les expressions régulières

  1. Objectifs
    • ِConnaitre les principales expressions régulières

  2. Introduction
    • Les méthodes de manipulation de caractères de l’objet String
    • Pour le faire il faut définir une instance de l’objet RegExp.C’est ce qu’on appellera une expression régulière. Les éléments de cette expression régulière sont précisés entre deux barres obliques.
    • Les différents éléments sont séparés par une virgule.



  3. Déclaration
    • La création d’un objet RegExp se crée à l’aide de la syntaxe suivante:
    • expression = /critère/;
    • Il est également possible de créer un tel objet de manière plus classique à l’aide de son constructeur:
    • expression = new RegExp ("critère");
    • On peut de plus, préciser le comportement de l’expression régulière de façon optionnelle par :
    • g qui indique une recherche globale de toutes les occurrences.
    • i pour une recherche non sensible à la casse, soit indépendamment de la présence de majuscule ou minuscule dans la chaîne.
    • gi qui combine les deux.
    • expression = /critère/g;
    • expression = new RegExp("critère","i");

  4. Syntaxes et utilisations
    • Début et fin de chaîne
      • Les regex permettent d’être très précis.
      • ^(accent circonflexe) : indique le début d’une chaîne, si il est devant un mot, alors ce mot devra obligatoirement se trouver au début de la chaîne, sinon on vous répondra FAUX.
      • $(dollar) : indique la fin d’une chaîne, si il est à la fin d’un mot, alors ce mot devra obligatoirement se trouver à la fin de la chaîne, sinon on vous répondra FAUX.
    • Le tableau suivant présente une liste de composants pour former une expression régulière.
    • Caractère Description
      xyz Trouve xyz n’importe où dans la chaîne de caractères.
      ^xyz Trouve xyz au début de la chaîne de caractères.
      xyz$ Trouve xyz à la fin de la chaîne de caractères.
      xyz* Trouve xy suivi de zéro ou plusieurs z.
      xyz+ Trouve xy suivi de un ou plusieurs z.
      xyz? Trouve xy suivi de zéro ou un seul z.
      .xyz Trouve xyz précédé d’un caractère joker.
      .+xyz Trouve xyz précédé de plusieurs caractères joker.
      \bxyz\b Trouve xyz en tant que mot distinct.
      \Bxyz\B Trouve uniquement xyz à l’intérieur de mots.
      x|y Trouve x ou y.
      [xyz] Trouve x ou y ou z.
      [a-z] Trouve n’importe quel caractère de a à z (alphabet ASCII, soit sans caractères accentués).
      [0-9] Trouve n’importe quel chiffre de 0 à 9.
      x{n} Trouve x exactement n fois.
      x{n, } Trouve x au moins n fois.
      x{n,m} Trouve x entre n et m fois.
    • Pour rechercher un caractère faisant partie des caractères spéciaux, il suffit de le faire précéder d’une barre oblique inverse ou antislash (sauf entre crochets).
    • Caractère spécial Notation Description
      \ \\ Le caractère antislash représente lui-même ou le caractère spécial qui le suit.
      . \. Le caractère point représente un caractère quelconque.
      $ \$ Placé en fin d’expression il signifie “chaîne finissant par … "
      [ \[ []Les crochets définissent une liste de caractères.
      ] \]
      ( \( () Les parenthèses définissent un élément composé de l’expression régulière qu’elle contient.
      ) \)
      { \{ {} Les accolades lorsqu’elles contiennent un ou plusieurs chiffres séparés par des virgules représentent le nombre d’occurences de l’élément les précédant (par exemple p{2,5} correspond à ppp, pppp ou ppppp
      Les accolades sont utilisées pour spécifier le minimum et le maximum de fois où l’occurrence doit figurer. Exemple: {1,3} désigne que l’occurrence figure entre 1 et 3 fois.
      } \}
      ^ \^
    • Placé en début d’expression il signifie “chaîne commençant par .. “
    • Utilisé entre crochet, immédiatement après le crochet ouvrant, il signifie “ne contenant pas les caractères suivants…
    • ? \? Le caractère “point d’interrogation” indique une occurrence éventuelle (0 ou 1) de l’élément le précédant.
      * \* Le caractère astérisque indique un nombre d’occurrences indéterminé (y compris aucune) de l’élément le précédant.
      + \+ Le caractère plus indique qu’une ou plusieurs occurrences de l’élément précédant doivent exister, le motif précédent doit figurer au moins une fois, le max n’est pas déterminé
      - \- Un moins entre deux caractères dans une liste représente un intervalle (par exemple [a-d] représente [abcd]).
    • Il existe aussi des caractères spéciaux (précédés d’une barre oblique inverse) représentant des types de caractères spécifiques :
    • Caractère Description
      \f Trouve un signe de saut de page.
      \n Trouve un saut de ligne.
      \r Trouve un retour chariot.
      \t Trouve une tabulation horizontale.
      \v Trouve une tabulation verticale.
      \s Trouve toute sorte d’espace vide donc espace, retour chariot, tabulation, saut de ligne, saut de page.
      \S Trouve un caractère quelconque qui ne soit pas un espace vide.
      \w Trouve tous les caractères alphanumériques (minuscules ou majuscules) ainsi que le tiret de soulignement.
      \W Trouve tous les caractères non alphanumériques.
      \d Trouve tous les caractères numériques soit chiffre de 0 à 9.
      \D Trouve tous les caractères non numériques.
      \b Permet de capturer une coupure de mot, c’est-à-dire des caractères situés au tout début ou à la fin d’un mot. Par exemple “ie\b” permet de capturer “apcpedagogie” mais pas “Siège”. De la même façon “\bap” permet de capturer “apcpedagogie” mais pas “papa”.
      \B Permet de capturer les caractères non précédés ou suivis d’une coupure de mot, c’est-à-dire des caractères situés au milieu d’un mot. Par exemple “pcpe\B” permet de capturer “apcpedagogie” mais pas “apc pedagogie”.

  5. Exemples d’utilisation
    • Un nombre entier ou décimal
      • var reg = /^\d+[.]?\d*$/;
        • Le signe ^ signale que l’on commence au début de la chaîne de caractères.
        • \d+ pour plusieurs caractères numériques
        • [.]? pour zéro ou une fois un point décimal
        • \d* pour zéro ou plusieurs caractères numériques.
        • $ pour fin du nombre.
      Login valide de 3 à 8 caractères ( numériques, majuscules ou minuscules) sans caractères spéciaux
      • var exp = new RegExp("^[a-zA-Z0-9]{3,8}$");
        • Le signe ^ signale que l’on commence au début de la chaîne de caractères
        • [a-zA-Z0-9] note que les caractères alphabétiques peuvent être en minuscule de a à z, en majuscules de A à Z et des chiffres de 0 à 9
        • {3 ,8} vérifie si la chaîne comporte entre 3 et 8 caractères.
        • $ signale la fin de la chaîne de caractères et interdit tout caractère supplémentaire.

  6. Application
    • Créer une page web contenant une zone de texte (ou espace de texte) pour que l’internaute puisse y saisir un texte quelconque. On suppose que celui ci ne doit pas contenir plus de X caractères, X représente un maximum autorisé soit 60 par exemple.
    • Pour que l’internaute ne soit pas surpris par le refus de son post suite à un excès de caractères, nous allons prévoir une zone de texte en bas du textarea qui affiche le nombre de caractères restants.
    • Ce nombre sera automatiquement calculé à chaque modification du texte par le clavier (pour simplifier l’exercice, nous n’allons pas traiter le cas où l’internaute fait un copier-coller dans la zone de saisie).
    • Si la taille du texte saisi dépasse la longueur maximale spécifiée, alors un message alert() s’affiche pour signaler à l’internaute l’excès de caractères, en plus, tout ce qui dépasse est automatiquement supprimé pour ne conserver que les X premiers caractères autorisés.
    • L’utilisateur sera encore averti, s’il lui reste 10 caractère ou moins ( en agit ici sur la couleur et la police du nombre)
    • La zone de texte qui affiche le compteur doit avoir l’attribut HTML readonly, pour empêcher toute modification du texte directement dans cette zone.
    • Pour avoir une idée plus claire sur ce qu’on doit faire, voici un exemple:
    • Les expressions régulières

    Source: inspiré du livre Ajax Luc VAN LANCKER


Sommaire du cours JavaScript



Veuillez désactiver votre bloqueur de publicités ou ajouter ce site à la liste blanche !

Abonnez vous à notre chaîne YouTube gratuitement