Regex-railroaddiagram

Zo visualiseer je een reguliere expressie

1. Typ of plak je patroon in het veld Reguliere expressie. Je kunt ook een volledige JavaScript-literal plakken, zoals /^\d{3}-\d{4}$/gm: de slashes worden verwijderd en de flags gaan automatisch naar het flagsveld.
2. Voeg zo nodig flags toe (een combinatie van d g i m s u v y). Flags veranderen hoe sommige onderdelen getekend worden: met m worden ^ en $ “begin van de regel” en “einde van de regel”; met s wordt de punt “elk teken”.
3. Het diagram wordt bijgewerkt terwijl je typt. Diagram tekenen tekent het opnieuw wanneer je wilt, en Volgend voorbeeld loopt door een paar veelgebruikte patronen (e-mail, telefoonnummer, hexkleur, prijs, HTML-tag, URL).
4. Lees het diagram van links naar rechts, van de gevulde stip naar de stip met een ring. Elk pad dat je kunt volgen, is een tekenreeks die het patroon kan matchen.
5. Gebruik SVG downloaden voor een scherpe vectorafbeelding (documentatie, presentaties), PNG downloaden voor een afbeelding op dubbele resolutie, of SVG-code kopiëren om de opmaak in een webpagina te plakken.

Beweeg de muis over een vak om te zien uit welk deel van het patroon het komt en op welke positie.

Zo lees je een railroaddiagram

Railroaddiagrammen, ook wel syntaxisdiagrammen genoemd, beschrijven een grammatica als een stelsel van sporen. Een reguliere expressie is precies zo’n grammatica, dus de tekening toont de structuur veel beter dan een compacte regel symbolen:

• Blauwe vakken zijn letterlijke tekst die precies zo moet voorkomen, bijvoorbeeld “@”.
• Groene vakken zijn tekentypen (\d cijfer, \w woordteken, . elk teken…) en tekenklassen. Een klasse zoals [\w.+-] wordt een vak met de kop “een van” en een lijst van alle elementen; een uitgesloten klasse [^…] is rood en heeft de kop “geen van”.
• Paarse pillen zijn ankers en grenzen: begin en einde van de tekst of regel, \b woordgrens. Ze matchen een positie, geen teken.
• Oranje gestippelde vakken zijn terugverwijzingen zoals \1 of \k<name>: dezelfde tekst als een groep die eerder is gematcht.
• Gestippelde kaders zijn groepen. Vangende groepen zijn genummerd in de volgorde van hun openingshaakje (“groep #2 “domain””); niet-vangende groepen (?:…) krijgen geen kader. Lookaheads en lookbehinds krijgen een roze kader met het label “gevolgd door” of “voorafgegaan door”, omdat ze de tekst controleren zonder hem te verbruiken.
• Parallelle sporen zijn alternatieven, gescheiden door |.
• Met een spoor boven een element kun je het overslaan (?, *, {0,n}). Een spoor eronder met een pijl loopt terug om het te herhalen (+, *, {n,m}). Andere aantallen dan de gebruikelijke staan onder de lus, zoals “2 tot 5 keer”, en luie kwantoren (+?, *?) krijgen het label “lazy”.

Foutmeldingen met positie

Het patroon wordt gecontroleerd door de eigen JavaScript-regexengine van je browser, dus wat deze tool accepteert, is precies wat new RegExp() met dezelfde flags accepteert. Weigert de engine het patroon, dan wijst de tool het foute teken aan met de positie en een dakje onder het patroon. De tool herkent een ) zonder partner, een groep die nooit wordt gesloten, een tekenklasse zonder ], een kwantor zonder iets om te herhalen (*a, a|+), een losse backslash aan het einde en {n,m}-kwantoren waarbij n groter is dan m. Andere fouten, zoals een terugverwijzing naar een groepsnaam die niet bestaat, worden getoond met de melding van de browser (die vaak in het Engels is).

De expressie wordt alleen gecompileerd om haar te valideren: ze wordt nooit op tekst uitgevoerd en er verlaat niets je browser.