Kurs JavaScript - Wyrażenia regularne  

Autor: Mateusz Mikulski

Opublikowano: 2011-12-21

Typowym zadaniem, podczas tworzenia stron internetowych, jest potrzeba weryfikacji danych, wprowadzonych przez użytkownika, pod kątem pewnego, wcześniej przygotowanego wzorca. Do tego typu zadań możesz użyć wyrażeń regularnych, które dzięki pełnej elastyczności są bardzo dobrym narzędziem do sprawdzania i modyfikowania fragmentów tekstu.

W swojej aplikacji utworzysz skrypty, które, w oparciu o wyrażenia regularne, będą sprawdzały, czy użytkownik wprowadził dane zgodne z podanym wzorcem oraz zmieniał tekst w oparciu o wzorzec.

Przed wykonaniem zadań powinieneś wiedzieć:

• jak umieszczać skrypty,
• jak wyświetlić komunikat,
• jak tworzyć instrukcje warunkowe w języku JavaScript,
• jak pobierać dane od użytkownika

Po wykonaniu zadań nauczysz się:

• jak sprawdzać tekst z wykorzystaniem wyrażeń regularnych,
• jak zmieniać tekst z wykorzystaniem wyrażeń regularnych.

Implementacja

W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, zobacz Jak przygotować stronę samouczka JavaScript.

Twoim zadaniem będzie sprawdzenie, czy w polu tekstowym, znajdującym się na stronie, użytkownik wprowadził tekst zgodny z przygotowanym wzorcem. Następnie przygotujesz skrypt, zmieniający tekst na stronie, przy użyciu wyrażeń regularnych. Na koniec przygotujesz skrypt, rozdzielający adres WWW za pomocą atomów oraz referencji powrotnej.

Sprawdzanie tekstu pod kątem wystąpienia wzorca

Wyrażenia regularne w języku JavaScript obsługiwane są poprzez obiekt RegExp, który jest tworzony przy użyciu następującej konstrukcji:

RegExp(wyrażenie,flaga)

gdzie wyrażenie to wzorzec, zawierający metaznaki, natomiast flaga to argument opcjonalny, odpowiadający za sposób wyszukiwania wzorców.

Metaznaki to znaki o specjalnym znaczeniu. Wybrane metaznaki umieszczono w poniższej tabeli:

Metaznak	Opis
.	Znajdź pojedynczy znak za wyjątkiem znaku nowej linii
\d	Znajdź cyfrę
\D	Znajdź znak, który nie jestcyfrą
\n	Znajdź znak nowej linii
\s	Znajdź biały znak (spacja, tabulator, koniec linii)
\S	Znajdź znak, który nie jest białym znakiem
\w	Znajdź dowolną literę
\W	Znajdź znak, który nie jest literą

Do określania zakresu znaków w wyrażeniu, możesz wykorzystać nawiasy kwadratowe:

Wyrażenie	Opis
(raz|dwa|trzy)	Znajdź dowolny ciąg z wymienionych w nawiasie
[^abc]	Znajdź dowolny znak nie wymieniony w nawiasach
[0-9]	Znajdź dowolną cyfrę od 0 do 9
[abc]	Znajdź dowolny znak z nawiasów
[a-z]	Znajdź dowolny znak od a do z
[A-z]	Znajdź dowolny znak od a do z = \w

Wyróżniamy następujące flagi:

• i – wielkość liter nie będzie brana pod uwagę,
• g – zwrócone zostaną wszystkie elementy pasujące do wzorca,
• m – powoduje wyszukanie w trybie wielowierszowym,
• s – powoduje wyszukanie w trybie jednowierszowym.

Do sprawdzenia poprawności wpisanego tekstu, względem swojego wyrażenia, użyj metody:

reg.test(tekst)

Jeżeli tekst jest zgodny z wyrażeniem reg, metoda ta zwraca wartość true.

Przygotuj skrypt sprawdzający, czy tekst wpisany do pola tekstowego na stronie zaczyna się od liter „kre” i nie zawiera liter „w” lub „m” – określenie wzorca zostało dokonane poprzez odpowiednie metaznaki.

1. W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip.
2. Wciśnij przycisk F12 lub wybierz Tools–>F12 developer Tools.

Rys. 1. Narzędzia programistyczne do JavaScript w Internet Explorer 9.

3. W oknie, kliknij na zakładkę Script (oznaczoną 1 na Rys. 1.), a następnie w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.), wpisz:

document.getElementById("butWyslij").onclick = function spr() {
var tekst = document.getElementById("mojTekst").value;
var wzor = new RegExp("/kre[^wm]/", "g");
if(wzor.test(tekst) )
    { alert("tekst pasuje do wzorca"); }
    else { alert("tekst nie pasuje do wzorca");}
}

4. Kliknij przycisk Run Script.
5. Na stronie samouczka, w polu tekstowym, wpisz słowo krem i naciśnij przycisk Wyślij. Strona powinna wyświetlić komunikat mówiący o tym, że wpisany tekst nie zgadza się ze wzorcem (Rys. 2.).

Rys. 2. Komunikat o niezgodności tekstu ze wzorcem.

5. Na stronie samouczka, w polu tekstowym, wpisz słowo kret i naciśnij przycisk Wyślij. Strona powinna wyświetlić komunikat mówiący o tym, że wpisany tekst zgadza się ze wzorcem (Rys. 3.).

Rys. 3. Komunikat o zgodności tekstu ze wzorcem.

Zmiana tekstu za pomocą wyrażeń regularnych

Dzięki wyrażeniom regularnym, masz również możliwość zmiany ciągu, który pasujedo zadanego wzorca. Do tego celu możesz użyć metody replace(), należącej do obiektu string:

string.replace(wyrażenie,nowyTekst)

gdzie zastosowane wyrażenie jest wyrażeniem regularnym, a nowyTekst jest tekstem, który ma zastąpić znaleziony ciąg znaków.

1. W oknie narzędzi programistycznych przeglądarki Internet Explorer w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.), wpisz:

var tekst = "Wyrażenia regularne w JavaScript są przydatne";
document.getElementById("pokaz").innerHTML= "Przed zamianą: " + tekst;
var wzor = new RegExp(/przydatne/);
var zamiana = tekst.replace(wzor, "<strong>bardzo</strong> przydatne");
document.getElementById("pokaz").innerHTML += "<br/>Po zamianie: " + zamiana;

2. Kliknij przycisk Run Script.
3. Na stronie samouczka powinien pojawić się tekst, zawarty w skrypcie, a poniżej wersja, zmieniona przez skrypt (Rys. 4.).

Rys. 4. Tekst zmieniony przy użyciu wyrażeń regularnych.

Podsumowanie

W tym samouczku nauczyłeś się, jak wykorzystywać wyrażenia regularne w języku JavaScript.

W kolejnym samouczku nauczysz się sprawdzać poprawność danych wprowadzonych w formularzu.

 

---