Visualiseur de regex

• Diagramme de chemin de fer interactif : Voyez votre expression régulière rendue comme un diagramme de chemin de fer/syntaxe professionnel en temps réel. Chaque token (littéraux, groupes, quantificateurs, alternances et lookaheads) s'affiche comme une voie visuelle navigable.
• Décomposition AST avec arbre de tokens : Explorez un arbre syntaxique abstrait repliable montrant chaque nœud analysé (séquences, alternances, groupes nommés, quantificateurs, rétroréférences) avec des descriptions lisibles pour cibler précisément ce que fait chaque partie de votre regex.
• Test de correspondance en direct avec surlignage : Collez une chaîne de test et voyez les correspondances se surligner instantanément. Un tableau des groupes de capture affiche chaque correspondance avec ses valeurs de groupe numérotés et nommés, ce qui vous aide à vérifier la justesse avant la mise en production.
• 100 % gratuit, sans inscription ni serveur : Toute l'analyse, la génération de diagrammes et l'évaluation des correspondances s'exécutent directement dans votre navigateur avec le moteur regex natif de JavaScript. Aucune donnée ne quitte votre appareil, ce qui rend l'outil sûr pour des motifs sensibles comme des règles d'authentification ou des validateurs de données personnelles.

• Débogage de motifs : Repérez immédiatement les groupes mal appariés, les pièges de quantificateurs gourmands et les problèmes d'ordre d'alternance sans exécuter de code, en inspectant simplement le diagramme visuel.
• Revues de code : Partagez un lien vers une regex visualisée lors des revues de pull requests pour que les relecteurs vérifient l'intention sans analyser mentalement des séquences d'échappement brutes.
• Audit de sécurité : Auditez les motifs de validation d'entrée à la recherche de risques de retour arrière catastrophique (ReDoS). L'arbre AST rend immédiatement visibles les quantificateurs imbriqués et les alternances ambiguës.
• Apprendre les expressions régulières : Les débutants peuvent saisir des motifs simples puis ajouter progressivement des fonctionnalités en voyant exactement comment chaque classe de caractères, quantificateur ou groupe modifie le diagramme.
• Génération de documentation : Exportez ou capturez des diagrammes de chemin de fer pour la documentation d'API, les wikis ou les articles techniques afin d'expliquer une logique de validation complexe sans longs textes.
• Tests multiplateformes : Testez le comportement d'un motif sur plusieurs chaînes d'exemple à la fois et vérifiez l'extraction de groupes de capture nommés utilisée dans le routage d'URL, les analyseurs de logs ou les découpages CSV.

Un diagramme de chemin de fer (ou de syntaxe) représente une grammaire formelle comme un ensemble de voies. Le motif se lit de gauche à droite : chaque token est une boîte étiquetée reliée par des lignes. En cas de choix (alternance via | ), les voies se séparent verticalement puis se rejoignent après les alternatives. Lorsqu'un token est facultatif ou répété, un arc de boucle est dessiné au-dessus de l'élément pour indiquer le quantificateur. Cela correspond au modèle mental utilisé par la plupart des développeurs lorsqu'ils raisonnent sur une regex : de gauche à droite, avec des branches pour le choix et des boucles pour la répétition.

À côté du diagramme, l'onglet de décomposition de l'AST affiche l'arbre syntaxique abstrait complet analysé à partir de votre motif. Chaque nœud possède un type (séquence, alternance, groupe, quantificateur, littéral, classe de caractères, échappement, ancre, rétroréférence) et une description lisible. L'arbre est entièrement repliable : vous pouvez donc vous concentrer sur des sous-motifs précis sans perdre le contexte.

L'onglet « Tester et comparer » vous permet de coller un exemple d'entrée et de voir immédiatement quelles portions de la chaîne correspondent à votre motif. Les correspondances sont surlignées en ligne et un tableau des groupes de capture affiche chaque groupe numéroté et nommé extrait de chaque correspondance, les mêmes données que reçoit votre code applicatif via String.prototype.matchAll() ou RegExp.prototype.exec() .

Le visualiseur prend en charge l'ensemble des fonctionnalités regex ECMAScript, notamment les classes de caractères ( [a-z] , [^0-9] ), les échappements abrégés ( \d , \w , \s ), les ancres ( ^ , $ , \b ), les groupes capturants et non capturants, les groupes nommés via , les lookaheads ( (?=…) , (?!…) ), les lookbehinds ( (?<=…) , (?<!…) ), les rétroréférences ( \1 , \k<nom> ) et tous les quantificateurs, y compris les variantes paresseuses ( *? , +? , ?? ).