Regex w JavaScript - Praktyczne przykłady i szybkie porady

Jak działa dopasowanie wzorca w praktyce

Najprościej mówiąc, regex porównuje tekst z opisem tego, jak ten tekst ma wyglądać. Zamiast sprawdzać pojedyncze litery ręcznie, opisujesz regułę: „to ma być data”, „to ma być numer telefonu”, „to ma być slug URL” albo „to ma być fragment z cyframi pośrodku”. Właśnie dlatego wyrażenia regularne są tak użyteczne w formularzach, filtrach, logach i narzędziach do czyszczenia danych.

Ja zwykle dzielę zastosowania regexów na trzy grupy: walidację, wyszukiwanie i zamianę. Walidacja odpowiada na pytanie, czy cały ciąg pasuje do wzorca. Wyszukiwanie wyciąga tylko interesujący fragment z dłuższego tekstu. Zamiana pozwala usunąć znaki, ujednolicić zapis albo przerobić dane do innego formatu.

Ważne jest też to, że regex nie zawsze musi być pierwszym wyborem. Jeśli chcesz tylko sprawdzić, czy string zaczyna się od konkretnego prefiksu, często wystarczy startsWith(). Jeśli szukasz jednego, prostego fragmentu, includes() bywa czytelniejsze. Regex ma sens wtedy, gdy tekst ma strukturę, a nie tylko pojedynczą, stałą wartość. Z takiego podejścia najłatwiej przejść do znaków, które budują sam wzorzec.

Najważniejsze symbole, od których warto zacząć

Jeśli ktoś ma nauczyć się tylko kilku elementów na początek, ja zawsze stawiam na zestaw podstawowy. To właśnie on pojawia się w większości codziennych wzorców i daje największy efekt przy najmniejszym nakładzie nauki.

Jeśli pracujesz z tekstem po polsku, jedna rzecz potrafi zaskoczyć: skróty typu \w i \b nie zawsze są wystarczające do pełnej obsługi Unicode. W nowoczesnym JavaScript często lepiej sprawdzają się klasy Unicode, na przykład \p{L} z flagą u, gdy chcesz dopasować litery także z diakrytykami. To drobiazg, ale w praktyce robi dużą różnicę przy nazwach, tytułach i danych użytkowników. Gdy już masz te symbole pod ręką, najłatwiej przejść do wzorców, które można od razu wkleić do projektu.

Przykłady, które najczęściej przydają się w projektach

To jest ta część, po którą większość osób sięga najczęściej. Nie chodzi o teorię, tylko o wzorce, które można wykorzystać w formularzu, skrypcie czyszczącym dane albo filtrze wyszukiwania. Poniżej pokazuję przykłady z krótkim komentarzem, bo sam regex bez kontekstu bywa mylący.

Wzorce z tej tabeli nie są „magiczne” i właśnie dlatego są dobre. Każdy z nich rozwiązuje konkretny problem, a nie próbuje udawać uniwersalnego walidatora wszystkiego. Jeśli mam wskazać jedną zasadę, która oszczędza najwięcej czasu, to brzmi ona tak: zawsze testuj regex na prawdziwych danych, nie tylko na idealnym przykładzie. Następny krok to sprawdzenie, jak te wzorce zachowują się w kodzie JavaScript.

Jak testować regex w JavaScript bez zgadywania

W JavaScript najczęściej zaczynam od literału, czyli zapisu w formie /.... Gdy wzorzec ma być dynamiczny, używam konstruktora new RegExp(). To ważne, bo przy konstruktorze trzeba pamiętać o podwójnym escapowaniu znaków specjalnych wewnątrz stringa.

const datePattern = /^\d{2}-\d{2}-\d{4}$/;
console.log(datePattern.test("12-06-2026")); // true
console.log(datePattern.test("12/06/2026")); // false

const phonePattern = new RegExp("^\\+48[\\s-]?\\d{3}[\\s-]?\\d{3}[\\s-]?\\d{3}$");
console.log(phonePattern.test("+48 123 456 789")); // true

Jeśli chcę tylko odpowiedzi „tak” albo „nie”, wybieram test(). To najczytelniejsza opcja przy walidacji formularza. Gdy potrzebuję samego dopasowania albo fragmentów przechwyconych w grupach, sięgam po match() albo exec(). W praktyce różnica ma znaczenie, bo te metody nie zwracają tego samego.

const text = "Kod produktu: AB-4821";
const result = text.match(/([A-Z]{2})-(\d{4})/);

if (result) {
  console.log(result[1]); // AB
  console.log(result[2]); // 4821
}

const cleaned = "  Ala    ma   kota  ".replace(/\s+/g, " ").trim();
console.log(cleaned); // "Ala ma kota"

W tym przykładzie widać dwie rzeczy, które w praktyce robią największą różnicę. Po pierwsze, grupy przechwytywania pozwalają wydobyć z tekstu dokładnie to, co potrzebne. Po drugie, flaga g przydaje się wtedy, gdy chcesz zamienić lub znaleźć wszystkie wystąpienia, a nie tylko pierwsze. Skoro wiadomo już, jak tego używać, warto zobaczyć, gdzie początkujący najczęściej wpadają w pułapkę.

Najczęstsze błędy, które psują dopasowanie

Regexy są krótkie, ale przez to łatwo ukryć w nich błąd, którego nie widać na pierwszy rzut oka. Ja najczęściej widzę te same problemy: wzorzec jest zbyt szeroki, za mało precyzyjny albo testowany tylko na jednym przykładzie.

• Brak kotwic ^ i $ sprawia, że wzorzec dopasowuje fragment, choć miał sprawdzać cały string. To częsty błąd przy walidacji loginów, kodów i dat.
• Zbyt dużo .* daje wynik, który „łyka” prawie wszystko. To wygodne, ale szybko robi się nieczytelne i trudne do kontrolowania.
• Zapomniane escapowanie znaków specjalnych psuje dopasowanie kropki, nawiasów, plusa czy pytajnika. Jeśli znak ma znaczenie w regexie, a ma być literalny, trzeba go uciec.
• Mylenie match() z flagą g prowadzi do zaskoczeń, bo przy globalnym dopasowaniu grupy przechwytywania nie zachowują się tak, jak wielu osobom się wydaje.
• Traktowanie regexu jak parsera HTML lub JSON to zły kierunek. Wzorzec może pomóc przy prostym filtrowaniu, ale nie zastąpi narzędzia do właściwego parsowania struktury.
• Ignorowanie Unicode i polskich znaków powoduje błędy przy nazwach, opisach i danych użytkowników. W projektach dla polskiego rynku to nie jest detal, tylko realny warunek poprawnego działania.

Dobry nawyk jest prosty: zanim uznasz wzorzec za gotowy, sprawdź go na kilku wersjach danych, także błędnych. W praktyce testuję zawsze przypadki graniczne, bo właśnie one pokazują, czy regex jest naprawdę użyteczny, czy tylko wygląda dobrze w edytorze. Z tego punktu już blisko do ostatniej rzeczy, która odróżnia wzorzec pomocny od wzorca, który za pół roku nikt nie będzie chciał dotykać.

Jak pisać wzorce, które da się utrzymać po miesiącu

Najlepszy regex to nie ten najbardziej efektowny, tylko ten, który da się zrozumieć po czasie. W projektach webowych wracam do tej zasady bardzo często, bo wzorce zwykle żyją dłużej niż pojedynczy komponent czy formularz.

• Zaczynaj od najprostszej wersji wzorca i dopiero potem dodawaj kolejne warunki.
• Testuj na prawdziwych przykładach wejścia, a nie tylko na jednym „ładnym” stringu.
• Jeśli wzorzec robi się długi, dodaj komentarz albo rozbij go na czytelne fragmenty.
• Nie waliduj regexem tego, co lepiej sprawdzi zwykła logika aplikacji lub parser.
• Przy danych użytkownika pamiętaj o Unicode, bo polskie litery i znaki diakrytyczne potrafią zmienić wynik.
• Jeśli regex ma być używany wielokrotnie, trzymaj go w jednym miejscu, zamiast kopiować identyczny zapis w kilku plikach.

Na start wystarczy kilka dobrze opanowanych symboli, pięć czy sześć praktycznych wzorców i nawyk testowania ich na realnych danych. Reszta przychodzi naturalnie, gdy zaczynasz widzieć w tekście strukturę, a nie tylko ciąg znaków. Właśnie wtedy regex przestaje być tajemniczym skrótem, a staje się normalnym narzędziem pracy, które naprawdę pomaga w kodzie.