Wyrażenia regularne RegExp w JavaScript wielokrotnie ułatwią nam codzienną pracę. Od sprawdzania zapisu kodów pocztowych po wyszukiwanie adresów mailowych do znajdowania numerów telefonów lub sprawdzania poprawności wprowadzonego przez użytkownika hasła.

Flagi w wyrażeniu RegExp:

i – ignore case [wyszukiwane są zarówno duże jak i małe litery pasujące do wzorca]
g – global [przy braku tej flagi wyszukiwane jest jedynie piersze trafienie]
m – multiline [wyszukiwanie osobno we wszystkich liniach]

Podstawowe znaczniki:

. znajduje pojedynczy znak
[abc] – znajduje osobno każdy znak wskazany w nawiasie
[^abc] – znajduje osobno każdy znak, z wyłączenie tych wskazanych w nawiasach
[0-9] – znajduje osobno każdą cyfrę (0-9 oznacza każda cyfra, nie uwzględniając myślnika)
[^0-9] – znajduje osobno każdy znak z wyłączeniem wskazanych w nawiasie
(abc|cde) – znajduje oba wskazane znaki lub ciągi
\s – wskazuje każdy znak typu whitespace: „space”, „tab \t”, „new line \n”, „return \r”
\S – wskazuje każdy znak, który nie jest jednym ze znaków whitespace
\b – wskazuje każdy znak, słowo rozpoczynające albo kończące słowo
\B – wskazuje każdy znak, słowo nie rozpoczynające oraz kończące słowa
\w – wskazuje każdy znak będący literą
\W – wskazuje każdy znak niebędący literą
\d – wskazuje każdy znak będący cyfrą
\D – wskazuje każdy znak niebędący cyfrą
\1 – powtórzenie tego co znalezione zostało w grupie #1
\. – znak kropka
\* – znak gwiazdka
\\ – znak ukośnik (backslash)

x+ – wskazuje znak lub ciąg zawierający przynajmniej jedno trafienie
x* – wskazuje znak lub ciąg zawierający zero trafień lub więcej (przy pojednyczym znaku wskazuje nieskończoność)
x? – wskazuje znak lub ciąg zawierający zero trafień lub jedno trafienie
x{a} – wskazuje znak lub ciąg zawierający a wystąpień x
x{a,b} – wskazuje znak lub ciąg zawierający od a do b wystąpień x
x{a,} – wskazuje sekwencję przynajmniej a wystapień x
x$ – wskazuje trafienie tylko na końcu wyrazu
^x – wskazuje trafienie tylko na początku wyrazu
x(?=y) – wskazuje trafienie x, jeżeli znajduje się ono przed y
x(?!y) – wskazuje trafienie x, jeżeli nie znajduje się ono przed y

Przykłady:

Łącząc powyższe metody RegExp możemy uzyskać niemal każde trafienie:

1) Zadanie: zaznaczać nazwę użytkownika znajdująca się przed @

Rozwiązanie: \S+(?=@)
Opis: zaznaczone zostaną wszystkie znaki przed @, połączone są 3 znaczniki: \S; x+; x(?=y)

2) Zadanie: zaznacz dowolny zewnętrzny tag html np. script w: <script><p></p></script>

Rozwiązanie: <([\S]+).*>.*<\/\1>
Opis: zaznaczone dowolne znaki pomiędzy <>, dowolne pomiędzy >< oraz odwołanie do grupy #1 w rezultacie przykładowe wyrażenie <script><p></p></script> zostanie w całości zaznaczone

3) Zadanie: zaznacz numer telefonu 9-cyfrowy z przedrostkiem np. +48 510 100 100

Rozwiązanie: \+\d{1,3} \d{3} \d{3} \d{3}
Opis: pierwszym znakiem jest + po nim pojawia się 1,2 lub 3 cyfry numeru kierunkowego i 9 cyfr oddzielonych spacjami po 3 cyfry

4) Zadanie: wyszukaj adresy http, https, ftp

Rozwiązanie: (http|https|ftp):\/\/.*
Opis: wyszukiwany jest jeden z trzech przedrostków http|https|ftp po nim :\\ i dalej dowolna liczba różnych znaków. Sytuacja skomplikowała by się, gdyby link znajdował się wewnątrz tekstu, jednak tutaj rozpatrywana była łatwiejsza wersja.

Na zakończenia jeszcze fragment kodu, w który widać jak wykorzystać wyrażenia regularne w JavaScrypt i jest to kolejna możliwość rozwiązania pierwszego zadania:

var regex = /.*(?=@)/ig;
var intext = "przykladowy.email@wp.pl";
var temp = intext.match(regex);
console.log(temp);