Utilia
Catégories ▾
Langue: fr ▾

Diagramme d'expression régulière

Transformez une expression régulière JavaScript en diagramme de syntaxe clair (groupes, alternatives, boucles, assertions) et exportez-le en SVG ou PNG.

Drapeaux : d g i m s u v y. Vous pouvez aussi coller un littéral comme /\d+/g.

Groupes capturants
–
Alternatives
–
Quantificateurs
–

Diagramme de syntaxe (railroad)

Bleu : texte littéral. Vert : types et ensembles de caractères (rouge : ensemble exclu). Violet : ancres et limites. Orange : références arrière. Cadres en pointillés : groupes et assertions. Un chemin au-dessus d’un élément permet de le sauter, un chemin en dessous de le répéter.

Comment visualiser une expression régulière

  1. Saisissez ou collez votre motif dans Expression régulière. Vous pouvez aussi coller un littéral JavaScript complet, par exemple /^\d{3}-\d{4}$/gm : les barres obliques sont retirées et les drapeaux passent automatiquement dans la case prévue.
  2. Ajoutez des drapeaux au besoin (parmi d g i m s u v y). Certains modifient le dessin : avec m, ^ et $ deviennent « début de ligne » et « fin de ligne » ; avec s, le point devient « tout caractère ».
  3. Le diagramme se met à jour pendant la frappe. Tracer le diagramme le redessine à la demande et Exemple suivant fait défiler quelques motifs courants (courriel, numéro de téléphone, couleur hexadécimale, prix, balise HTML, URL).
  4. Lisez le schéma de gauche à droite, du point plein jusqu’au point cerclé. Chaque chemin que l’on peut suivre correspond à un texte reconnu par le motif.
  5. Choisissez Télécharger en SVG pour une image vectorielle nette (documentation, présentations), Télécharger en PNG pour une image en double résolution, ou Copier le code SVG pour coller le balisage dans une page web.

Survolez une case pour voir le fragment du motif dont elle provient et sa position.

Lire un diagramme de syntaxe

Les diagrammes « en rails de chemin de fer » (railroad diagrams) décrivent une grammaire sous forme de voies. Une expression régulière est précisément une petite grammaire : le dessin montre sa structure bien mieux qu’une ligne dense de symboles.

  • Les cases bleues sont du texte littéral qui doit apparaître tel quel, par exemple « @ ».
  • Les cases vertes sont les types de caractères (\d chiffre, \w caractère de mot, . tout caractère…) et les classes. Une classe comme [\w.+-] devient une case intitulée « un parmi » qui liste chaque élément ; une classe négative [^…] est rouge et intitulée « aucun parmi ».
  • Les pastilles violettes sont les ancres et les limites : début et fin du texte ou de la ligne, limite de mot \b. Elles correspondent à une position, pas à un caractère.
  • Les cases orange en pointillés sont les références arrière comme \1 ou \k<nom> : le même texte que celui capturé plus tôt par un groupe.
  • Les cadres en pointillés sont les groupes. Les groupes capturants sont numérotés dans l’ordre de leur parenthèse ouvrante (« groupe n° 2 « domain » ») ; les groupes non capturants (?:…) ne sont pas encadrés. Les assertions avant et arrière ont un cadre rose (« suivi de », « précédé de ») : elles vérifient le texte sans le consommer.
  • Les voies parallèles sont les alternatives séparées par |.
  • Une voie au-dessus d’un élément permet de le sauter (?, *, {0,n}). Une voie en dessous, fléchée, revient en arrière pour le répéter (+, *, {n,m}). Les nombres inhabituels sont écrits sous la boucle, par exemple « de 2 à 5 fois », et les quantificateurs paresseux (+?, *?) portent la mention « paresseux ».

Des messages d’erreur localisés

Le motif est vérifié par le moteur d’expressions régulières JavaScript de votre navigateur : cet outil accepte exactement ce que new RegExp() accepte avec les mêmes drapeaux. En cas de refus, il indique la position du caractère fautif et place un accent circonflexe sous le motif. Il reconnaît une ) sans partenaire, un groupe jamais fermé, une classe à laquelle il manque le ], un quantificateur qui n’a rien à répéter (*a, a|+), une barre oblique inverse seule en fin de motif et un quantificateur {n,m} où n dépasse m. Les autres erreurs, comme une référence à un nom de groupe inexistant, sont affichées avec le message du navigateur.

L’expression est seulement compilée pour être validée : elle n’est jamais exécutée sur un texte, et rien ne quitte votre navigateur.

Questions fréquentes

Quelle syntaxe de regex est prise en charge ?

Celle de JavaScript (ECMAScript), avec les groupes nommés, les assertions arrière, les propriétés Unicode \p{…} et le drapeau v avec ses classes imbriquées. Les motifs PCRE, Python ou Java fonctionnent souvent aussi, mais les syntaxes propres à ces moteurs, comme les quantificateurs possessifs ou (?P<nom>…), sont refusées puisque le navigateur ne les connaît pas.

Pourquoi mon groupe non capturant n'a-t-il pas de cadre ?

Un groupe comme (?:\.[\w-]+) sert seulement à appliquer un quantificateur ou une alternative à plusieurs éléments. Il ne capture rien : le diagramme affiche son contenu et sa boucle sans cadre, ce qui reste plus lisible. Les groupes avec drapeaux en ligne sont encadrés et portent ces drapeaux.

Quelle différence entre la voie du dessus et la boucle ?

La voie au-dessus d’un élément signifie « zéro fois est permis », celle du dessous « il peut être répété ». ? n’a que la voie du dessus, + que la boucle, et * a les deux. Pour un quantificateur comme {2,4}, la boucle porte l’indication « de 2 à 4 fois ».

Puis-je utiliser le diagramme dans ma documentation ?

Oui. L’export SVG est un fichier vectoriel autonome, sur fond blanc avec des traits sombres, idéal pour un README, un wiki ou des diapositives. L’export PNG est rendu à deux fois la taille affichée, pour rester net sur les écrans haute densité.

Y a-t-il une taille maximale ?

Le motif peut compter jusqu’à 5 000 caractères. Une expression très longue donne un diagramme large que l’on fait défiler horizontalement ; la découper en parties nommées rend souvent le schéma, et la regex elle-même, plus faciles à maintenir.

Outils similaires