Wyrażenia regularne w JavaScript

Podczas tworzenia strony internetowej zdarza się, że potrzebujemy sprawdzić dane wprowadzone przez użytkownika lub wyszukać element spośród wielu dostępnych. Wtedy z pomocą przychodzą nam wyrażenia regularne. Dzisiaj postaram się przedstawić możliwie zwięźle przydatne wyrażenia regularne, które można wykorzystać podczas walidacji danych przesyłanych od użytkownika poprzez formularz.

Co to są wyrażenia regularne?

Wyrażenia regularne, tzw. RegEx, są to wzorce, dzięki którym sprawdzimy lub wyszukamy pasujące do nich fragmenty znaków. Są one często wykorzystywane do celów walidacji, takich jak sprawdzanie poprawności adresu e-mail, poprawności adresu URL, numeru telefonu czy kodu pocztowego.

Składnia wyrażeń regularnych

Samo wyrażenie regularne zapisuje się pomiędzy dwoma ukośnikami „/”. Przykładowo: /string/i – oznacza to, że będziemy szukać w naszym tekście ciągu znaków „string”.

Na ogół wykorzystuje się dwie podstawowe flagi, które odpowiednio dopasują nam wyniki wyszukiwań – flaga „i” oraz flaga „g”.

• i – flaga oznacza, iż w szukanej frazie ma być ignorowana wielkość znaków,
• g – flaga oznacza, że szukanie nie zakończy się po pierwszym wystąpieniu, lecz będzie kontynuowane dla kolejnych wystąpień.

Jak tego używać w JavaScript?

Do implementacji wyrażeń regularnych w JS potrzebne będą nam dwie funkcje:

• .test()
• .match()

Funkcja .test() oczywiście sprawdzi nam, czy dane wyrażenie wpasuje się w dany tekst. Zwracana jest wartość true/false.
Przykład 1: /tekst/.test("fragment tekstu") -> true
Przykład 2: /text/.test("fragment tekstu") -> false

Funkcja .match() działa podobne, jednak zwróci nam już konkretne wystąpienia w formie tablicy.
Przykład: "przykład PrzyKład PrZyKłaD".match(/przykład/gi) -> [„przykład”, „PrzyKład”, „PrZyKłaD”]

Więcej przykładów 🙂

• wiele wzorców w jednym
  /tak|nie|chyba/
• jakikolwiek znak
  /.ak/ig -> ["tak", "pTak", "Wspak", "znAk"]
• wystąpienie znaku z podanych
  /[fbc]it/g -> ["fit", "bit", "cit"]
• negacja znaku
  "tama".match(/[^abc]/g) -> ["t", "m"]
• dopasowanie znaków występujących raz lub więcej razy
  "passa".match(/a+|s+/gi) -> ["a", "ss", "a"]
• znaki od a do z lub wielkie A do Z
  /[a-zA-Z]/.test("mamy kwiaty") -> true
  /[a-zA-Z]/.test("32") -> false
• określenie liczby znaków w wystąpieniu
  /hi{1,4}/.test("hi") -> true
  /hi{1,4}/.test("hiiii") -> true
  
• /hi{1,4}/.test("hu") -> false
• walidacja kodu pocztowego
  /^d{2}-d{3}$/.test("00-715") -> true
  /^d{2}-d{3}$/.test("000-71") -> false
• tylko cyfry – /d/
• wszystko oprócz cyfr – /D/
• litera, cyfra i znak podkreślenia – /w/
• wszystko inne niż litera, cyfra i znak podkreślenia – /W/
• spacja – /s/
• wszystko oprócz spacji – /S/

Podsumowanie

Jak widać na powyższych przykładach wykorzystanie wyrażeń regularnych jest bardzo pomocne. Wiele osób widząc dłuższe wyrażenia regularne łapie się za głowę, a wystarczy przyjrzeć się, by dostrzec wzorzec i go wykorzystać.