Expressions régulières en

À propos de Expressions régulières

Les expressions régulières en JavaScript

Une expression régulière (ou regex) est une suite de caractères qui permet de cibler et de manipuler certains éléments dans des strings. On peut donc :

• Rechercher un texte dans une string ;
• Remplacer des sous-chaînes dans une string ;
• Extraire des informations d'une string.

Ce concept porte sur l'utilisation des expressions régulières en JavaScript. Si tu veux apprendre à écrire des expressions régulières, Eloquent JavaScript est une bonne ressource.

💡 La variante des expressions régulières propre à JavaScript fait partie du standard ECMA-262 du langage. Cela signifie que tu n'as pas à te soucier de la compatibilité propre à chaque navigateur.

Comment créer des expressions régulières

En JavaScript, les expressions régulières s'écrivent le plus souvent au format /pattern/modifiers, où « pattern » désigne l'expression régulière principale et « modifiers » une série de caractères que l'on peut ajouter pour indiquer des options spéciales (comme des superpouvoirs).

Il existe néanmoins deux façons de créer une expression régulière :

1. Littéral d'expression régulière :

const regex = /[a-z]/;

1. Le constructeur RegExp :

const regex = new RegExp('[a-z]');

Dans les deux cas, JavaScript crée un objet à partir de l'expression régulière. Il est recommandé d'utiliser par défaut des motifs immuables avec le littéral.

Le constructeur RegExp peut servir dans les cas où l'expression régulière va changer ou n'est pas encore connue (comme une entrée).

🏴‍☠️ Les drapeaux

Les expressions régulières ont des superpouvoirs optionnels appelés flags, qui permettent d'ajouter des fonctionnalités. Ces drapeaux peuvent être utilisés séparément ou ensemble, dans n'importe quel ordre, et font partie intégrante de l'expression régulière.

Voici quelques-uns des plus utilisés :

• /g - Recherche globale
• /i - Insensible à la casse
• /m - Recherche multiligne

Voici un exemple simple :

const re = /home/gi;
const str = 'Home, sweet home.';

str.match(re);

// => ["Home", "home"]

Le caractère g permet de repérer toutes les correspondances possibles dans une string. Sans ce drapeau, JavaScript n'aurait extrait que la première correspondance Home.

Le drapeau d'insensibilité à la casse /i offre plus de souplesse pour rechercher un motif. Peu importe alors que ce que l'on cherche soit en UPPERCASE ou en lowercase.

Lorsqu'on utilise le constructeur RegExp, la syntaxe pour ajouter des drapeaux est différente : il suffit dans ce cas de passer les drapeaux en deuxième argument.

Les fonctions couramment utilisées

Lorsqu'on combine les expressions régulières avec les fonctions natives de JavaScript, on dispose de moyens puissants pour manipuler des strings et en extraire des données.

La méthode test() est un excellent moyen de rechercher une valeur cible et de savoir si elle existe dans une string donnée. Elle renvoie ainsi une valeur booléenne, true ou false.

La méthode match() extrait la correspondance de l'expression régulière d'une string donnée. Elle renvoie un tableau contenant des informations et les correspondances.

Quand utiliser l'une plutôt que l'autre ? Utilise test() si tu veux vérifier rapidement la présence d'une valeur dans une string, et match() si tu as besoin de cette valeur ou si tu veux plus d'informations sur la correspondance.

Test

La méthode test() recherche une correspondance entre une expression régulière et une string donnée. Elle renvoie vrai ou faux.

const str = 'It is difficult to test if you have a virus';
const result = /virus$/.test(str);

console.log(result);

// => true

Match

Mais alors, comment obtenir les valeurs réelles renvoyées par la recherche de l'expression régulière ?

Plutôt que de renvoyer simplement un booléen, la méthode match() nous donne un tableau utile dont le contenu dépend de la présence ou de l'absence des correspondances trouvées.

Ainsi, on peut à la fois rechercher et extraire des informations de n'importe quelle string. Par exemple :

const funnyQuote =
  'If you see someone crying, ask if it is because of their haircut.';
const regex1 = /someone/;
const regex2 = /happy/;

funnyQuote.match(regex1);
// => ["someone", index: 3, input: "If you see someone crying, ask if it is because of their haircut.", groups: undefined]

funnyQuote.match(regex2);
// => null

Lorsque le drapeau de recherche globale /g est présent, au lieu de renvoyer une seule correspondance accompagnée d'informations utiles comme l'indice ou l'entrée, la méthode renvoie toutes les occurrences présentes dans le tableau :

const funnyQuote =
  'If you see someone crying, ask if it is because of their haircut.';

const regex3 = /if/gi;

funnyQuote.match(regex3);
// => ["If", "if"];

Remplace

La méthode replace() de JavaScript permet de rechercher une valeur dans une string donnée et de la remplacer par une nouvelle valeur.

string.replace(searchValue, newValue);

Le motif utilisé pour effectuer la substitution peut être une simple string ou une expression régulière.

let string = 'I like dogs!';
let result = string.replace('dogs', 'cats');

let string = 'I would love to travel to Japan';
let result = string.replace(/Japan/g, 'Hawaii');

De plus, on peut appliquer une fonction à la place de la valeur de remplacement afin d'apporter des modifications supplémentaires à chaque valeur.

let text = 'Say hello to the chatbot.';
let result = text.replace(/chatbot|hello/gi, function (word) {
  return word.toUpperCase();
});
// => "Say HELLO to the CHATBOT"

💡 Au final, la combinaison des expressions régulières et de la méthode replace() est une façon plus dynamique de remplacer des éléments. Utiliser une simple string peut se révéler limité.

Découpe

La méthode split() de JavaScript offre une autre façon d'utiliser et de manipuler les strings avec des expressions régulières.

Ainsi, on utilise une expression régulière pour découper une string donnée en reconnaissant un motif, par exemple str.split(/[,.\s]/). Ce motif sert de separator.

const str = 'hello,user.how are.you';

const result = str.split(/[,.\s]/);

console.log(result);
// => ['hello', 'user', 'how', 'are', 'you']

Performance

Côté performances, les deux créent un objet RegExp. La principale différence réside dans la fréquence à laquelle l'expression régulière est compilée :

• Avec Regular Expression Literal : une seule fois, lors de l'analyse et de la compilation initiales du code
• Avec la syntaxe RegExp() : à chaque fois qu'un nouvel objet est créé.

Utiliser la syntaxe littérale peut être un meilleur choix, non seulement pour des raisons de performance, mais aussi de simplicité et de lisibilité. Pour plus de détails, voir cette discussion Stack Overflow.

1. C'est plus court et cela ne t'oblige pas à raisonner en termes de constructeurs de type classe.
2. Avec le constructeur RegExp(), il faut aussi échapper les guillemets et doubler l'échappement des antislashs. Cela rend encore plus difficiles à lire et à comprendre des expressions régulières déjà difficiles par nature.