Une expression régulière permet de détecter un "pattern" dans une chaîne de caractère, pour l'extraire du texte avec la méthode RegEx.exec(...), ou bien de remplacer le contenu grâce à la méthode String.replace(...)

Mais ce que l'on ne sait pas toujours, c'est qu'en utilisant une expression régulière avec String.replace(...), il est possible de réinjecter une partie des données trouvées avec l'expression régulière, dans le résultat final.

Les groupes de captures

Prenons une expression régulière très simple, pour séparer les deux parties d'une adresse e-mail :

const exp = /(.*)@(.*)/gm;

Evidemment, c'est à titre d'exemple, elle est trop simple pour réellement détecter une adresse email dans un texte.

Les parties de cette expression qui se trouvent entre des parenthèses s'appellent des "groupes de captures". Cela signifie qu'ils seront détectés lors de l'utilisation de la RegEx, et qu'ils seront retournés dans le résultat :

const exp = /(.*)@(.*)/gm;
exp.exec(email);

/*
[
  'code@example.com',
  'code',
  'example.com',
  ...
]
*/

Le premier élément du tableau représente la chaine totale, et les éléments suivants représentent les groupes capturés (ici "code" et "example.com").

Mais voyons maintenant comment les réutiliser avec String.replace(...)

Utilisation avec replace()

Pour injecter les groupes de captures dans le résultat d'un remplacement de chaîne de caractères, il suffira d'utiliser le caractère "$" suivi de l'index du groupe. Donc :

• $1 correspondra à "code"
• $2 correspondra à "example.com"

Avec notre code d'exemple, cela donne ceci :

const exp = /(.*)@(.*)/gm;
const email = "code@example.com";
const result = email.replace(exp, "$1[at]$2");

console.log(result); // code[at]example.com

Et voilà, vous savez désormais combiner l'utilisation des groupes de captures d'une expression régulière, avec la méthode replace() !

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi formateur/coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !

Photo de Jason Leung sur Unsplash