Diagrama ferroviari de regex

Com visualitzar una expressió regular

1. Escriu o enganxa el patró a Expressió regular. També pots enganxar un literal complet de JavaScript com /^\d{3}-\d{4}$/gm: les barres s’eliminen i els indicadors passen automàticament al quadre d’indicadors.
2. Afegeix indicadors si els necessites (qualsevol de d g i m s u v y). Els indicadors canvien com es dibuixen algunes parts: amb m, ^ i $ passen a ser «inici de línia» i «final de línia»; amb s, el punt passa a ser «qualsevol caràcter».
3. El diagrama s’actualitza mentre escrius. Dibuixa el diagrama el torna a dibuixar quan vulguis, i Exemple següent recorre uns quants patrons habituals (correu electrònic, número de telèfon, color hexadecimal, preu, etiqueta HTML, URL).
4. Llegeix el diagrama d’esquerra a dreta, des del punt ple fins al punt amb anell. Cada camí que pots seguir és una cadena que el patró pot reconèixer.
5. Fes servir Baixa l’SVG per a una imatge vectorial nítida (documentació, presentacions), Baixa el PNG per a una imatge a doble resolució, o Copia el codi SVG per enganxar el codi en una pàgina web.

Passa el ratolí per sobre d’un quadre per veure la part del patró d’on prové i la seva posició.

Com llegir un diagrama ferroviari

Els diagrames ferroviaris, també anomenats diagrames de sintaxi, descriuen una gramàtica com un conjunt de vies. Una expressió regular és exactament una gramàtica d’aquest tipus, de manera que el dibuix en mostra l’estructura molt millor que una línia densa de símbols:

• Els quadres blaus són text literal que ha d’aparèixer tal com s’ha escrit, per exemple «@».
• Els quadres verds són tipus de caràcters (\d xifra, \w caràcter de paraula, . qualsevol caràcter…) i classes de caràcters. Una classe com [\w.+-] es converteix en un quadre amb el títol «un dels següents» que enumera cada element; una classe negada [^…] és vermella i té el títol «cap dels següents».
• Les píndoles lila són àncores i límits: inici i final del text o de la línia, límit de paraula \b. Reconeixen una posició, no un caràcter.
• Els quadres taronja discontinus són referències enrere com \1 o \k<nom>: el mateix text que ha reconegut un grup anterior.
• Els requadres discontinus són grups. Els grups de captura es numeren segons l’ordre del parèntesi d’obertura («grup #2 «domini»»); els grups sense captura (?:…) no tenen requadre. Els lookaheads i els lookbehinds tenen un requadre rosa amb l’etiqueta «seguit de» o «precedit de», perquè comproven el text sense consumir-lo.
• Les vies paral·leles són alternatives separades per |.
• Una via per sobre d’un element permet saltar-lo (?, *, {0,n}). Una via per sota amb una fletxa torna enrere per repetir-lo (+, *, {n,m}). Les quantitats diferents de les habituals s’escriuen sota el bucle, com «de 2 a 5 vegades», i els quantificadors mandrosos (+?, *?) es marquen com a «mandrós».

Missatges d’error amb posicions

El patró el comprova el motor d’expressions regulars de JavaScript del teu propi navegador, de manera que el que accepta aquesta eina és exactament el que accepta new RegExp() amb els mateixos indicadors. Quan el motor el rebutja, l’eina assenyala el caràcter problemàtic amb la seva posició i un accent circumflex sota el patró. Reconeix un ) sense parella, un grup que no es tanca mai, una classe de caràcters sense ], un quantificador sense res a repetir (*a, a|+), una barra invertida sola al final i quantificadors {n,m} on n és més gran que m. Altres errors, com una referència enrere a un nom de grup que no existeix, es mostren amb el missatge del navegador.

L’expressió només es compila per validar-la: no s’executa mai sobre cap text, i res no surt del teu navegador.