Regex JavaScript pour tester, extraire et remplacer

Les regex JavaScript comparent du texte à des motifs pour valider, extraire et remplacer du contenu. Dès qu’une entrée suit un format prévisible (dates, identifiants, codes), une expression régulière permet de tester la chaîne ou d’en récupérer les parties utiles. Les groupes de capture entre parenthèses isolent les sous-chaînes correspondantes, pour obtenir des données structurées sans découpage manuel.

Exemple de regex JavaScript pour extraire un motif

Sortie :

Contient une date : true
Extrait : 2024/03/15
Remplacé : Commande #A-123 expédiée le 2024/03/15

Comment cet exemple fonctionne

1. /(\d{4})-(\d{2})-(\d{2})/ définit une regex littérale qui correspond à une date de type ISO. \d{4} correspond à exactement quatre chiffres ; les parenthèses créent des groupes de capture pour l’année, le mois et le jour.
2. motifDate.test(texte) renvoie true si le motif correspond quelque part dans la chaîne, sans renvoyer les détails de correspondance.
3. texte.match(motifDate) renvoie un tableau : la correspondance complète à l’index 0, puis chaque groupe de capture. S’il n’y a pas de correspondance, la méthode renvoie null, donc ajoutez une garde avant le destructuring pour traiter les entrées utilisateur.
4. texte.replace(motifDate, "$1/$2/$3") remplace la sous-chaîne trouvée. $1, $2 et $3 injectent les groupes de capture (année, mois, jour).

Qu’est-ce qu’une expression régulière JavaScript ?

Une expression régulière JavaScript est un objet RegExp (souvent appelé regexp JavaScript) utilisé pour faire correspondre des combinaisons de caractères dans des chaînes. Créez des expressions régulières JavaScript avec un littéral (/motif/drapeaux) ou le constructeur RegExp (new RegExp("motif", "drapeaux")). Le moteur parcourt la chaîne de gauche à droite et renvoie la première correspondance, sauf si le drapeau global (g) est activé.

Erreurs courantes avec les regex JavaScript

Utiliser une regex globale avec test ou exec.

const re = /\d+/g;
console.log(re.test("abc 123")); // true
console.log(re.test("abc 123")); // false (`lastIndex` a avancé)
re.lastIndex = 0;
console.log(re.test("abc 123")); // true

Avec g ou y, test/exec sont stateful via lastIndex. Réinitialisez cette valeur, ou évitez g pour des vérifications booléennes.

Oublier le double échappement dans new RegExp().

new RegExp("\d+");  // le motif devient "d+"
new RegExp("\\d+"); // un ou plusieurs chiffres

Dans un littéral de chaîne, \\ produit un seul antislash, donc le moteur regex reçoit \d au lieu de d.

Littéral regex vs constructeur RegExp

Utilisez un littéral pour les motifs statiques. Utilisez le constructeur quand le motif inclut des valeurs dynamiques, mais échappez d’abord les entrées utilisateur pour éviter l’injection regex et les métacaractères accidentels.

const echapperRegExp = (valeur) => valeur.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const re = new RegExp(echapperRegExp("a+b?"), "i");

Plus d’exemples

Remplacer toutes les occurrences avec replaceAll :

const masquee = "carte 4111-1111-1111-1111".replaceAll(/\d{4}/g, "****");
console.log(masquee); // "carte ****-****-****-****"

replaceAll exige le drapeau g quand l’argument de recherche est une regex ; sans g, un TypeError est levé.

Extraire toutes les correspondances avec matchAll :

const tags = [...("#js #regex #es2022".matchAll(/#(\w+)/g))];
console.log(tags.map((m) => m[1])); // ["js", "regex", "es2022"]

matchAll renvoie un itérateur de tableaux de correspondance, chacun contenant les groupes de capture. En l’étendant dans un tableau, vous accédez à tous les résultats.

FAQ

Comment tester une regex en JavaScript ?

Appelez regex.test(chaine) pour obtenir un booléen, ou chaine.match(regex) pour récupérer les détails de correspondance. Pour plusieurs correspondances, utilisez chaine.matchAll(regex) avec le drapeau g, qui renvoie un itérateur de tous les tableaux de résultats, groupes de capture inclus.

JavaScript prend-il en charge les assertions lookbehind ?

Oui. Le lookbehind positif (?<=...) et négatif (?<!...) fonctionne dans la plupart des moteurs JavaScript modernes, mais les anciens navigateurs et certains runtimes embarqués peuvent lever une erreur de syntaxe.

Quand utiliser new RegExp() plutôt qu’un littéral ?

Utilisez le constructeur RegExp quand le motif n’est pas connu à l’écriture, par exemple pour rechercher des termes fournis par l’utilisateur. Dans tous les autres cas, préférez un littéral : pas de double échappement, et les erreurs de syntaxe sont détectées à l’analyse plutôt qu’à l’exécution.