Diagramma railroad delle regex

Come visualizzare un’espressione regolare

1. Scrivi o incolla il pattern in Espressione regolare. Puoi anche incollare un letterale JavaScript completo come /^\d{3}-\d{4}$/gm: le barre vengono rimosse e i flag finiscono automaticamente nella casella dei flag.
2. Aggiungi i flag se ti servono (qualsiasi tra d g i m s u v y). I flag cambiano il modo in cui alcune parti vengono disegnate: con m, ^ e $ diventano “inizio della riga” e “fine della riga”; con s, il punto diventa “qualsiasi carattere”.
3. Il diagramma si aggiorna mentre scrivi. Disegna diagramma lo ridisegna su richiesta ed Esempio successivo scorre alcuni pattern comuni (email, numero di telefono, colore esadecimale, prezzo, tag HTML, URL).
4. Leggi il diagramma da sinistra a destra, dal pallino pieno al pallino cerchiato. Ogni percorso che puoi seguire è una stringa che il pattern può riconoscere.
5. Usa Scarica SVG per un’immagine vettoriale nitida (documentazione, slide), Scarica PNG per un’immagine a risoluzione doppia, oppure Copia codice SVG per incollare il markup in una pagina web.

Passa il mouse su un riquadro per vedere da quale parte del pattern deriva e la sua posizione.

Come si legge un diagramma railroad

I diagrammi railroad, detti anche diagrammi sintattici, descrivono una grammatica come un insieme di binari. Un’espressione regolare è proprio una grammatica di questo tipo, quindi il disegno ne mostra la struttura molto meglio di una fitta riga di simboli:

• I riquadri blu sono testo letterale che deve comparire esattamente com’è scritto, per esempio “@”.
• I riquadri verdi sono tipi di carattere (\d cifra, \w carattere di parola, . qualsiasi carattere…) e classi di caratteri. Una classe come [\w.+-] diventa un riquadro intitolato “uno tra” che elenca ogni elemento; una classe negata [^…] è rossa e intitolata “nessuno tra”.
• Le pillole viola sono ancore e confini: inizio e fine del testo o della riga, \b confine di parola. Corrispondono a una posizione, non a un carattere.
• I riquadri tratteggiati arancioni sono riferimenti all’indietro come \1 o \k<name>: lo stesso testo catturato prima da un gruppo.
• Le cornici tratteggiate sono gruppi. I gruppi di cattura sono numerati nell’ordine della loro parentesi di apertura (“gruppo #2 “dominio””); i gruppi non di cattura (?:…) non hanno cornice. Lookahead e lookbehind hanno una cornice rosa con l’etichetta “seguito da” o “preceduto da”, perché controllano il testo senza consumarlo.
• I binari paralleli sono alternative separate da |.
• Un binario sopra un elemento permette di saltarlo (?, *, {0,n}). Un binario sotto con una freccia torna indietro per ripeterlo (+, *, {n,m}). I conteggi diversi da quelli soliti sono scritti sotto il ciclo, come “da 2 a 5 volte”, e i quantificatori lazy (+?, *?) sono contrassegnati con “lazy”.

Messaggi di errore con la posizione

Il pattern viene controllato dal motore di espressioni regolari JavaScript del tuo browser, quindi ciò che lo strumento accetta è esattamente ciò che accetta new RegExp() con gli stessi flag. Quando il motore lo rifiuta, lo strumento indica il carattere colpevole con la sua posizione e un accento circonflesso sotto il pattern. Riconosce una ) senza corrispondenza, un gruppo mai chiuso, una classe di caratteri senza la sua ], un quantificatore senza niente da ripetere (*a, a|+), un backslash isolato alla fine e quantificatori {n,m} in cui n è maggiore di m. Gli altri errori, come un riferimento a un nome di gruppo inesistente, vengono mostrati con il messaggio del browser.

L’espressione viene solo compilata per validarla: non viene mai eseguita su un testo e niente lascia il tuo browser.