Motifs et indicateurs des expressions régulières en JavaScript
Introduction aux motifs et indicateurs en JavaScript
Les expressions régulières (regex) sont des outils essentiels en JavaScript pour la recherche de motifs et la validation des données. Ce guide complet approfondit votre compréhension des motifs et des indicateurs regex, tout en renforçant vos compétences en JavaScript.
Liste des motifs courants
Voici quelques motifs couramment utilisés :
\w: Correspond à n’importe quel caractère de mot (caractère alphanumérique plus le soulignement). Équivalent à[a-zA-Z0-9_].\W: Correspond à n’importe quel caractère qui n’est pas un caractère de mot. Équivalent à[^a-zA-Z0-9_].\d: Correspond à n’importe quel chiffre. Équivalent à[0-9].\D: Correspond à n’importe quel caractère qui n’est pas un chiffre. Équivalent à[^0-9].\s: Correspond à n’importe quel caractère d’espace blanc (espaces, tabulations, sauts de ligne).\S: Correspond à n’importe quel caractère qui n’est pas un espace blanc. Équivalent à[^\s]..: Correspond à n’importe quel 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 qui n’en est pas un).\B: Correspond à une position qui n’est pas une frontière de mot.\t: Correspond à une tabulation.\n: Correspond à un saut de ligne.\r: Correspond à un retour chariot.\\: Correspond à une barre oblique inverse littérale.\f: Correspond à un saut de page.\v: Correspond à une tabulation verticale.[abc]: Correspond à n’importe quel caractère unique parmi ceux entre crochets.[^abc]: Correspond à n’importe quel caractère unique qui n’est pas parmi ceux entre crochets.a|b: Correspond à a ou b.(abc): Correspond à la séquence exacte abc.a?: Correspond à zéro ou une fois.a*: Correspond à zéro ou plusieurs fois.a+: Correspond à une ou plusieurs fois.a{3}: Correspond exactement à 3 occurrences de a.a{3,}: Correspond à 3 occurrences de a ou plus.a{3,5}: Correspond à 3 à 5 occurrences de a.(?i): Non pris en charge en JavaScript. Utilisez plutôt l’indicateuri.(?:...): Groupe non capturant.(?=...): Assertion d’anticipation positive.(?!...): Assertion d’anticipation négative.(?<=...): Assertion de rétrolecture positive.(?<!...): Assertion de rétrolecture négative.
Comprendre les motifs
Le motif regex est encadré par des barres obliques (/pattern/flags).
Exemple : /H.llo/g
- Motif :
H.llocorrespond à toute chaîne commençant par 'H', suivie d’un seul caractère quelconque (.), et se terminant parllo. - Indicateur :
gindique une recherche globale. - Quantificateur :
.correspond exactement à un caractère.
Les motifs dans les expressions régulières servent à définir la chaîne que vous recherchez. Ces motifs peuvent inclure divers caractères, des classes de caractères et des symboles spéciaux.
Voyons maintenant quelques exemples :
Exemple 1 :
- Motif :
\d+correspond à un ou plusieurs caractères numériques (\d+). - Indicateur :
gindique une recherche globale. - Quantificateur :
+correspond à une ou plusieurs occurrences de l’élément précédent (\d).
Exemple 2 :
- Motif :
\D+correspond à un ou plusieurs caractères non numériques (\D+). - Indicateur :
gindique une recherche globale. - Quantificateur :
+correspond à une ou plusieurs occurrences de l’élément précédent (\D).
Quantificateurs
Les quantificateurs définissent combien d’occurrences 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 motif correspond à des séquences d’un ou plusieurs chiffres.
*- Correspond à zéro ou plusieurs occurrences de l’élément précédent.
Ce motif 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 motif correspond à 'color' ou 'colour'.
{n}- Correspond exactement à n occurrences de l’élément précédent.
Ce motif correspond exactement à trois chiffres.
{n,}- Correspond à n occurrences ou plus de l’élément précédent.
Ce motif correspond à des séquences de deux chiffres ou plus.
{n,m}- Correspond à des occurrences comprises entre n et m de l’élément précédent.
Ce motif correspond à des séquences de deux à trois chiffres.
Indicateurs
Les indicateurs sont des paramètres facultatifs qui permettent une recherche globale, une recherche insensible à la casse, et plus encore. Voici quelques indicateurs couramment utilisés avec des exemples :
g- Recherche globale.
Cet indicateur permet de trouver toutes les correspondances dans la chaîne.
i- Recherche insensible à la casse.
Cet indicateur rend la recherche insensible à la casse.
m- Recherche multilignes.
Cet indicateur permet à ^ et $ de correspondre au début et à la fin de chaque ligne de la chaîne.
s- Permet à.de correspondre aux caractères de saut de ligne (également appelé indicateur dotAll).
Cet indicateur permet au point . de correspondre aussi aux caractères de saut de ligne.
u- "Unicode" ; traite le motif comme une séquence de points de code Unicode.
Cet indicateur सक्रियe la correspondance Unicode complète.
y- "Sticky" ; correspond uniquement à partir de l’index indiqué par la propriété lastIndex de cette expression régulière dans la chaîne cible.
Cet indicateur permet de commencer la recherche à un index spécifique dans la chaîne.
Tester des motifs : regexp.test()
La méthode test() vérifie si un motif existe dans une chaîne, en renvoyant true ou false.
Ce code vérifie la présence de "world" dans la chaîne.
Remplacer du texte : str.replace()
La fonction replace() vous permet de modifier des chaînes en remplaçant certaines parties par un nouveau texte.
Ce code remplace "morning" par "evening".
Remplacer tout : str.replaceAll()
La méthode replaceAll() remplace toutes les occurrences d’un motif par une nouvelle chaîne.
Ce code remplace chaque "a" par "o".
Fractionner du texte : str.split()
La méthode split() divise une chaîne en un tableau de sous-chaînes à partir d’un motif.
Ce code découpe la chaîne à chaque virgule.
Rechercher du texte : str.match()
La méthode match() récupère les correspondances d’un motif dans une chaîne, ce qui est utile pour extraire des données spécifiques.
Ce code trouve tous les nombres dans le texte.
Syntaxe des regex en JavaScript
Les expressions régulières utilisent des caractères spéciaux pour définir des motifs. Voici un exemple détaillé utilisant plusieurs éléments de la syntaxe regex :
Ce motif regex décompose une URL en ses composants :
^(\w+): Correspond à n’importe quel 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, des points ou des tirets, représentant le domaine.\/(\S*)$: Correspond à une barre oblique suivie de n’importe quels caractères non blancs jusqu’à la fin, représentant le chemin.
Plus de détails :
Ce code JavaScript vérifie si une adresse web correspond à un motif détaillé.
- Configuration du motif : Le motif 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 motif.
- Affichage du résultat : Si l’adresse web correspond, le code affiche les parties qui correspondent au motif.
Résultat attendu : La sortie est un tableau avec les éléments suivants :
- L’adresse web entière : "https://www.w3docs.com/pathname/?search=test".
- Le protocole utilisé : "https".
- Le nom de domaine : "www.w3docs.com".
- Le chemin et la chaîne de requête : "pathname/?search=test".
Applications pratiques des motifs et des indicateurs
Les regex sont utilisées dans divers scénarios pour améliorer les applications JavaScript :
Validation des saisies utilisateur
Les regex aident à garantir que les saisies utilisateur respectent certains critères, ce qui est crucial pour la qualité des données et la sécurité.
Ce code vérifie si le nom d’utilisateur est composé de 3 à 16 caractères alphanumériques ou de soulignements.
Extraction d’informations
Les regex peuvent extraire efficacement des informations spécifiques à partir de grands textes ou ensembles de données.
Ce code JavaScript extrait une information spécifique d’une chaîne de texte.
- Définition du texte : Le code commence avec une chaîne appelée
dataqui contient des détails sur une commande, notamment un identifiant de commande et une date. - Configuration du motif : Il utilise un motif (
idPattern) pour rechercher l’expression "Order ID:" suivie d’une série de chiffres. Ce motif est conçu pour capturer la partie numérique juste après "Order ID:". - Extraction de l’identifiant de commande : Le code recherche dans la chaîne
dataune correspondance avecidPattern. Lorsqu’il en trouve une, il récupère uniquement la partie numérique (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.
INFO
Testez toujours vos motifs regex à l’aide d’outils comme regex101.com pour garantir leur exactitude et leur efficacité avant de les implémenter dans votre code.
Conclusion
Maîtriser les motifs regex et les indicateurs en JavaScript est essentiel pour gérer efficacement la manipulation de texte, la validation des données et les opérations de recherche. Ces outils rendent vos applications JavaScript plus robustes, plus efficaces et plus conviviales. Explorez différents motifs et indicateurs pour améliorer votre expertise en codage et les performances de vos applications.
Practice
What are the properties of regular expressions in JavaScript as described in the provided URL?