Regex-visualiserare

Så visualiserar du ett reguljärt uttryck

1. Skriv eller klistra in ditt mönster i Reguljärt uttryck. Du kan också klistra in en hel JavaScript-literal som /^\d{3}-\d{4}$/gm: snedstrecken tas bort och flaggorna flyttas automatiskt till flaggrutan.
2. Lägg till flaggor om du behöver dem (valfria av d g i m s u v y). Flaggorna ändrar hur vissa delar ritas: med m blir ^ och $ ”radens början” och ”radens slut”, och med s blir punkten ”valfritt tecken”.
3. Diagrammet uppdateras medan du skriver. Rita diagram ritar om det vid behov, och Nästa exempel bläddrar mellan några vanliga mönster (e-post, telefonnummer, hexfärg, pris, HTML-tagg, URL).
4. Läs diagrammet från vänster till höger, från den fyllda pricken till pricken med ring. Varje väg du kan följa motsvarar en sträng som mönstret kan matcha.
5. Använd Ladda ner SVG för en skarp vektorbild (dokumentation, presentationer), Ladda ner PNG för en bild i dubbel upplösning eller Kopiera SVG-kod för att klistra in koden på en webbsida.

Håll muspekaren över en ruta för att se vilken del av mönstret den kommer från och dess position.

Så läser du ett järnvägsdiagram

Järnvägsdiagram (railroad diagrams), även kallade syntaxdiagram, beskriver en grammatik som ett nät av spår. Ett reguljärt uttryck är just en sådan grammatik, så ritningen visar strukturen mycket bättre än en kompakt rad med symboler:

• Blå rutor är literal text som måste förekomma exakt som den står, till exempel ”@”.
• Gröna rutor är teckentyper (\d siffra, \w ordtecken, . valfritt tecken …) och teckenklasser. En klass som [\w.+-] blir en ruta med rubriken ”ett av” som listar varje element. En negerad klass [^…] är röd och har rubriken ”inget av”.
• Lila piller är ankare och gränser: början och slut på text eller rad, \b ordgräns. De matchar en position, inte ett tecken.
• Orange streckade rutor är bakåtreferenser som \1 eller \k<name>: samma text som en grupp har matchat tidigare.
• Streckade ramar är grupper. Fångande grupper numreras i den ordning deras vänsterparentes står (”grupp #2 ”domain””), medan icke-fångande grupper (?:…) inte får någon ram. Lookahead och lookbehind får en rosa ram märkt ”följs av” eller ”föregås av”, eftersom de kontrollerar texten utan att förbruka den.
• Parallella spår är alternativ åtskilda av |.
• Ett spår ovanför ett element låter dig hoppa över det (?, *, {0,n}). Ett spår under med en pil går tillbaka för att upprepa det (+, *, {n,m}). Andra antal än de vanliga skrivs under loopen, till exempel ”2 till 5 gånger”, och lata kvantifierare (+?, *?) märks med ”lat”.

Felmeddelanden med position

Mönstret kontrolleras av webbläsarens egen motor för reguljära uttryck i JavaScript, så det verktyget godtar är exakt det som new RegExp() godtar med samma flaggor. När motorn avvisar mönstret pekar verktyget ut det felande tecknet med dess position och en markör under mönstret. Det känner igen en ) utan motsvarighet, en grupp som aldrig stängs, en teckenklass som saknar ], en kvantifierare utan något att upprepa (*a, a|+), ett ensamt omvänt snedstreck i slutet och kvantifierare {n,m} där n är större än m. Andra fel, som en bakåtreferens till ett gruppnamn som inte finns, visas med webbläsarens eget meddelande.

Uttrycket kompileras bara för att valideras: det körs aldrig mot någon text, och inget lämnar din webbläsare.