Les expressions régulières en JavaScript
Une expression régulière (ou regex) est une suite de caractères que l'on peut utiliser pour cibler et 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
💡 La syntaxe des expressions régulières de JavaScript fait partie de la norme ECMA-262 pour le langage. Cela signifie que tu n'as pas à te soucier de la compatibilité propre à chaque navigateur.
En JavaScript, une expression régulière s'écrit le plus souvent sous la forme /pattern/modifiers.
On peut créer une expression régulière de deux façons :
-
Littéral d'expression régulière :
const regex = /[a-z]/;
- 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 des motifs immuables avec le littéral par défaut.
Le constructeur RegExp peut être utilisé dans les cas où l'expression régulière va changer ou n'est pas encore connue (comme une saisie).
🏴☠️ Drapeaux
Les expressions régulières ont des superpouvoirs optionnels appelés flags qui permettent des fonctionnalités supplémentaires.
Voici quelques-uns des plus couramment 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.';
const myArray = str.match(re);
console.log(myArray);
=> // ["Home", "home"]
Le caractère g permet de trouver toutes les correspondances possibles dans une string. Sans cette fonctionnalité, JavaScript n'aurait extrait que la première correspondance Home.
Le drapeau d'insensibilité à la casse /i permet d'être flexible lorsqu'il s'agit de trouver un motif. Ainsi, peu importe si ce que l'on recherche est en UPPERCASE ou en lowercase.
Lorsque l'on utilise le constructeur RegExp, la syntaxe pour ajouter des drapeaux est différente.
let regex = /[a-z]/gi; // literal notation
let regex = new RegExp('[a-z]', 'gi'); // constructor with string pattern as first argument
let regex = new RegExp(/[a-z]/, 'gi'); // constructor with regular expression literal as first argument (Starting with ECMAScript 6)
Les fonctions les plus courantes
Lorsque l'on combine les expressions régulières avec les fonctions natives actuelles de JavaScript, on dispose de moyens puissants pour manipuler et extraire des données à partir de strings.
Voici quelques-unes des fonctions les plus courantes utilisées avec les expressions régulières.
Test
La méthode test() exécute une recherche de correspondance entre une expression régulière et une string spécifiée. 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
Correspondance
Avec la méthode match(), on obtient 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: 11, 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 d'obtenir seulement la correspondance avec des informations utiles comme l'indice ou l'entrée, la méthode renvoie toutes les occurrences affichées 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() en JavaScript permet de rechercher une valeur dans une string donnée et de la remplacer par une nouvelle valeur souhaitée.
string.replace(searchValue, newValue);
Le motif de recherche de 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 sur la position 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"
Découpe
La méthode split() en JavaScript représente une autre façon d'utiliser et de manipuler des strings avec des expressions régulières.
Ainsi, on utilise une expression régulière pour diviser une string donnée en reconnaissant un motif, par exemple str.split(/[,.\s]/). Ce motif sera utilisé comme separator.
const str = 'hello,user.how are.you';
const result = str.split(/[,.\s]/);
console.log(result);
// => ['hello', 'user', 'how', 'are', 'you']
Exercice d'apprentissage
