Les expression régulières

Contenu

• L’objet RegExp
– Expressions régulières
– Définition de motifs
– Classe de caractères
– Caractères spéciaux
– Répétitions
– Regroupements
– Méthodes pour manipuler et valider des chaînes
Expressions régulières

ou comment décrire des motifs de caractères…

Expressions régulières (PCRE)

• Une expression régulière représente un motif de

caractères.
• Elles sont particulièrement utiles afin de vérifier les
données de formulaires.
• De façon plus générale, elles peuvent être utilisées
pour toute recherche et modification de texte de toute
sorte.
• Elles sont aussi appelées “regexp”.
Définition en JS

• Une expression régulière représente un motif de caractères.

• C’est un objet JavaScript.
• Constructeur:

var chaine = new RegExp("[a-z]");

• ou en définissant une chaine séparée par / et /
• Exemples équivalents:
– var expr1 = new RegExp("[a-z]");
– var expr2 = /[a-z]/;
 Format des regexp – début

• Une « regexp » contient des caractères, mais peut aussi contenir un des méta-
caractères suivants.
• \ : échappement du caractère suivant;
• ^ : indique le début de la ligne du motif;
• $ : indique la fin de la ligne du motif;
• . : remplace n’importe quel caractère (sauf retour);
• [] : indique une classe de caractères;
• () : indique un groupement;
• | : indique une alternative (option);
• {} : les répétitions.
 Exemples – début

Le motif (l’expression régulière

Motif Interprétation (correspondance avec chaînes)
abc Qui contiennent abc (au début, à la fin, n’importe où)
^abc Qui commencent par abc (après on peut avoir autre chose)
abc$ Qui se terminent par abc (peu importe devant)
^abc$ Qui contiennent exactement abc (3 caractères)
^a.c$ Qui contiennent exactement 3 caractères, le premier est a et le dernier est c.
Le caractère du milieu peut être n’importe quoi
^a.c Qui commencent par a, qui est suivi par un autre caractère (n’importe lequel)
et ce 2e caractère est lui-même suivi par la lettre c. Il peut y avoir d’autres
caractères par la suite…

^a\.c$ Pour avoir 3 caractères dans l’ordre un a, un point et un c

^\^\.$ Pour avoir 2 caractères dans l’ordre un ^ et un .
 Les classes de caractères

• Une classe permet d’énumérer plusieurs caractères pouvant faire parti du motif à une
position donnée.
• Une classe utilise [] pour définir les énumérations possibles.
• Par exemple, [abc] signifie un seul caractère parmi a, b ou c dans le motif.
• Par exemple, ^p[abc]$ correspond à pa ou pb ou pc
• Les méta-caractères changent de signification dans []:
– \ c’est encore le caractère d’échappement;
– ^ c’est la négation; (voir plus loin)
– - c’est pour définir une étendu;
– [ et ] utilisés pour encadrer les classes;
– \b signifie « backspace » si utilisé dans les [].
– Les autres méta-caractères ne veulent rien dire.
• Le . veut dire le caractère . lorsqu'utilisé dans [], même chose pour $.
 Exemples – classes

Le motif (l’expression régulière) Motif Interprétation (correspondance avec chaînes)

^[abc]$ Qui contiennent un seul caractère parmi a, b ou c.
^[a.c]$ Qui contiennent un seul caractère parmi a, . ou c.
^[a.\\]$ Qui contiennent un seul caractère parmi a, . ou \.
^[a\]]$ Qui contiennent un seul caractère parmi a ou ].
^[a-z]$ Qui contiennent un seul caractère dans l’étendu a à z.
^[a-zA-Z]$ Qui contiennent un seul caractère dans les étendus a à z ou A à Z
(minuscule ou majuscule).
^[a-z-]$ Qui contiennent un seul caractère dans l’étendu a à z ou encore le
tiret -.
^[a-z-B]$ Qui contiennent un seul caractère dans l’étendu a à z ou encore le
tiret – ou le B majuscule.
^[m-]$ Qui contiennent un seul caractère soit le m ou le tiret -.
^[aeiouy]$ Une voyelle…
 Négation – classes de caractères

• Lorsque le premier caractère d’une classe est le ^ alors on parle de

négation. C’est-à-dire tous les caractères sont permis sauf ceux
énumérés dans la classe.
• Par exemple, [^abc] signifie un seul caractère parmi tous les
caractères possibles à l’exception du a, b et c.
• Par exemple, [abc^] signifie un caractère parmi ceux énumérés soit
a, b, c ou ^. Car le ^ n’est pas le premier.
 Les groupements

• Il est possible de créer des groupements dans le motif de caractères en

utilisant les parenthèses. Parfois le terme occurrence est utilisé pour nommer
les groupements.
• Plusieurs groupements peuvent être réalisés dans le même motif. Le premier
groupement pourra être identifié en programmation en utilisant $1, le second
avec $2 et ainsi de suite.
• Par exemple, le motif ^([ab])([cd])$ permet d’identifier les chaînes qui sont
composées d’exactement deux caractères, le premier est a ou b, le second est
c ou d. Une fois la comparaison effectuée le programmeur pourra utiliser $1
qui contiendra le caractère identifié par le premier groupement (soit a ou b)
et le $2 pour le deuxième.
 Les alternatives (option)

• Il est possible d’utiliser le caractère | (barre verticale) pour

identifier une alternative dans notre motif.
• Par exemple, si nous voulons identifier deux alternatives dans notre
motif pour permettre soit .com ou .ca on pourrait utiliser
l’alternative comme ceci:
(\.com) | (\.ca)
ou bien comme ceci:
\.c(om)|(a)
• Selon vous que fait ceci: \.com|\.ca
 Les répétitions

• Pour ajouter une répétition dans notre motif on utilise le format suivant:
• {n, m} : signifie au moins n fois et au plus m fois.
• Cela permet de répéter l’élément qui le précède.
• Les deux valeurs sont optionnels, mais il faut en mettre au moins une.
– {n} : signifie exactement n fois.
– {n, } : signifie au moins n fois.
– {, m} : signifie au plus m fois.
– ? : forme abrégée de {0, 1} (optionnel).
– + : forme abrégée de { 1, } au moins une fois.
– * : forme abrégée de { 0, } 0 ou plusieurs fois.
 Les caractères spéciaux

• Certains caractères sont utilisés souvent ensemble alors des formes abrégés
ont été créés pour les identifier.
• \s : correspond aux espaces (space), espace, tab, linefeed, formfeed, etc…
• \S : négation de \s
• \w : correspond à un caractère d’un mot (word), alphanumérique, souligné,
etc…
• \W : négation de \w
• \d : un nombre (digit)
• \D : négation de \d
 Exercices

1. Créer un motif pour représenter un code postal.

2. Créer un motif pour représenter un numéro de téléphone nord-américain
(514-343-5805).
3. Créer un motif pour représenter un nom (au moins une lettre).
4. Créer un motif pour représenter une adresse postale (au moins un chiffre,
suivi d’une virgule ou d’au moins un espace, suivi d’au moins une lettre).
5. Créer un motif pour représenter un code permanent (AAAA99999999).
 Méthodes

• test() est la méthode la plus facile à utiliser: elle prend en argument une chaîne de caractères et
retourne VRAI s’il y a une correspondance.
var pattern = /ava/;
pattern. test(" Javascript"); // retourne vrai
• search() est une méthode de chaînes de caractères qui prend comme argument une expression
régulière et retourne la position de la première correspondance et -1 s’il n’y a pas de
correspondance.
"Javascript".search(/ava/) // retourne 1
• Exemple: validation d’un code postal dans un textbox
var codepostal = document.getElementById("codepostal"); if (pattern.test(codepostal.value)) {
// dans le if... il y a une correspondance (un match...) c’est valide
} else {
// ici ça veut dire qu'il n'y a pas eu de "match".....
// on affiche un message d'erreur de rejet de code postal
// on peut aussi mettre le curseur dans le textbox: codepostal.focus();
}
 Exemple sur le groupement

Exemple avec le code postal:

var pattern = /^([a-zA-Z][0-9][a-zA-Z]) ?([0-9][a-zA-Z][0-9])$/;
var codepostal = document.getElementById("codepostal");
if (pattern.test(codepostal.value)) {
// dans le if... il y a une correspondance (un match...)
// j'ai accès à RegExp.$1 et à RegExp.$2 codepostal.value = RegExp.$1 + RegExp.$2;
} else {
// ici ça veut dire qu'il n'y a pas eu de "match".....
// on affiche un message d'erreur de rejet de code postal
}
 Exemple

function valide( formulaire ) {

var pattern = /^[A-Za-z][0-9][A-Za-z] ?[0-9][A-Za-z][0-9]$/;
if (pattern.test(formulaire.code.value)) {
alert("Bravo votre code postal est valide!"); return true;
} else {
alert("Oups… votre code postal est invalide!"); formulaire.code.focus();
return false;
}
}
<form name="f" action="…" onSubmit="return valide(f);">
<input type="text" name="code">
<input type="submit" value="Valider">
</form>
 Exercice 1.

• Question????? Suite à l’exécution des codes suivants qu’est-ce que resultat contient??
var motif = /^([a-z][0-9])/;

var chaine = "a9trucriendutout09328092384098"; var resultat;

if (motif.test(chaine)) {
// dans le if... il y a une correspondance (un match...)

// j'ai accès à RegExp.$1 resultat = RegExp.$1;

} else {
// ici ça veut dire qu'il n'y a pas eu de "match".....
}
• // Qu'est-ce qu'il y a dans resultat???? ➔ a9
Exercice 2.

• Soit l’instruction suivante:

var motif = /^([a-z]) ?([0-9])$/;
• Question: comment permettre n'importe quel caractère après le chiffre???
• Réponse:
var motif = /^([a-z]) ?([0-9]).$/;
• Question: comment permettre le caractère point « . »???
• Réponse:
var motif = /^([a-z]) ?([0-9])\.$/;
• Question: comment permettre le caractère « \ »???
• Réponse:
var motif = /^([a-z]) ?([0-9])\\$/;
• Question: comment permettre le caractère « $ »???
• Réponse:
var motif = /^\$[0-9]{5}$/;
 Exemple

• Pour valider le code permanent avec le nom, prénom, sexe et date de naissance en utilisant des
textboxes (le code permanent est composé des 3 premiers caractères du nom, du premier car du
prénom, du jour de naissance, suivi du mois et de l’année:
• La première étape est d’extraire du code permanent les caractères du nom, ensuite ceux du
prénom et ainsi de suite. Il est plus simple d’utiliser une expression régulière pour faire cette
extraction:
var pattern = /^([A-Za-z]{3})([A-Za-z])([0-9][0-9])([0-9][0-9])([0-9][0-9])([0-9][0-9])$/;

var famille, prenom, jour, mois, annee; var codepermanent = "PILA01010100"; if

(pattern.test(codepermanent)) {

famille = RegExp.$1; prenom = RegExp.$2; jour = RegExp.$3; mois = RegExp.$4;

annee = RegExp.$5;
// il ne reste qu’à comparer avec les textboxes…
}