Tutoriel sur les expressions régulières JavaScript (Syntaxe complète + Exemples courants)

> Cet article est un tutoriel complet sur les expressions régulières JavaScript (RegExp), de l’introduction au niveau avancé. Il comprend les règles de syntaxe, les métacaractères courants, les drapeaux (flags), les assertions, les groupes, le matching gourmand (greedy) vs. paresseux (lazy), et est applicable au développement front-end, au web scraping, à la validation de formulaires et à d’autres scénarios. Il convient aux utilisateurs débutants et avancés pour l’apprentissage et la référence.

Syntaxe de base des expressions régulières

Deux façons de créer une expression régulière

const regex1 = /abc/;             // Manière littérale
const regex2 = new RegExp('abc'); // Manière constructeur

Drapeaux courants (Flags)

Drapeau	Description
g	Correspondance globale
i	Correspondance insensible à la casse
m	Correspondance multiligne
s	Permet à . de correspondre aux sauts de ligne (ES2018)
u	Prend en charge Unicode (ES6)
y	Correspondance “collante” (ES6)

Exemple :

const re = /hello/gi;
const str = 'Hello hello';
console.log(str.match(re)); // ["Hello", "hello"]

---

Métacaractères et jeux de caractères

Métacaractères courants

Caractère	Signification
.	Correspond à n’importe quel caractère (sauf saut de ligne)
\d	Correspond à un chiffre [0-9]
\D	Correspond à un caractère non numérique
\w	Correspond à un caractère de mot (alphanumérique + underscore)
\W	Correspond à un caractère non de mot
\s	Correspond à un caractère d’espacement
\S	Correspond à un caractère non d’espacement
\b	Correspond à une frontière de mot
\B	Correspond à une non-frontière de mot
\\	Correspond à un antislash

Jeux de caractères et intervalles

/[abc]/     // Correspond à 'a' ou 'b' ou 'c'
/[a-z]/     // Correspond aux lettres minuscules
/[A-Z]/     // Correspond aux lettres majuscules
/[0-9]/     // Correspond aux chiffres
/[^abc]/    // Correspond à n'importe quel caractère sauf a, b ou c

---

Quantificateurs (Répétition)

Quantificateur	Signification
*	Correspond à l’élément précédent 0 fois ou plus
+	Correspond à l’élément précédent 1 fois ou plus
?	Correspond à l’élément précédent 0 ou 1 fois
{n}	Correspond exactement n fois
{n,}	Correspond au moins n fois
{n,m}	Correspond au moins n fois, au plus m fois

Exemple :

/\d{4}/.test("2025");       // true
/ab{2,4}c/.test("abbbc");   // true

---

Groupement et capture

/(abc)/         // Groupe capturant
/(abc){2}/      // Groupe capturant répété
/(?:abc)/       // Groupe non capturant
/(a)(b)(c)/     // Plusieurs groupes capturants

Extraction des correspondances :

const match = /(hello) (\w+)/.exec("hello world");
console.log(match[1]); // hello
console.log(match[2]); // world

---

Assertions (Assertions de largeur nulle)

Lookahead positif

/\d+(?=px)/     // Correspond aux chiffres suivis de px

Lookahead négatif

/\d+(?!px)/     // Correspond aux chiffres non suivis de px

Lookbehind (ES2018+)

/(?<=\$)\d+/    // Correspond aux chiffres précédés de $
/(?<!$)\d+/    // Correspond aux chiffres non précédés de $

---

Matching gourmand vs. paresseux

Expression	Comportement de correspondance
.*	Gourmand (autant que possible)
.*?	Paresseux (aussi peu que possible)

Exemple :

const str = '<p>text</p><p>more</p>';
const greedy = /<p>.*<\/p>/;
const lazy = /<p>.*?<\/p>/g;

console.log(str.match(greedy)); // ['<p>text</p><p>more</p>']
console.log(str.match(lazy));   // ['<p>text</p>', '<p>more</p>']

---

Exemples de cas d’utilisation courants

Validation d’e-mail

/^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/.test("[email protected]");

Validation de numéro de mobile (Chine continentale)

/^1[3-9]\d{9}$/.test("13888888888");

Supprimer tous les espaces blancs

const cleaned = str.replace(/\s+/g, '');

Extraire le domaine d’une URL

const domain = url.match(/https?:\/\/([^\/]+)/)[1];

---

Résumé des méthodes Regex

Méthode	Description
test(str)	Teste si la chaîne correspond
exec(str)	Renvoie l’objet de résultat de correspondance (avec groupes)
str.match(re)	Renvoie toutes les correspondances (avec drapeau global)
str.replace()	Remplace le contenu correspondant
str.split(re)	Divise la chaîne à l’aide de regex
str.search(re)	Renvoie l’index de la première correspondance

---

Conclusion

Ce tutoriel fournit un aperçu systématique de la syntaxe des expressions régulières JavaScript et des exemples d’application pratiques, adaptés au développement front-end, au développement back-end, au traitement de texte et à divers autres cas d’utilisation. Maîtriser les expressions régulières peut grandement améliorer l’efficacité du traitement des chaînes de caractères.