Développeurs

Comment Tester une Expression Régulière en Ligne (Avec des Exemples Réels)

9 min de lecture

Pour tester une expression régulière, écrivez le motif, choisissez les flags qui décrivent le comportement attendu, faites-le tourner sur une chaîne de test représentative, puis vérifiez à la fois les correspondances surlignées et le contenu des groupes capturés avant de coller ce motif dans du code réel. Sauter cette dernière étape est la façon la plus courante de découvrir un regex cassé en production plutôt que dans un éditeur.

Motif, flags et groupes : ce que fait réellement chaque pièce

Dans l’outil, le motif se saisit entre deux barres obliques, comme /^\d{4}-\d{2}-\d{2}$/. Tout ce qui se trouve entre ces deux / est la grammaire regex elle-même : classes de caractères, quantificateurs, ancres. Ce qui suit la seconde barre, ce sont les flags, des lettres qui modifient le comportement du moteur sans toucher au motif.

Quatre flags sont disponibles :

  • g (global) : trouve toutes les correspondances dans la chaîne, pas seulement la première. Sans ce flag, le moteur s’arrête dès qu’il a trouvé un résultat.
  • i (insensible à la casse) : /bonjour/i correspond à Bonjour, BONJOUR et bonjour indifféremment.
  • m (multiligne) : change le sens de ^ et $. Sans ce flag, ils marquent le tout début et la toute fin de la chaîne entière ; avec lui, ils marquent le début et la fin de chaque ligne.
  • s (dotAll) : par défaut, le point . correspond à n’importe quel caractère sauf un saut de ligne. Avec s, il correspond aussi aux sauts de ligne, ce qui devient utile quand on doit matcher un bloc de texte multiligne d’un seul bloc.

Ces flags se combinent librement : /pattern/gi cherche toutes les occurrences sans tenir compte de la casse.

Les parenthèses () dans un motif créent un groupe capturant : la portion de la chaîne qui correspond à ce qui est entre parenthèses est mémorisée séparément du reste de la correspondance, et on peut la récupérer après coup. On peut aussi nommer un groupe avec la syntaxe (?<nom>...), par exemple (?<year>\d{4}) capture quatre chiffres sous le nom year plutôt que sous un simple index numérique. C’est particulièrement lisible quand un motif a plusieurs groupes et qu’on veut éviter de compter les parenthèses pour savoir laquelle correspond à quoi.

Quatre motifs, quatre comportements

Voici quatre exemples qui couvrent des cas d’usage réels : validation d’email, extraction de couleurs hexadécimales, parsing de chemin d’URL, et validation stricte de date.

PatternFlagsMatchesDoesn’t matchCaptures
^[\w.+-]+@[\w-]+\.[a-zA-Z]{2,}$nonejane.doe@example.comjane@example (no top-level domain)none
#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})g#2F7BFF, #fff#12G456 (G is not hex)Group 1: 2F7BFF
\/(\w+)\/(\w[\w-]*)g/users/123, /products/abc-456/users (no second segment)Group 1: resource type, Group 2: id
^\d{4}-\d{2}-\d{2}$none2026-07-1107/11/2026 (wrong format)none

Extraire des couleurs hexadécimales avec #([0-9a-fA-F]{6}|[0-9a-fA-F]{3}) et le flag g

Ce motif commence par un # littéral, puis ouvre un groupe capturant qui propose deux alternatives séparées par un | : soit exactement six caractères hexadécimaux (0-9, a-f, A-F), soit exactement trois. C’est ce qui permet au même motif de reconnaître aussi bien #2F7BFF (une couleur complète, six chiffres) que #fff (la forme abrégée à trois chiffres qu’utilise le CSS). Une chaîne comme #12G456 ne correspond à aucune des deux branches : G n’existe pas dans une classe hexadécimale, donc le moteur rejette toute la tentative de correspondance à cet endroit.

Le flag g change complètement le résultat ici. Sans lui, appliquer ce motif à une feuille de style contenant --color-accent: #2F7BFF; --color-bg: #0B1220; ne renverrait que la toute première correspondance, #2F7BFF, et le moteur s’arrêterait là, ignorant #0B1220 qui suit pourtant sur la même ligne. Avec g, le moteur continue de chercher après chaque correspondance trouvée et retourne la liste complète. C’est exactement le genre de tâche pour laquelle ce motif est pensé : parcourir un fichier CSS entier et extraire toutes les couleurs de marque qu’il contient, pas seulement la première rencontrée.

Le groupe capturant a aussi son utilité propre : il isole la valeur hexadécimale sans le # qui la précède. Si le but est de construire une palette de couleurs à partir d’un fichier de variables CSS, on veut généralement la valeur brute (2F7BFF) pour la réinjecter ailleurs, par exemple dans un objet JavaScript ou un token de design, sans avoir à retirer le # manuellement à chaque résultat.

Parser des chemins d’API REST avec \/(\w+)\/(\w[\w-]*)

Ce motif cible des chemins de la forme /ressource/identifiant, comme on en croise dans presque toutes les routes REST. Il commence par une barre oblique échappée \/, suivie d’un premier groupe (\w+) qui capture un ou plusieurs caractères de mot (lettres, chiffres, underscore), typiquement le nom de la ressource. Vient ensuite une seconde barre oblique, puis un second groupe (\w[\w-]*) : celui-ci exige un premier caractère de mot suivi de zéro ou plusieurs caractères de mot ou de tiret. Cette nuance existe pour accepter des identifiants comme abc-456, qui contiennent un tiret, tout en interdisant qu’un identifiant commence directement par un tiret.

Sur /users/123, le groupe 1 capture users et le groupe 2 capture 123. Sur /products/abc-456, le groupe 1 capture products et le groupe 2 capture abc-456. Sur /users seul, sans second segment, le motif ne trouve rien à faire correspondre : il lui manque la seconde barre oblique et le second groupe obligatoire, donc toute la tentative échoue.

Avec le flag g actif, ce motif appliqué à une chaîne de log contenant plusieurs routes (GET /users/123 puis POST /products/abc-456) renverrait les deux correspondances séparément, chacune avec ses deux groupes. C’est directement exploitable pour construire un validateur de route côté serveur : on capture le type de ressource dans le groupe 1 pour aiguiller vers le bon contrôleur, et l’identifiant dans le groupe 2 pour la requête en base de données, sans avoir à découper la chaîne à la main avec split('/') et à gérer les cas limites d’index.

Testez-le vous-même

Collez votre propre motif et une chaîne de test ci-dessous pour voir les correspondances et les groupes capturés en direct.

/ /
Testeur d'Expressions Régulières
Gratuit, sans inscription, sur tous les appareils.
Ouvrir l'outil complet

Erreurs courantes et cas particuliers

Oublier l’option g. Sans elle, la regex s’arrête après la première correspondance, ce qui casse silencieusement tout ce qui attend toutes les occurrences. Un script qui doit remplacer chaque numéro de téléphone dans un document, par exemple, ne traitera que le premier s’il utilise un motif sans g, et les suivants resteront intacts sans qu’aucune erreur ne soit levée.

Le point non échappé. Un . non échappé correspond à n’importe quel caractère, pas à un point littéral. Un motif comme 192.168.1.1 utilisé tel quel correspondrait aussi à 192X168X1X1, puisque chaque point est interprété comme un joker qui accepte n’importe quel caractère à cette position. Pour matcher un point réel, il faut l’échapper avec un antislash : 192\.168\.1\.1.

Quantificateurs gourmands contre paresseux. .* prend tout ce qui est possible, c’est un quantificateur gourmand, et il peut s’étendre bien au-delà de ce qui était prévu. Sur un bloc HTML entier, un motif comme <.*> cherchant une balise peut correspondre depuis le tout premier < jusqu’au tout dernier > du document, engloutissant plusieurs balises au passage au lieu d’en isoler une seule. La version paresseuse, .*?, s’arrête dès la première occurrence possible du caractère suivant, ce qui donne dans ce cas une seule balise à la fois.

Ancres manquantes. Sans ^ et $, un motif peut correspondre comme simple sous-chaîne n’importe où dans le texte. Un motif de validation censé vérifier qu’une chaîne entière est un nombre, comme \d+, sans ancres, validera aussi abc123def puisqu’il trouve 123 quelque part dedans. Ajouter ^ au début et $ à la fin force la correspondance sur la chaîne entière, du premier au dernier caractère, et rejette tout ce qui déborde.

Questions fréquentes

Quelle est la vraie différence entre utiliser l’option g et ne pas l’utiliser ? Sans g, le moteur retourne la première correspondance trouvée puis s’arrête, même s’il en existe d’autres plus loin dans la chaîne. Avec g, il continue de parcourir le texte après chaque correspondance et retourne la liste complète. La différence se voit surtout dans les opérations de remplacement ou d’extraction sur un texte contenant plusieurs occurrences : sans g, une seule est traitée, avec g, toutes le sont.

Comment faire correspondre un caractère spécial littéral comme un point, un dollar ou une parenthèse ? Il faut l’échapper avec un antislash devant : \. pour un point littéral, \$ pour un dollar littéral, \( et \) pour des parenthèses littérales. Ces caractères ont une signification spéciale dans la grammaire regex (le point est un joker, le dollar une ancre de fin, les parenthèses ouvrent un groupe), et l’antislash indique au moteur de les traiter comme de simples caractères de texte plutôt que comme des instructions.

Qu’est-ce qu’un groupe non capturant, (?:...), et quand en ai-je besoin plutôt qu’un groupe (...) normal ? Un groupe non capturant applique une alternative ou un quantificateur à plusieurs caractères à la fois, exactement comme un groupe normal, mais sans réserver de numéro de capture ni apparaître dans les résultats. C’est utile quand on a besoin du regroupement pour la logique du motif (par exemple appliquer + à toute une séquence (?:ab)+) mais qu’on n’a aucun usage pour cette portion capturée séparément, surtout dans un motif qui contient déjà plusieurs groupes capturants et où ajouter un groupe de structure supplémentaire décalerait la numérotation des autres.

Cet outil envoie-t-il mon motif ou mon texte de test quelque part ? Non. Tout s’exécute dans le navigateur, via le moteur RegExp natif de JavaScript. Rien, ni le motif, ni la chaîne de test, ni les résultats, n’est envoyé à un serveur.

RegexValidationDéveloppeursExpressions Régulières
Testeur d'Expressions Régulières
Essayez-le maintenant avec l'outil complet.
Essayer maintenant