Les expressions régulières
Sommaire
- 1- Objectifs
- 2- Introduction
- 3- Déclaration
- 4- Syntaxes et utilisations
- 4.1- Début et fin de chaîne
- 5- Exemples d'utilisation
- 5.1- Un nombre entier ou décimal
- 5.2- Login valide de 3 à 8 caractères ( numériques, majuscules ou minuscules) sans caractères spéciaux
- 6- Application
- 6.1.1- Sommaire du cours JavaScript
Les expressions régulières
-
Objectifs
- ِConnaitre les principales expressions régulières
-
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.
-
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");
-
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.
- 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).
- 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…
- 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 :
-
Exemples d’utilisation
-
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.
-
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.
-
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:
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. |
\b xyz\b |
Trouve xyz en tant que mot distinct. |
\B xyz\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. |
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 pppppLes 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. |
} |
\} | |
^ |
\^ |
|
? |
\? | 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]). |
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 ». |
Un nombre entier ou décimal
Login valide de 3 à 8 caractères ( numériques, majuscules ou minuscules) sans caractères spéciaux
Source: inspiré du livre Ajax Luc VAN LANCKER