Articles
Wprowadzenie do JavaScript
Obiekt `RegExp`

Obiekt `RegExp`

Ten artykuł wyjaśnia obiekt RegExp.

Objaśnimy obiekt RegExp na praktycznych przykładach.

YouTube Video

Obiekt RegExp

Czym jest RegExp?

RegExp (wyrażenie regularne) to obiekt używany do reprezentowania wzorców tekstu. W przeciwieństwie do prostych porównań znaków, możesz elastycznie definiować 'łańcuchy znaków spełniające określone warunki.'.

Używając obiektu RegExp, możesz w sposób zwięzły i przejrzysty wykonywać takie operacje jak wyszukiwanie, walidacja, wyodrębnianie i zamiana łańcuchów znaków. Jest to bardzo skuteczne w codziennych zadaniach, takich jak walidacja danych w formularzach, analiza logów, czy formatowanie tekstu. Poniżej znajdują się proste przykłady wyrażeń regularnych.

1const pattern = /abc/;
  • To wyrażenie regularne sprawdza, czy ciąg 'abc' jest zawarty w tekście.

Jak tworzyć wyrażenia regularne (dwie metody)

Istnieją dwa typy składni RegExp: zapis literalny oraz zapis konstruktora.

1// Literal notation: pattern and flags are written together
2const literal         = /hello/;
3const literalWithFlag = /hello/i;
4const literalDigits   = /\d+/;
5
6// Constructor notation: pattern and flags are passed separately
7const constructor         = new RegExp("hello");
8const constructorWithFlag = new RegExp("hello", "i");
9const constructorDigits   = new RegExp("\\d+");
  • Notacja dosłowna jest zwięzła i czytelna, co sprawia, że nadaje się do wyrażeń regularnych używanych jako stałe.. Z drugiej strony, notacji konstruktora używa się, gdy chcesz zbudować wzorzec przy pomocy zmiennych lub określić jego zawartość w czasie wykonywania.
  • Za pomocą notacji dosłownej możesz intuicyjnie opisać zarówno wyrażenie regularne, jak i jego flagi razem. Natomiast w notacji konstruktora musisz osobno określić wzorzec i flagi.
  • Dodatkowo, w notacji konstruktora przekazujesz wyrażenie regularne jako ciąg znaków, więc ukośniki muszą być poprzedzone znakiem ucieczki podwójnie.

test(): Najprostsza walidacja

Obiekt RegExp udostępnia metody do wykonywania operacji i ocen z użyciem wyrażeń regularnych. test() to metoda, która zwraca wartość logiczną informującą, czy wzorzec pasuje.

1const regex = /JavaScript/;
2
3console.log(regex.test("I love JavaScript")); // true
4console.log(regex.test("I love TypeScript")); // false
  • To pierwsza metoda, której warto się nauczyć – idealna do warunkowego rozgałęziania lub walidacji danych wejściowych.

match(): Otrzymaj wynik dopasowania

match() zwraca tablicę zawierającą dopasowany tekst oraz szczegółowe informacje.

1const text = "Version 1.2.3";
2const result = text.match(/\d+\.\d+\.\d+/);
3
4console.log(result[0]); // "1.2.3"
  • match() jest wygodniejsze niż test() w przypadku wyodrębniania i analizowania danych.

replace(): Zamiana przy użyciu wyrażeń regularnych

replace() zamienia dopasowane fragmenty na inny tekst.

1const text = "Hello   World";
2const result = text.replace(/\s+/g, " ");
3
4console.log(result); // "Hello World"
  • Możesz go użyć do formatowania logów lub normalizacji niepotrzebnych białych znaków.

Podstawowe flagi (g, i, m)

W wyrażeniach regularnych możesz określić 'flagi'. Flagi to opcje kontrolujące sposób, w jaki wyrażenie regularne przetwarza łańcuchy znaków zgodnie z określonymi zasadami. Nawet przy tym samym wzorcu, wyniki mogą się różnić w zależności od flag.

1const text = "apple Apple APPLE";
2const regex = /apple/gi;        // or new RegExp("apple", "gi");
3
4console.log(text.match(regex)); // ["apple", "Apple", "APPLE"]
  • Flaga g (globalna) przeszukuje cały łańcuch znaków.
  • Flaga i (ignoruj wielkość liter) pomija różnice w wielkości liter podczas dopasowania.
1const multilineText = `apple
2banana
3apple`;
4
5const regexM = /^apple/gm;
6
7console.log(multilineText.match(regexM)); // ["apple", "apple"]
  • Flaga m (wieloliniowa) jest używana do traktowania wieloliniowych łańcuchów znaków osobno dla każdej linii. Dzięki temu, ^ i $ działają w oparciu o początek i koniec każdej linii, a nie całego łańcucha znaków.

Klasy znaków: Łączenie różnych możliwości

Używając nawiasów kwadratowych [], można zdefiniować zestaw możliwych znaków dla jednej pozycji.

1const regex = /gr[ae]y/;
2
3console.log(regex.test("gray")); // true
4console.log(regex.test("grey")); // true
  • To przydatne przy obsłudze różnych alternatyw i wariantów pisowni.

Metaznaki: Popularne skróty

Metaznaki to symbole, które pozwalają zapisywać często używane wzorce w krótszej formie.

1const regex = /\d{4}-\d{2}-\d{2}/;  // or new RegExp("\\d{4}-\\d{2}-\\d{2}");
2
3console.log(regex.test("2025-12-29")); // true
  • \d oznacza cyfrę, a {n} określa liczbę powtórzeń.

^ i $: Walidacja całego ciągu

^ i $ oznaczają odpowiednio początek i koniec ciągu.

1const regex = /^\d+$/;
2
3console.log(regex.test("123"));   // true
4console.log(regex.test("123a"));  // false
  • Są ważne, gdy wymagane jest dokładne dopasowanie, na przykład w polach formularzy.

Grupowanie i przechwytywanie

Używając nawiasów (), możesz wyodrębnić częściowe wartości.

1const text = "2025/12/29";
2const regex = /(\d{4})\/(\d{2})\/(\d{2})/;
3const [, year, month, day] = text.match(regex);
4
5console.log(year, month, day); // 2025 12 29
  • Często stosowane do rozbijania dat czy uporządkowanych ciągów.

Typowe błędy i uwagi

Wyrażenia regularne są potężne, ale mają tendencję do stania się trudnymi do odczytania.

1// Hard to read
2const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+$/;
  • Jeśli wyrażenie stanie się zbyt złożone, możesz rozważyć dodanie komentarzy, podzielenie wyrażenia lub poprawienie samego procesu.

Podsumowanie

RegExp to niezbędna, podstawowa funkcjonalność JavaScript do prostego i precyzyjnego opisywania przetwarzania tekstu. Nie musisz od razu uczyć się złożonych wyrażeń regularnych – ważne, by stosować podstawowe metody i składnię, takie jak test, match oraz replace w zależności od praktycznych potrzeb. Jeśli potraktujesz wyrażenia regularne nie jako 'specjalistyczną wiedzę', ale jako 'narzędzia do uporządkowanego opisywania wzorców', znacznie poprawisz jakość i czytelność walidacji danych wejściowych i przetwarzania tekstu.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

`Date` Obiekt