Modèles et drapeaux des expressions régulières JavaScript

Introduction aux modèles et drapeaux JavaScript

Les expressions régulières (regex) sont des outils essentiels en JavaScript pour la recherche de motifs et la validation de données. Une regex se compose de deux parties : un modèle (ce que l'on recherche) et des drapeaux optionnels (comment effectuer la recherche). Ce guide explique comment créer une regex, détaille chaque jeton de modèle et chaque drapeau, ainsi que les méthodes string/regex qui les mettent en œuvre. Pour une vue d'ensemble plus large, consultez le chapitre JavaScript RegExp.

Créer une expression régulière

JavaScript vous offre deux façons de construire une expression régulière.

1. Littéral regex — écrit entre barres obliques, avec les drapeaux après la barre oblique fermante. Le moteur le compile une seule fois au chargement du script, ce qui en fait la forme la plus rapide et la plus courante :

2. Le constructeur new RegExp() — prend le modèle sous forme de string et les drapeaux comme second argument string. Utilisez-le lorsque le modèle est construit à l'exécution (par exemple à partir d'une saisie utilisateur), car un littéral ne peut pas contenir de variables.

Liste des modèles courants

Voici quelques modèles fréquemment utilisés :

• \w : Correspond à tout caractère de mot (caractère alphanumérique plus tiret bas). Équivalent à [a-zA-Z0-9_].
• \W : Correspond à tout caractère qui n'est pas un caractère de mot. Équivalent à [^a-zA-Z0-9_].
• \d : Correspond à tout chiffre. Équivalent à [0-9].
• \D : Correspond à tout caractère qui n'est pas un chiffre. Équivalent à [^0-9].
• \s : Correspond à tout caractère d'espacement (espaces, tabulations, sauts de ligne).
• \S : Correspond à tout caractère qui n'est pas un espace. Équivalent à [^\s].
• . : Correspond à tout caractère sauf le saut de ligne (\n).
• ^ : Indique la position au début d'une ligne.
• $ : Indique la position à la fin d'une ligne.
• \b : Correspond à une frontière de mot (position entre un caractère de mot et un caractère non-mot).
• \B : Correspond à une position qui n'est pas une frontière de mot.
• \t : Correspond à un caractère de tabulation.
• \n : Correspond à un caractère de saut de ligne.
• \r : Correspond à un caractère de retour chariot.
• \\ : Correspond à une barre oblique inverse littérale.
• \f : Correspond à un caractère de saut de page.
• \v : Correspond à une tabulation verticale.
• [abc] : Correspond à tout caractère unique dans les crochets.
• [^abc] : Correspond à tout caractère unique qui n'est pas dans les crochets.
• a|b : Correspond à a ou b.
• (abc) : Correspond à la séquence exacte abc.
• a? : Correspond à a zéro ou une fois.
• a* : Correspond à a zéro ou plusieurs fois.
• a+ : Correspond à a une ou plusieurs fois.
• a{3} : Correspond exactement à 3 occurrences de a.
• a{3,} : Correspond à 3 occurrences ou plus de a.
• a{3,5} : Correspond à 3 à 5 occurrences de a.
• (?i) : Non pris en charge en JavaScript. Utilisez le drapeau i à la place.
• (?:...) : Groupe non-capturant.
• (?=...) : Assertion de anticipation positive.
• (?!...) : Assertion de anticipation négative.
• (?<=...) : Assertion de rétroregard positive.
• (?<!...) : Assertion de rétroregard négative.

Comprendre les modèles

Le modèle regex est délimité par des barres obliques (/modèle/drapeaux).

Exemple : /H.llo/g

• Modèle : H.llo correspond à toute string commençant par 'H', suivie de n'importe quel caractère unique (.), et se terminant par 'llo'.
• Drapeau : g indique une recherche globale.
• Quantificateur : . correspond exactement à un caractère.

Les modèles dans les expressions régulières servent à définir la string que vous recherchez. Ces modèles peuvent inclure divers caractères, classes de caractères et symboles spéciaux.

Voici quelques exemples :

Exemple 1 :

1. Modèle : \d+ correspond à un ou plusieurs chiffres (\d+).
2. Drapeau : g indique une recherche globale.
3. Quantificateur : + correspond à une ou plusieurs occurrences de l'élément précédent (\d).

Exemple 2 :

1. Modèle : \D+ correspond à un ou plusieurs caractères non-numériques (\D+).
2. Drapeau : g indique une recherche globale.
3. Quantificateur : + correspond à une ou plusieurs occurrences de l'élément précédent (\D).

Quantificateurs

Les quantificateurs définissent combien d'instances d'un caractère, d'un groupe ou d'une classe de caractères doivent être présentes dans l'entrée pour qu'une correspondance soit trouvée. Voici quelques quantificateurs couramment utilisés avec des exemples :

• + - Correspond à une ou plusieurs occurrences de l'élément précédent.

Ce modèle correspond à des séquences d'un ou plusieurs chiffres.

• * - Correspond à zéro ou plusieurs occurrences de l'élément précédent.

Ce modèle correspond à des séquences de zéro ou plusieurs caractères de mot.

• ? - Correspond à zéro ou une occurrence de l'élément précédent.

Ce modèle correspond à 'color' ou 'colour'.

• {n} - Correspond exactement à n occurrences de l'élément précédent.

Ce modèle correspond exactement à trois chiffres.

• {n,} - Correspond à n occurrences ou plus de l'élément précédent.

Ce modèle correspond à des séquences de deux chiffres ou plus.

• {n,m} - Correspond entre n et m occurrences de l'élément précédent.

Ce modèle correspond à des séquences de deux à trois chiffres.

Drapeaux

Les drapeaux sont des paramètres optionnels qui modifient la façon dont le modèle est appliqué. Vous pouvez les combiner dans n'importe quel ordre (par exemple /abc/gi). Voici la liste complète :

Drapeau	Nom	Effet
g	Global	Trouve toutes les correspondances, pas seulement la première.
i	Insensible à la casse	Correspond indépendamment des majuscules/minuscules.
m	Multiligne	^ et $ correspondent au début/fin de chaque ligne.
s	DotAll	. correspond également aux caractères de saut de ligne.
u	Unicode	Traite le modèle comme des points de code Unicode ; active \u{...} et \p{...}.
y	Sticky	Ne correspond qu'à la position exacte lastIndex.
d	Indices	Ajoute indices (positions de début/fin) aux résultats des correspondances.

Les sections ci-dessous illustrent chaque drapeau :

• g - Recherche globale.

Ce drapeau permet de trouver toutes les correspondances dans la string.

• i - Recherche insensible à la casse.

Ce drapeau rend la recherche insensible à la casse.

• m - Recherche multiligne.

Ce drapeau permet à ^ et $ de correspondre au début et à la fin de chaque ligne de la string.

• s - Permet à . de correspondre aux caractères de saut de ligne (également connu sous le nom de drapeau dotAll).

Ce drapeau permet au point . de correspondre également aux caractères de saut de ligne.

• u - « Unicode » ; traite le modèle comme une séquence de points de code Unicode.

Ce drapeau active la correspondance Unicode complète.

• y - « Sticky » ; ne correspond qu'à partir de l'index indiqué par la propriété lastIndex de cette expression régulière dans la string cible.

Ce drapeau permet de démarrer la recherche à un index spécifique dans la string. Le drapeau sticky est utile pour les analyseurs lexicaux et syntaxiques qui parcourent une string position par position — consultez Le drapeau Sticky « y », recherche à une position pour un examen approfondi.

Tester des modèles : regexp.test()

La méthode test() vérifie si un modèle existe dans une string, renvoyant true ou false.

Ce code vérifie la présence de "world" dans la string.

Remplacer du texte : str.replace()

La fonction replace() vous permet de modifier des strings en remplaçant certaines parties par un nouveau texte.

Ce code remplace "morning" par "evening".

Remplacer toutes les occurrences : str.replaceAll()

La méthode replaceAll() remplace toutes les occurrences d'un modèle par une nouvelle string.

Ce code remplace chaque "a" par "o".

Diviser du texte : str.split()

La méthode split() divise une string en un array de sous-strings en fonction d'un modèle.

Ce code divise la string à chaque virgule.

Rechercher dans du texte : str.match()

La méthode match() récupère les correspondances d'un modèle dans une string, utile pour extraire des données spécifiques.

Ce code trouve tous les nombres dans le texte.

Parcourir les correspondances : regexp.exec()

La méthode exec() renvoie une correspondance à la fois. Avec le drapeau g (ou y), la regex mémorise sa position dans lastIndex, de sorte qu'appeler exec() dans une boucle parcourt chaque correspondance — et contrairement à match() avec g, chaque résultat inclut toujours l'index de la correspondance et les groupes capturants.

Itérer sur les correspondances : str.matchAll()

matchAll() est l'alternative moderne et plus propre à une boucle exec(). Elle renvoie un itérateur d'objets de correspondance complets (incluant les groupes capturants) et nécessite le drapeau g.

Groupes capturants

Les parenthèses (...) créent un groupe capturant, exposant une partie d'une correspondance pour la réutiliser. Les groupes peuvent également être nommés avec (?<nom>...) et lus depuis l'object .groups — bien plus lisible que les index numériques.

Syntaxe des regex en JavaScript

Les expressions régulières utilisent des caractères spéciaux pour définir des modèles. Voici un exemple détaillé utilisant plusieurs éléments de la syntaxe regex :

Ce modèle regex décompose une URL en ses composants :

• ^(\w+) : Correspond à tout caractère de mot (équivalent à [a-zA-Z0-9_]) au début, représentant le protocole.
• :\/\/ : Correspond littéralement à "://".
• ([\w.-]+) : Correspond à un ou plusieurs caractères de mot, points ou tirets, représentant le domaine.
• \/(\S*)$ : Correspond à une barre oblique suivie de tout caractère non-espace jusqu'à la fin, représentant le chemin.

Plus de détails :

Ce code JavaScript vérifie si une adresse web correspond à un modèle détaillé.

• Mise en place du modèle : Le modèle est structuré pour capturer différents composants d'une adresse web : le protocole (comme "https"), le nom de domaine (comme "www.w3docs.com") et le chemin (tout ce qui suit le domaine).
• Test de l'adresse web : Le code teste "https://www.w3docs.com/pathname/?search=test" par rapport à ce modèle.
• Affichage du résultat : Si l'adresse web correspond, le code affiche les parties qui correspondent au modèle.

Résultat attendu : La sortie est un array avec les éléments suivants :

1. L'adresse web complète : "https://www.w3docs.com/pathname/?search=test".
2. Le protocole utilisé : "https".
3. Le nom de domaine : "www.w3docs.com".
4. Le chemin et la chaîne de requête : "pathname/?search=test".

Applications pratiques des modèles et drapeaux

Les regex sont utilisées dans divers scénarios pour améliorer les applications JavaScript :

Valider les entrées utilisateur

Les regex aident à s'assurer que les entrées utilisateur répondent à certains critères, ce qui est essentiel pour la qualité des données et la sécurité.

Ce code vérifie si le nom d'utilisateur se compose de 3 à 16 caractères alphanumériques ou tirets bas.

Extraire des informations

Les regex peuvent extraire des informations spécifiques de grands textes ou ensembles de données de manière efficace.

Ce code JavaScript extrait une information spécifique d'une string de texte.

• Définition du texte : Le code commence avec une string appelée data qui contient des détails sur une commande, notamment un identifiant de commande et une date.
• Mise en place du modèle : Il utilise un modèle (idPattern) pour rechercher la phrase "Order ID:" suivie d'une série de chiffres. Ce modèle est conçu pour capturer la partie numérique qui suit immédiatement "Order ID:".
• Extraction de l'identifiant de commande : Le code recherche dans la string data une correspondance avec idPattern. Lorsqu'il en trouve une, il récupère uniquement la partie chiffrée (en ignorant le texte "Order ID:"), qui représente l'identifiant de commande.
• Affichage du résultat : Il affiche ensuite cet identifiant de commande dans la console.

Conclusion

Maîtriser les modèles et drapeaux regex en JavaScript est essentiel pour gérer efficacement la manipulation de texte, la validation de données et les opérations de recherche. Ces outils rendent vos applications JavaScript plus robustes, efficaces et conviviales. Pour approfondir le sujet, continuez avec les classes de caractères, les ancres, les quantificateurs et les groupes capturants.

Pratique