JavaScript Regex (OU)

Les expressions régulières JavaScript (RegEx) offrent de puissantes capacités pour la recherche de motifs dans les chaînes de caractères. L'un des éléments clés des RegEx est l'opérateur OR, représenté par la barre verticale (|). Cet opérateur permet d'inclure plusieurs motifs dans une seule expression régulière, ce qui facilite des recherches et des manipulations de chaînes polyvalentes et efficaces. Dans ce guide complet, nous explorerons l'utilisation de l'opérateur OR dans les RegEx JavaScript, accompagné d'exemples pratiques pour approfondir votre compréhension.

Comprendre l'opérateur OR (|) dans les RegEx

L'opérateur OR dans les expressions régulières vous permet de spécifier plusieurs alternatives pour une correspondance. Il est particulièrement utile lorsque vous devez faire correspondre un motif parmi plusieurs motifs possibles.

Utilisation de base de l'opérateur OR

La syntaxe de l'opérateur OR est simple. Il suffit de placer le symbole | entre les motifs que vous souhaitez faire correspondre.

Dans cet exemple, le motif /cat|dog/ correspond à la fois à "cat" et à "dog" dans les chaînes données.

Précédence de l'alternation : pourquoi les parenthèses sont presque toujours nécessaires

C'est le principal piège avec |. L'opérateur OR a une très faible précédence — inférieure à celle de tout autre opérateur regex. Cela signifie que | divise toute l'expression en alternatives, jusqu'aux délimiteurs environnants ou aux parenthèses englobantes les plus proches.

Ainsi, /cat|concatenate/ ne signifie pas "cat éventuellement suivi de concatenate". Cela signifie : faire correspondre l'intégralité du motif cat, OU faire correspondre l'intégralité du motif concatenate. De même, /^cat|dog$/ se lit comme (^cat)|(dog$) — "commence par cat" OU "se termine par dog" — ce qui est rarement l'intention des gens.

Pour limiter l'alternation à une partie seulement d'un motif, enveloppez les alternatives dans des parenthèses.

Ancrer l'ensemble avec ^ et $ est un complément courant à l'alternation groupée — voir Ancres : début et fin de chaîne.

L'ordre compte : la première correspondance l'emporte

Le moteur regex essaie les alternatives de gauche à droite et s'arrête à la première qui réussit à la position courante. Il ne cherche pas la correspondance la plus longue — seulement la première. Cela signifie que l'ordre de vos alternatives est important.

Règle générale : listez les alternatives plus longues ou plus spécifiques avant les plus courtes avec lesquelles elles partagent un préfixe.

Regroupement avec des parenthèses

Les parenthèses () regroupent des parties d'une expression régulière de sorte que les quantificateurs et autres opérateurs s'appliquent à l'ensemble du groupe, et elles capturent également le texte mis en correspondance pour une utilisation ultérieure (voir Groupes capturants). C'est essentiel lorsque vous voulez que le OR ne couvre qu'une partie d'un motif plus grand.

Ici, le quantificateur s? s'applique à l'ensemble du groupe (cat|dog), de sorte que le motif correspond à "cat", "cats", "dog" et "dogs". Le quantificateur ? et ses semblables sont couverts dans Quantificateurs +, * et {n}.

Exemples pratiques

Correspondance avec différentes extensions de fichiers

Supposons que vous deviez valider des noms de fichiers avec différentes extensions telles que .jpg, .png ou .gif.

Dans cet exemple, le motif /\.(jpg|png|gif)$/ correspond aux noms de fichiers se terminant par ".jpg", ".png" ou ".gif". Le \. initial correspond à un point littéral, le groupe (jpg|png|gif) constitue l'alternation, et $ ancre la correspondance à la fin de la chaîne.

Validation des numéros de téléphone

Envisageons un scénario où vous devez valider différents formats de numéros de téléphone.

Décortiquons le motif /(\+\d{1,2}\s?)?(\(\d{3}\)|\d{3})[-.\s]?\d{3}[-.\s]?\d{4}/ pièce par pièce :

• (\+\d{1,2}\s?)? — un indicatif de pays optionnel : un +, un ou deux chiffres, puis un espace optionnel. Le ? final rend l'ensemble du groupe optionnel.
• (\(\d{3}\)|\d{3}) — l'alternation : soit trois chiffres entre parenthèses (123) ou trois chiffres nus 123. Notez que \( et \) sont des parenthèses littérales, tandis que les () non échappées extérieures servent au regroupement.
• [-.\s]? — un séparateur optionnel : un tiret, un point ou un espace blanc. (Ce sont des classes de caractères.)
• \d{3} — trois chiffres.
• [-.\s]? — un autre séparateur optionnel.
• \d{4} — les quatre derniers chiffres.

Alternation simple vs sous-motifs optionnels

Une confusion courante est de traiter color|colour comme si le u était optionnel. Ce n'est pas le cas — il s'agit d'une alternation simple entre deux mots complets.

Lorsque les alternatives ne diffèrent que par un seul caractère (ou une courte séquence), l'approche idiomatique et plus efficace est un sous-motif optionnel quantifié, et non une alternation. Le quantificateur ? rend le u précédent optionnel :

Utilisez l'alternation (|) lorsque les choix sont des chaînes véritablement distinctes (cat|dog) ; utilisez ? lorsqu'une forme est l'autre plus un fragment optionnel (colou?r).

Combinaison de l'opérateur OR avec d'autres métacaractères

La puissance de l'opérateur OR est amplifiée lorsqu'il est combiné avec d'autres métacaractères d'expressions régulières, tels que * (zéro ou plusieurs fois), + (une ou plusieurs fois), ? (zéro ou une fois) et {} (exactement n fois).

Exemple avec des quantificateurs

Le motif /\b(cat|dog)s?\b/ correspond à "cat", "cats", "dog" et "dogs" en tant que mots entiers, en utilisant le métacaractère de limite de mot \b.

Exemple avancé avec plusieurs conditions

Les deux formats de date ci-dessous — J-M-AAAA et AAAA-M-J — utilisent les mêmes séparateurs et le même nombre de chiffres, de sorte que la regex ne peut pas distinguer l'ordre jour-mois par la forme seule. Ce qu'elle peut distinguer, c'est l'emplacement de l'année à quatre chiffres : à la fin pour un format, au début pour l'autre.

Ce motif correspond aux dates dans les formats jour en premier (12-31-2023, 31-12-2023) et année en premier (2023-12-31). Notez que 31-12-2023 correspond bien — il s'agit d'une chaîne \d{1,2}-\d{1,2}-\d{4} parfaitement valide, donc la première alternative l'accepte.

Un détail subtil mais important : comme | a la précédence la plus faible, le ^ ne se lie qu'à la première alternative et le $ uniquement à la seconde. Pour ancrer les deux alternatives, regroupez-les :

Utilisation de l'alternation avec match(), matchAll() et replace()

test() indique seulement si un motif a été trouvé. Pour extraire ou transformer le texte mis en correspondance, combinez l'alternation avec des groupes capturants et les méthodes de chaîne match(), matchAll() et replace().

match() (sans le drapeau g) renvoie la première correspondance ainsi que chaque groupe capturé :

Avec le drapeau g, match() renvoie toutes les correspondances sous forme de tableau, et matchAll() vous fournit un itérateur d'objets de correspondance complets :

replace() vous permet de réécrire chaque alternative. Ici, nous normalisons les orthographes britanniques et américaines vers une seule forme :

Conclusion

Maîtriser l'opérateur OR dans les expressions régulières JavaScript ouvre un large éventail de possibilités pour une recherche de motifs efficace et polyvalente. En comprenant comment utiliser l'opérateur OR en combinaison avec d'autres fonctionnalités des RegEx, vous pouvez créer des motifs puissants et flexibles pour gérer des recherches et des manipulations de chaînes complexes.

Exercice

Avant de soumettre, raisonnez sur chaque option. Rappelez-vous que chaque option ci-dessous est une syntaxe regex valide — la question est de savoir ce que chacune correspond réellement :

• /cat|dog/ — alternation simple utilisant | ; correspond à "cat" ou "dog" n'importe où dans une chaîne. Correct.
• /(cat|dog)/ — même alternation enveloppée dans un groupe capturant ; le groupe ne change pas ce qui est mis en correspondance, seulement le fait que la correspondance est capturée. Correct.
• /cat|dogs/ — valide, mais la seconde alternative est "dogs" (avec un s), donc elle ne correspond jamais au mot simple "dog". Incorrect pour cette question.
• /cat||dog/ — l'alternative vide entre les deux symboles | correspond à une chaîne vide, ce qui fait que ce motif correspond à presque n'importe quoi, y compris les chaînes ne contenant ni l'un ni l'autre mot. Incorrect.
• /(cat|dog)s/ — le s obligatoire après le groupe signifie que ce motif correspond à "cats" ou "dogs", pas à "cat" ou "dog". Incorrect.
• /cat|do g/ — l'espace est un caractère littéral, donc la seconde alternative est "do g" (avec un espace), pas "dog". Incorrect.