Quiz : Maîtrise des expressions régulières

Ce modèle utilise g, mais pas i :

• g trouve toutes les correspondances
• Sans i, la recherche est sensible à la casse

Sans le drapeau i, seule la chaîne en minuscules “cat” correspond.

C’est particulièrement utile lorsqu’on traite des entrées utilisateur ou du HTML où la casse peut varier.

En savoir plus sur les drapeaux RegExp

Le motif /^[ch]at/ correspond aux chaînes qui :

• Commencent (^) par ‘c’ ou ‘h’ (c’est ce que signifie [ch] – une classe de caractères qui correspond à un seul caractère)
• Suivies littéralement de ‘at’

Ainsi, seules “cat” et “hat” correspondent à ce motif. La méthode filter() ne conserve que les éléments correspondants.

En savoir plus sur les classes de caractères sur MDN

Le motif /<div>.*?<\/div>/g utilise une correspondance non‑gourmande avec *?, ce qui signifie :

• Correspondre à <div>
• Correspondre à n’importe quel caractère (.*) mais le moins possible (?)
• Jusqu’à trouver </div>
• Le drapeau g fait qu’il trouve toutes les occurrences

Sans le ?, le .* gourmand correspondrait à tout, du premier <div> au dernier </div>, produisant une seule grande correspondance. Avec le ?, il correspond à chaque paire séparément.

En savoir plus sur la correspondance gourmande vs paresseuse

Le motif \w+ correspond à un ou plusieurs caractères alphanumériques. Même s’il y a un saut de ligne dans la chaîne, \w correspond à :

• Lettres (a‑z, A‑Z)
• Chiffres (0‑9)
• Souligné (_)

Ainsi, le saut de ligne agit comme une frontière de mot, et nous obtenons deux correspondances. Si nous avions utilisé .*, il ne correspondrait pas au saut de ligne par défaut (il faudrait le drapeau s pour cela).

En savoir plus sur les métacaractères

Ce motif ne trouve rien dans cette entrée : il cherche un symbole monétaire après les chiffres, alors que la chaîne place les symboles avant eux. Si vous voulez des chiffres précédés de $ ou €, utilisez un look‑behind : /(?<=[\$€])\d+/g.

Les look‑aheads vérifient ce qui vient après la position courante. Le motif tel qu’il est écrit recherche :

• Un ou plusieurs chiffres (\d+)
• Suivis de ((?=…)) soit $ soit € ([\$€])

Comme il n’y a aucun nombre suivi d’un symbole monétaire (ils sont précédés), aucune correspondance n’est trouvée.

En savoir plus sur les assertions look‑ahead

La \b représente une frontière de mot, qui correspond à :

• Entre un caractère de mot et un caractère non‑mot
• Au début ou à la fin de la chaîne s’il y a un caractère de mot

Ainsi /\bcat\b/ ne correspond à “cat” que lorsqu’il forme un mot complet, pas lorsqu’il fait partie d’un autre mot.

• ✅ “cat” (entouré d’espaces)
• ❌ “cats” (pas de bordure après “cat”)
• ❌ “category” (pas de bordure après “cat”)

En savoir plus sur les frontières de mots

Le drapeau g (global) modifie le comportement de match() :

• Sans g : renvoie la première correspondance avec les groupes de capture
• Avec g : renvoie un tableau de toutes les chaînes correspondantes

Dans ce cas, il trouve toutes les occurrences de “a” dans “banana”.

Note : si vous avez besoin à la fois de toutes les correspondances ET des groupes de capture, utilisez matchAll() ou la méthode exec() dans une boucle.

En savoir plus sur le drapeau global

La rétrospection négative (look-behind) (?<!abc) garantit que les chiffres ne sont pas précédés de “abc” :

• ❌ “123” (précédé de “abc”)
• ✅ “23” (précédé de “abc1”)
• ✅ “456” (précédé de “def”)

JavaScript prend en charge les assertions de rétrospection dans les moteurs modernes. Cet exemple utilise une rétrospection de longueur fixe : abc fait toujours trois caractères. La rétrospection de longueur variable est l’aspect plus délicat propre à chaque moteur.

Remarque : la prise en charge de la rétrospection est relativement récente en JavaScript. Consultez la compatibilité des navigateurs si vous devez supporter d’anciens navigateurs.

Le motif utilise trois groupes de capture :

1. (\d{4}) capture l’année
2. (\d{2}) capture le mois
3. (\d{2}) capture le jour

match() sans le drapeau g renvoie :

• Index 0 : correspondance complète
• Index 1+ : groupes de capture

slice(1) est une astuce courante pour ne récupérer que les groupes de capture.

En savoir plus sur les groupes et la capture

Avec le drapeau i, (?![a-z]) rejette une lettre ASCII suivante, majuscule ou minuscule. La recherche gourmande consomme d’abord 123, échoue devant a, puis revient en arrière jusqu’à 12. Le caractère suivant est alors 3 : l’assertion réussit et le résultat est ["12"].

En savoir plus sur l’anticipation négative

Le motif /(?<=,)/ est un look-behind qui correspond après une virgule :

• a, (après la virgule)
• b, (après la virgule)
• c (pas de virgule après)

Le look-behind ne consomme pas la virgule, ainsi la virgule reste attachée au segment précédent dans le résultat du split.

C’est pratique quand on veut diviser une chaîne en se basant sur ce qui la précède sans perdre le(s) caractère(s) de séparation.

En savoir plus sur les assertions look-behind

Les caractères spéciaux doivent être échappés avec \ pour correspondre littéralement :

• $ est un caractère spécial (fin de chaîne)
• Pour faire correspondre un signe dollar littéral, échappez‑le : \$

Caractères courants nécessitant un échappement :

. * + ? ^ $ [ ] \ ( ) { } |

Sans échappement, de nombreux caractères spéciaux ont des significations regex qui ne sont peut‑être pas ce que vous attendez.

En savoir plus sur l’échappement des caractères spéciaux

La rétrospection positive (look-behind) (?<=\$) garantit que les chiffres sont précédés d’un signe dollar :

• (?<=\$): rétrospection pour le signe dollar
• \d+: correspond à un ou plusieurs chiffres

Les assertions de rétrospection ne consomment pas de caractères ; elles ne font que vérifier ce qui se trouve avant. Cela est utile lorsqu’on veut faire correspondre quelque chose en fonction de ce qui le précède sans inclure cette partie.

En savoir plus sur les assertions de rétrospection

Le motif utilise la correspondance paresseuse avec *? :

• <b> : correspond à la balise d’ouverture
• (.*?) : capture n’importe quels caractères (paresseux)
• </b> : correspond à la balise de fermeture

Le ? après * rend la correspondance paresseuse, en capturant le moins de caractères possible. Sans ?, ce serait gourmand et capturerait le plus possible.

slice(1) renvoie uniquement le groupe capturé.

En savoir plus sur la correspondance gourmande vs paresseuse

Le drapeau u active :

• les échappements de propriétés Unicode (\p{...})
• la gestion correcte des paires de substitution

Sans u, les emojis et autres caractères Unicode pourraient ne pas correspondre correctement. Le motif \p{Emoji} correspond aux caractères possédant la propriété Unicode Emoji. Dans cette chaîne, cela signifie les deux pictogrammes emoji.

Remarque : les échappements de propriétés Unicode nécessitent un mode prenant en charge Unicode : soit le drapeau u utilisé ici, soit le drapeau v, plus récent.

En savoir plus sur le mode Unicode

Ne rédigez jamais rien de ce genre en production ! 😅

Ce modèle utilise plusieurs assertions positives look‑ahead pour imposer :

• Au moins une lettre majuscule : (?=.*[A-Z])
• Au moins une lettre minuscule : (?=.*[a-z])
• Au moins un chiffre : (?=.*\d)
• Au moins un caractère spécial : (?=.*[!@#$%^&*])
• Longueur minimale de 8 : .{8,}

Les look‑ahead sont parfaits pour la validation de mots de passe car ils permettent de vérifier plusieurs critères sans consommer de caractères.

En savoir plus sur les modèles de validation de mot de passe