Kurs obiektowego JavaScript (20)
Autor: Damian Chodorek • Opublikowany: 7 października 2014 • Ostatnia aktualizacja: 9 lipca 2015 • Kategoria: javascript, kursy
Dokładne omówienie wyrażeń regularnych.
Ta część nie jest opisem działania i teorii związanej z wyrażeniami regularnymi. Zakładam, że je znasz i rozumiesz. Jeśli nie to zachęcam do zapoznania się z tym tematem na sieci, np. tutaj.
W JS istnieje wbudowany konstruktor, który pozwala na tworzenie obiektów reprezentujących wyrażenia regularne.
var reg=new RegExp("j.*t"); //użycie konstruktora
var reg=/j.*t/; //alternatywny zapis wyrażenia
Zauważ, że używając konstruktora trzeba przekazać wyrażenie jako ciąg znaków tekstowych w ""
. Korzystając z alternatywnego zapisu wyrażenie piszemy bez cudzysłowu.
Pola obiektów RegExp
global
– jeśli ustawione jest nafalse
(domyślnie), to szukanie wyrażenia zostanie zakończone przy pierwszym dopasowaniu, jeśli potrzebujesz wszystkich, należy przypisać wartośćtrue
,ignoreCase
– to parametr określający czy wielkość liter ma być uwzględniona, domyślna wartość tofalse
,multiline
– określa czy wyniki mogą rozciągać się na wiele wierszy, domyślniefalse
,lastIndex
– z jakiej pozycji należy zacząć poszukiwania, domyślnie0
,source
– zawiera wzór wyrażenia regularnego.
Żadne z powyższych pól nie może być zmienione (za wyjątkiem lastIndex
) po utworzeniu obiektu. Jak więc zmieniać te pola? Należy przekazać odpowiednie parametry do konstruktora. Przykład poniżej.
var reg=new RegExp('j.*t', 'mgi');
reg.global; //true
reg.global=false; //nie da się zmienić!
reg.global; //true !!!
reg.ignoreCase; //true
reg.multiline; //true
Prawdopodobnie zauważyłeś, że drugim parametrem są pierwsze litery pól, przekazane jako ciąg znaków. Mogą być w dowolnej kolejności. Przekazanie ich spowoduje ustawienie danego pola na true
.
RegExp
Należy tutaj wspomnieć o dwóch ważnych metodach, których zadaniem jest wyszukanie wzorca: test()
oraz exec()
. Obydwie akceptują parametr tekstowy. test()
zwraca wartość logiczną – true
jeśli coś znaleziono i false
jeśli nie. exec()
zwraca tablicę dopasowań. Oczywistym faktem jest, że druga metoda wykonuje więcej pracy, dlatego tam gdzie to możliwe, należy użyć test()
. Przykładowo do walidacji formularzy.
/j.*t/.test("Javascript"); //false bo mamy wielką literę
/j.*t/i.test("Javascript"); //true bo ustawiliśmy "i", ignoreCase
/j.*t/.exec("javascript")[0]; //"javascript" jest to pierwszy element zwróconej tablicy
Metody String
, które przyjmują wyrażenia regularne jako parametry
Poniżej lista metod obiektów String
, które współpracują z wyrażeniami regularnymi. Pozwalają na dokładną analizę tekstu.
match()
– zwraca tablicę dopasowań,search()
– zwraca pozycję pierwszego dopasowania,replace()
– bardzo fajna metoda pozwalająca zastąpić dopasowanie innym ciągiem znaków,split()
– na podstawie wyrażenia dzieli tekst na tablicę fragmentów.
"alaxxxxmaxkotaxx".split(/x+/); //["ala", "ma", "kota", ""]
"JavascriptJestNajlepszy!".match(/j.*t/i); //["JavascriptJest"]
"JavascriptJestNajlepszy!".search(/t/); //9
"JavascriptJestNajlepszy!".replace(/[A-Z]/g, "*"); //"*avascript*est*ajlepszy!"
Wiemy jak zastąpić dany tekst innym, ale jak łatwo dodać do niego coś nowego, bez kasowania? Korzystając z $&
możesz odnieść się do dopasowania. Przykład poniżej.
"JavascriptJestNajlepszy!".replace(/[A-Z]/g, "$&*"); //"J*avascriptJ*estN*ajlepszy!"
Jeśli zostały utworzone grupy wyszukiwań (przy pomocy ()
), możesz odnieść się do każdej z nich przy pomocy $1
, $2
, $3
itd.
"JavascriptJestNajlepszy!".replace(/([A-Z])(e)*/g, "$1_"); //"J_avascriptJ_stN_ajlepszy!"
Większa kontrola przy zamianie
Do metody replace()
można przekazać funkcję, która zostanie wywołana dla dopasowań. Dzięki temu można wprowadzić zaawansowaną logikę podczas zamiany fragmentów tekstu.
Parametry, które otrzyma metoda:
- pierwszy, to dopasowanie,
- ostatni, to przeszukiwany ciąg,
- przedostatni, to pozycja dopasowania,
- pozostałe zawierają ciągi dopasowane przez poszczególne grupy zdefiniowane w wyrażeniach.
function callback(match, gr1, gr2, pos, text){
console.log("match: "+match);
console.log("gr1: "+gr1);
console.log("gr2: "+gr2);
console.log("pos: "+pos);
console.log("text: "+text+"\n___________");
return "**";
}
"JavascriptJestNajlepszy!".replace(/([A-Z])(e)*/g, callback);
Szczerze zachęcam do wykonania powyższego kodu w konsoli. Dzięki temu zrozumiesz lepiej działanie wyrażeń regularnych i przekonasz się jak dużą kontrolę daje przekazanie funkcji do replace()
. Z drugiej strony, prawdopodobnie taka kontrola będzie Ci rzadko potrzebna.
String
zamiast RegExp
Poznane metody (split()
, match()
, search()
, replace()
) jako parametr mogą również przyjąć ciąg znaków, który zostanie zamieniony na wyrażenie regularne.
"tmmmp".replace("m", ""); //przekazujemy tekst
Wadą takiego podejścia jest brak możliwości ustawienia modyfikatorów.
W tym artykule to wszystko. Przejdź do następnej części: