Utiliser les groupes de captures des RegEx avec replace() en JS

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() !