Wizualizacja wyrażeń regularnych (diagram)

Jak zwizualizować wyrażenie regularne

1. Wpisz lub wklej wzorzec w pole Wyrażenie regularne. Możesz też wkleić cały literał JavaScript, np. /^\d{3}-\d{4}$/gm: ukośniki zostaną usunięte, a flagi automatycznie trafią do pola flag.
2. Dodaj flagi, jeśli ich potrzebujesz (dowolne z d g i m s u v y). Flagi zmieniają sposób rysowania niektórych elementów: z m znaki ^ i $ stają się „początkiem linii” i „końcem linii”, a z s kropka oznacza „dowolny znak”.
3. Diagram aktualizuje się podczas pisania. Rysuj diagram odświeża go na żądanie, a Następny przykład przełącza między kilkoma typowymi wzorcami (e-mail, numer telefonu, kolor hex, cena, znacznik HTML, URL).
4. Czytaj diagram od lewej do prawej, od pełnej kropki do kropki z obwódką. Każda ścieżka, którą da się przejść, to ciąg znaków, który wzorzec może dopasować.
5. Użyj Pobierz SVG, aby dostać ostrą grafikę wektorową (dokumentacja, slajdy), Pobierz PNG, aby dostać obraz w podwójnej rozdzielczości, albo Kopiuj kod SVG, aby wkleić znaczniki na stronę internetową.

Najedź kursorem na prostokąt, aby zobaczyć, z której części wzorca pochodzi i na jakiej jest pozycji.

Jak czytać diagram kolejowy

Diagramy kolejowe (railroad diagrams), zwane też diagramami składni, opisują gramatykę jako układ torów. Wyrażenie regularne jest właśnie taką gramatyką, więc rysunek pokazuje jego strukturę dużo lepiej niż gęsta linijka symboli:

• Niebieskie prostokąty to dosłowny tekst, który musi wystąpić dokładnie tak, jak zapisano, np. „@”.
• Zielone prostokąty to typy znaków (\d cyfra, \w znak słowa, . dowolny znak…) i klasy znaków. Klasa taka jak [\w.+-] staje się prostokątem z nagłówkiem „jeden z” i listą elementów; klasa zanegowana [^…] jest czerwona i ma nagłówek „żaden z”.
• Fioletowe pigułki to kotwice i granice: początek i koniec tekstu lub linii, granica słowa \b. Dopasowują pozycję, a nie znak.
• Pomarańczowe przerywane prostokąty to odwołania wsteczne, np. \1 lub \k<name>: ten sam tekst, który wcześniej dopasowała grupa.
• Przerywane ramki to grupy. Grupy przechwytujące są numerowane w kolejności nawiasów otwierających („grupa #2 „domain””); grupy nieprzechwytujące (?:…) nie mają ramki. Lookahead i lookbehind dostają różową ramkę z etykietą „za nim jest” lub „przed nim jest”, bo sprawdzają tekst, nie konsumując go.
• Równoległe tory to alternatywy rozdzielone |.
• Tor nad elementem pozwala go pominąć (?, *, {0,n}). Tor pod nim ze strzałką wraca, aby go powtórzyć (+, *, {n,m}). Nietypowe liczby powtórzeń są podpisane pod pętlą, np. „od 2 do 5×”, a kwantyfikatory leniwe (+?, *?) mają oznaczenie „leniwy”.

Komunikaty o błędach z pozycją

Wzorzec sprawdza silnik wyrażeń regularnych JavaScriptu wbudowany w twoją przeglądarkę, więc narzędzie akceptuje dokładnie to, co new RegExp() z tymi samymi flagami. Gdy silnik odrzuca wzorzec, narzędzie wskazuje problematyczny znak, podaje jego pozycję i pokazuje pod wzorcem znaczek ^. Rozpoznaje niesparowany ), niezamkniętą grupę, klasę znaków bez ], kwantyfikator bez elementu do powtórzenia (*a, a|+), samotny ukośnik wsteczny na końcu oraz kwantyfikatory {n,m}, w których n jest większe od m. Inne błędy, np. odwołanie do nieistniejącej nazwy grupy, są pokazywane z komunikatem przeglądarki.

Wyrażenie jest kompilowane tylko po to, aby je zweryfikować: nigdy nie jest uruchamiane na żadnym tekście i nic nie opuszcza twojej przeglądarki.