Regex JavaScript

Introduction aux expressions régulières (Regex) en JavaScript

Les expressions régulières, communément appelées regex, sont des séquences de caractères qui forment des motifs de recherche. Elles constituent des outils indispensables en programmation pour les tâches de traitement de texte telles que la recherche, l'édition et la manipulation de données de type string. La regex est utilisée dans de nombreux domaines comme la validation de données, l'analyse syntaxique, la coloration syntaxique et bien plus encore.

Par exemple, vous pouvez vérifier rapidement si une string ressemble à une adresse e-mail :

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(emailRegex.test("[email protected]")); // true
console.log(emailRegex.test("not-an-email"));    // false

Remarque : il s'agit d'un motif simplifié. Pour la validation en production, envisagez des règles plus strictes ou des bibliothèques dédiées.

Où la regex est utilisée :

• Développement web : validation des saisies de formulaire, analyse des URL et recherche dans le contenu.
• Analyse de données : extraction de motifs spécifiques à partir de grands ensembles de données.
• Édition de texte : recherche et remplacement de texte dans des documents ou des bases de code.
• Langages de programmation : la plupart des langages modernes, dont JavaScript, prennent en charge la regex.

Créer une expression régulière

JavaScript offre deux façons de créer une regex, et la différence est importante en pratique.

// 1. Literal syntax — compiled once when the script loads.
const re1 = /\d+/g;

// 2. Constructor — useful when the pattern is built from a variable.
const word = "cat";
const re2 = new RegExp(word + "s?", "i"); // matches "cat" or "cats", case-insensitive

console.log(re1 instanceof RegExp); // true
console.log(re2.source, re2.flags); // cats? i

Utilisez la forme littérale pour les motifs fixes — elle est plus courte et le moteur la compile à l'avance. Recourez au constructeur RegExp lorsque le motif est dynamique (par exemple, construit à partir d'une saisie utilisateur). N'oubliez pas que dans une string vous devez doubler l'antislash : "\\d" dans un constructeur est équivalent à \d dans un littéral.

Comment la regex interagit avec les strings : les méthodes essentielles

Un motif n'est utile qu'associé à une méthode qui l'exécute. Voici celles que vous utiliserez au quotidien.

const text = "The year 2023 follows 2022.";

// test() → boolean: "does it match anywhere?"
console.log(/\d{4}/.test(text)); // true

// String.match() with /g → array of all matches
console.log(text.match(/\d{4}/g)); // [ '2023', '2022' ]

// String.replace() → returns a new string
console.log(text.replace(/\d{4}/g, "YEAR")); // The year YEAR follows YEAR.

// RegExp.exec() → one match at a time, with capture groups
console.log(/(\d{4})/.exec(text)[1]); // 2023

// String.matchAll() → iterator of full match objects (needs /g)
for (const m of text.matchAll(/(\d{4})/g)) {
  console.log(m[0], "at index", m.index);
}
// 2023 at index 9
// 2022 at index 22

Choisissez la méthode selon votre intention : test() pour un contrôle oui/non, match()/matchAll() pour extraire des données, et replace() pour réécrire du texte. Le drapeau g (global) est ce qui transforme « la première correspondance » en « toutes les correspondances », il est donc indispensable pour match, matchAll et les opérations de remplacement global.

Déchiffrer un motif : les briques de base

La plupart des motifs sont assemblés à partir d'un petit vocabulaire. Voici un exemple fonctionnel qui utilise plusieurs éléments à la fois :

const log = "2023-06-19 ERROR user=42 path=/login";

// \d  digit      \w  word char     \s  whitespace
// .   any char   +   1 or more     [] a set of chars
const match = log.match(/(\d{4}-\d{2}-\d{2})\s+(\w+)\s+user=(\d+)/);

console.log(match[1]); // 2023-06-19  (the date group)
console.log(match[2]); // ERROR       (the level group)
console.log(match[3]); // 42          (the user id group)

Chaque (...) est un groupe capturant dont le texte apparaît dans le tableau de résultats. \d, \w et \s sont des classes de caractères ; les quantificateurs + et {4} indiquent combien de fois répéter le jeton précédent. En les combinant, vous pouvez extraire des données structurées à partir de texte brut.

Référence rapide : drapeaux et quantificateurs

Pièges courants

Quelques surprises se retrouvent chez presque tous ceux qui apprennent la regex en JavaScript :

• Une regex /g mémorise là où elle s'est arrêtée. Lorsque vous réutilisez le même objet RegExp avec test() ou exec(), il fait avancer lastIndex entre les appels, si bien que le deuxième test() peut retourner false sur une string qui correspond clairement. Utilisez un nouveau littéral à chaque fois, ou réinitialisez re.lastIndex = 0.

  const re = /a/g;
  const s = "a";
  console.log(re.test(s)); // true
  console.log(re.test(s)); // false — lastIndex moved past the end

  Copier

• Les motifs dynamiques doivent échapper la saisie utilisateur. Si vous construisez une regex à partir d'un texte saisi par l'utilisateur, des caractères comme . ou ( sont traités comme des caractères spéciaux. Échappez-les d'abord :

  const escape = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  const userInput = "a.b";
  const re = new RegExp(escape(userInput));
  console.log(re.test("axb"));  // false — the dot is now literal
  console.log(re.test("a.b"));  // true

  Copier

• Gourmand par défaut. .+ capture autant que possible ; ajoutez ? pour le rendre paresseux (.+?). Voir Quantificateurs gourmands et paresseux.

Feuille de route d'apprentissage

Cette page est la porte d'entrée vers la partie regex du cours. Parcourez les chapitres suivants dans l'ordre pour une compréhension complète et pratique :

1. Motifs et drapeaux — construction des motifs et effet des drapeaux (i, g, m, s, u, y) sur les correspondances.
2. Classes de caractères — \d, \w, \s et leurs négations.
3. Unicode : drapeau u et classe \p{...} — gestion du texte multilingue et des emojis.
4. Ancres : début ^ et fin $ de string — correspondance aux limites.
5. Mode multiligne des ancres, drapeau m — faire correspondre ^ et $ à chaque ligne.
6. Limite de mot \b — correspondance de mots entiers.
7. Échappement des caractères spéciaux — utiliser ., (, ? littéralement.
8. Ensembles et plages [...] — ensembles de caractères personnalisés.
9. Quantificateurs +, *, ?, {n} — spécifier la répétition.
10. Quantificateurs gourmands et paresseux — contrôler la quantité de texte capturée.
11. Groupes capturants — extraire et nommer des parties d'une correspondance.
12. Rétro-références \n et \k<name> — réutilisation du texte capturé.
13. Alternance (OU) | — correspondre à l'une de plusieurs options.
14. Assertions avant et arrière — assertions de largeur nulle.
15. Retour arrière catastrophique — diagnostiquer et éviter les performances pathologiques.
16. Drapeau collant y, recherche à une position — correspondance ancrée basée sur la position.

Pour les méthodes qui exécutent ces motifs, consultez l'objet RegExp et ses méthodes ainsi que le chapitre sur les strings JavaScript.

À la fin de ces leçons, vous serez capable de concevoir des motifs regex efficaces pour rechercher, valider et transformer du texte en JavaScript.