Jak działa regex w twojej przeglądarce?
Każde środowisko uruchomieniowe JavaScript zawiera natywny silnik wyrażeń regularnych — new RegExp(pattern, flags) kompiluje twój wzorzec, a metody takie jak String.prototype.match, String.prototype.replace i RegExp.prototype.exec uruchamiają go na dowolnym łańcuchu wejściowym. Ten tester opakowuje ten silnik w interfejs, dzięki któremu możesz edytować, uruchamiać i analizować wzorce bez opuszczania przeglądarki. Nic, co wpiszesz — wzorzec, flagi, łańcuch testowy czy podmiana — nie jest wysyłane przez sieć.
Jak działa tester regex?
Pipeline to kilka krótkich kroków, które wszystkie wykonują się po stronie klienta przy każdym naciśnięciu klawisza (z debouncingiem 150 ms, aby pisanie pozostało płynne):
- Treść twojego wzorca jest czytana z pola powyżej (bez ograniczników
/na początku ani na końcu — to tylko ozdoba). Wybrane flagi są łączone w łańcuch flag, np.gilubgimsuy. new RegExp(patternBody, flags)kompiluje wzorzec. Jeśli silnik rzuciSyntaxError(np. niesparowany nawias lub nieprawidłowy escape), komunikat jest wyświetlany nad łańcuchem testowym, a lista dopasowań czyszczona. Błąd kompilacji to faktycznyerr.messagez V8 / SpiderMonkey / JavaScriptCore, więc pasuje do tego, co zobaczysz w DevTools.- Dla listy dopasowań tester zawsze enumeruje z syntetyczną flagą global — więc nawet jeśli wyłączysz
g, lista nadal pokazuje każde dopasowanie. Standardowa ochrona przed dopasowaniami o zerowej szerokości (if (m.index === rx.lastIndex) rx.lastIndex++) chroni pętlę przed zapętleniem na wzorcach pasujących do pustego łańcucha. Tryb podmiany honoruje twój faktyczny zestaw flag, więc$&zachowuje się tak samo jakString.prototype.replace. - Pomiędzy każdą iteracją tester sprawdza
performance.now() - starti przerywa, gdy minie 50 ms. Chroni to przed katastrofalnym backtrackingiem na wejściach typu(a+)+$wobec długiej seriia— w przeciwnym razie karta by się zawiesiła. Ochrona działa najlepiej jak potrafi: patologiczny wzorzec o pojedynczym dopasowaniu może nadal pochłaniać czas w jednym wywołaniuexec. Jeśli tak się stanie, odśwież kartę i przepisz wzorzec z kwantyfikatorem niezachłannym lub stylem atomowo-zaborczym (np.[^x]*x). - Łańcuch testowy jest dzielony na segmenty w zakresie każdego dopasowania, a pasujące segmenty są opakowywane w elementy
<mark class="rx-match rx-cap-N">, gdzieNcyklicznie obraca sześć kolorów palety, aby sąsiadujące dopasowania były łatwe do rozróżnienia na pierwszy rzut oka. Numerowane grupy (m[1],m[2], …) i grupy nazwane (m.groups) każdego dopasowania są pokazywane jako etykietowane wiersze poniżej; jeśli flagadjest aktywna, wyświetlane są również indeksy[start, end]dla każdej grupy.
Dlaczego korzystać z tego testera regex?
- Prywatność: każdy wzorzec, łańcuch testowy i podmiana działają w twojej przeglądarce, używając wbudowanego silnika JavaScript RegExp. Nic nie opuszcza karty — ważne, gdy wejście to log klienta, wyciekły wzorzec poświadczeń lub cokolwiek innego, czego nie wkleiłbyś do hostowanej piaskownicy regex w SaaS.
- Uczciwy smak: tester eksponuje dokładnie ten silnik regex, który uruchamiają Node.js, Chrome, Safari, Firefox i każdy walidator formularzy w przeglądarce. Nie ma warstwy tłumaczącej do smaku Perla, która ukrywałaby subtelne różnice — to, co działa tu, działa w twoim kodzie.
- Debugowanie grup przechwytujących i nazwanych: każda numerowana grupa (
$1,$2, …) i grupa nazwana ($<year>) jest pokazana dla każdego dopasowania, więc możesz zbudować parser i odczytać sloty bez zgadywania. Tryb podmiany pozwala swobodnie łączyć grupy —$2-$1zamienia dwa pierwsze sloty,$<name>wstawia nazwany slot, a$&powiela całe dopasowanie. - Ochrona przed katastrofalnym backtrackingiem: pułap 50 ms na enumeracji przerywa patologiczne wzorce typu
(a+)+$, zanim zawieszą kartę. Widzisz wyjaśniający komunikat zamiast zawieszonej przeglądarki, a strona natychmiast się przywraca.
Jakie są typowe zastosowania testera regex?
Wyrażenia regularne pojawiają się w programowaniu webowym, bezpieczeństwie i pracy z danymi — ten tester celuje w najczęstsze przypadki użycia:
- Walidacja formularzy: zaprototypuj wzorzec adresu e-mail, telefonu lub kodu pocztowego, wklej przykładowe wejścia do łańcucha testowego i potwierdź, że każdy przypadek pozytywny pasuje, a każdy negatywny nie, zanim wyślesz wzorzec do kodu produkcyjnego.
- Scrapowanie logów: wklej fragment wyjścia NGINX, aplikacyjnego lub audytu, napisz wzorzec z grupami nazwanymi dla części, na których ci zależy (
(?<ip>…) (?<path>…)) i czytaj przechwycone sloty dla każdego dopasowania, aby potwierdzić poprawność parsera. - Wyszukaj-i-zamień do refaktoryzacji: użyj trybu podmiany, by przepisać identyfikatory w fragmencie kodu —
(\w+)\.set(\w+)\(→$1.$2 =zmienia wywołania setterów w przypisania właściwości, a podgląd na żywo pokazuje wynik, zanim wprowadzisz go w codemodzie.
Jak wygląda przykład regex?
Weź wzorzec (\d{4})-(\d{2})-(\d{2}) z flagą g, uruchomiony na łańcuchu testowym release 2025-11-15, prerelease 2026-05-25. Silnik znajduje dwa dopasowania. Pierwsze to 2025-11-15 z grupą 1 = 2025, grupą 2 = 11, grupą 3 = 15. Drugie to 2026-05-25 z tym samym kształtem grup. W trybie podmiany szablon $3/$2/$1 przepisuje obie daty na 15/11/2025 i 25/05/2026 — konwersja ISO → DMY jednym wzorcem, którą możesz sprawdzić wizualnie przed podpięciem wzorca do skryptu.
Używaj tego testera jako szybkiej ścieżki dla każdej pracy z regex — budowania, debugowania czy przepisywania wzorców. Wszystko działa lokalnie; nic nie jest logowane; silnik regex to ten, który dostarcza twoja przeglądarka, więc zachowanie pasuje do tego, co kod produkcyjny zobaczy w czasie działania.