Introduction aux expressions régulières en Javascript

Introduction aux expressions régulières en Javascript

Dans ce tutoriel, nous allons voir comment fonctionne les expressions régulières (aussi appelées expressions rationnelles ou encore regex sous sa forme abrégée) en JavaScript.

C’est quoi une expression régulière?

Une  regex est une simple chaîne de caractère qui permet de décrire un ensemble de chaînes de caractères possible. Elles sont utilisées pour faire de la validation, des recherches et des remplacements dans des chaînes de caractères.

Cela donne quoi une regex en JavaScript?

Comme la plupart des langages de programmation, le JavaScript supporte l’utilisation des expressions régulières et nous fournit une API assez riche.

Il est possible de construire une regex de deux façons en JS.

Soit en utilisant un littéral d’expression régulière (entre deux barres slash):

const maRegex = /ab+c/;

Soit, sous la forme d’un objet RegExp:

const maRegex = new RegExp("ab+c");

Si vous ne connaissez pas la syntaxe des regex, vous pouvez consulter l’article pense-bête sur les regex

Note: En JavaScript, seules les regex PCRE sont supportées.

JavaScript API

L’API JavaScript permet une prise en main assez rapide, elle est simple d’utilisation.

Les Flags regex

Les expressions régulières peuvent avoir des flags qui affectent la recherche. Ils sont optionnels et seulement 6 sont disponibles en JavaScript:

FlagDescription
gRecherche globale
iRecherche insensible à la casse
mRecherche multiligne (Les caractères de début et de fin (^ et $) sont appliqués sur chaque ligne)
sLe point correspond également aux caractères de saut de ligne.
uUnicode (Les codets Unicode sont interprétés).
yLa recherche s’effectue uniquement à partir de l’indice lastIndex

Syntaxes pour utiliser les flags:

const re = /maregex/gi;
const re = new RegExp("maregex", "gi");

Comme vous pouvez le voir, on peut utiliser plusieurs flags en même temps.

RegExp.prototype.test()

La méthode test permet de vérifier si une chaîne de caractère a une correspondance avec une regex:

const chatCitation = "Les chiens ont des maîtres, les chats ont des serviteurs";
const chienCitation = "Mon chien est athée : il ne croit plus en moi.";

const contientChat = /chat/;

// Renvoie true
chatCitation.test(contientChat);

// Renvoie false
chienCitation.test(contientChat);

String.prototype.match()

La méthode match permet d’obtenir le tableau des correspondances entre la chaîne courante et une expression régulière:

const phrases = 'Je suis le plus beau. Mais je suis également un menteur.';
const regex = /[A-Z]/g;

// Affiche: ["J", "M"]
console.log(phrases.match(regex));

String.prototype.matchAll()

La méthode matchAll renvoie un itérateur contenant toutes les correspondances (y compris les groupes capturants):

const regexp = RegExp('ch[a-z]*','g');
const str = 'chat chien loup';
let matches = str.matchAll(regexp);

// Affiche [ "chat" ]  [ "chien" ]
for (const match of matches) {
  console.log(match);
}
// Affiche:
// ["chat", index: 0, input: "chat chien loup", groups: undefined]
// ["chien", index: 5, input: "chat chien loup", groups: undefined]

Comme vous pouvez le voir, il y a des propriétés supplémentaires index, input et groups au niveau du tableau retourné.

Exemple avec un group capturant:

const regexp = RegExp('ch([a-z]*)','g');
const str = 'chat chien loup';
let matches = str.matchAll(regexp);

for (const match of matches) {
  console.log(match);
}
// Affiche:
// ["chat", "at", index: 0, input: "chat chien loup", groups: undefined]
// ["chien", "ien", index: 5, input: "chat chien loup", groups: undefined]

String.prototype.search()

La méthode search  permet de faire une recherche, et retourne l’indice de la première correspondance (ou -1 si aucune correspondance):

const phrase = 'La même chose que chaque nuit, Minus : tenter de conquérir le monde !';

// any character that is not a word character or whitespace
const regex = /c[a-z]*/;

// Affiche: 8
console.log(phrase.search(regex));

// Affiche: "c"
console.log(phrase[phrase.search(regex)]);

RegExp.prototype.exec()

La méthode exec exécute une recherche, et renvoie un tableau contenant les résultats (ou null quand il n’y a plus de correspondance).

const regexp = RegExp('ch[a-z]*','g');
const str = 'chat chien loup';
let matches = str.matchAll(regexp);
let result;
while ((result = regexp.exec(str)) !== null) {
  console.log(result);
}
// Affiche:
// ["chat", index: 0, input: "chat chien loup", groups: undefined]
// ["chien", index: 5, input: "chat chien loup", groups: undefined]

Le tableau retourné contient également des propriétés supplémentaires: index, input et groups.

String.prototype.replace()

La méthode  replace renvoie une nouvelle chaîne de caractères dans laquelle les correspondances sont remplacées:

const phrase = 'Je suis le plus beau et le plus intelligent.';
const regex = /Plus/i;
// Affiche: Je suis le moins beau et le plus intelligent.
console.log(phrase.replace(regex, 'moins'));

Il est à noter que la valeur de remplacement peut être également une callback:

const phrase = 'Je suis le plus beau et le plus intelligent.';
const regex = /plus/g;

// Affiche: Je suis le PLUS beau et le PLUS intelligent.
console.log(phrase.replace(regex, function(mot) {
	return mot.toUpperCase();
}));

String.prototype.replaceAll()

La méthode  replaceAll renvoie une nouvelle chaîne de caractères dans laquelle toutes les correspondances sont remplacées:

const phrase = 'Je suis le plus beau et le plus intelligent.';
// On est obligé de mettre le flag global
const regex = /Plus/gi;
// Affiche: Je suis le moins beau et le moins intelligent.
console.log(phrase.replaceAll(regex, 'moins'));

String.prototype.split()

La méthode  split permet de diviser une chaîne de caractères selon un séparateur, et retourne un tableau de sous-chaînes:

const phrases = '2042-01-02T10:25';
const regex = /[-T:]/;

// Affiche: ["2042", "01", "02", "10", "25"]
console.log(phrases.split(regex));

Pour aller plus loin

J’espère que cette introduction te sera utile! Tu peux consulter la documentation de MDN Web Docs.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *