JavaScript - Regular Expressions


Šta je regularni izrazi (Regular Expressions)?

Regularni izrazi, poznatiji kao "regex" ili "RegExp", posebno su oblikovani tekstualni stringovi koji se koriste za pronalaženje obrazaca u tekstu. Regularni izrazi jedan su od najsnažnijih alata koji su danas dostupni za efikasnu obradu teksta i manipulacije. Na primjer, može se koristiti za provjeru da li je format podataka, tj. ime, adresa e-pošte, telefonski broj itd. Koji je korisnik unio ispravan ili ne, pronaći ili zamijeniti odgovarajući string unutar tekstualnog sadržaja itd.

JavaScript podržava regularne izraze u Perl stilu. Zašto regularni izrazi u Perl stilu? Budući da je Perl (praktično izdvajanje i jezik izvještaja) bio prvi uobičajeni programski jezik koji je pružao integrisanu podršku za regularne izraze i poznat je po snažnoj podršci regularnim izrazima i izvanrednim mogućnostima obrade i manipulacije tekstom. Počnimo sa kratkim pregledom često korištenih JavaScript ugrađenih metoda za izvođenje podudaranja uzoraka prije nego što se udubimo u svijet regularnih izraza.

Funkcija Šta radi
exec() Potražite podudaranje u stringu. Vraća niz informacija ili null u slučaju nepodudaranja.
test() Testirajte da li se string podudara sa uzorkom. Vraća se (true) ili (false).
search() Potražuje podudaranje unutar stringa. Vraća indeks prvog podudaranja ili -1 ako nije pronađen.
replace() Potraži podudaranje u stringu i zamijeniće podudaranje podstringa zamjenskim stringom.
match() Potraži podudaranje u stringu. Vraća string informacija ili null u slučaju neusklađenosti.
split() Dijeli string u niz podstringova pomoću regularnog izraza.


Definisanje regularnih izraza (Regular Expressions)

U JavaScriptu su regularni izrazi predstavljeni objektom RegExp, koji je izvorni JavaScript objekt poput String, Array i tako dalje. Postoje dva načina za stvaranje novog RegExp objekta - jedan koristi doslovnu sintaksu, a drugi konstruktor RegExp(). Sintaksa literala koristi kose crte (/ pattern /) za umotavanje uzorka regularnog izraza, dok sintaksa konstruktora koristi navodnike ("pattern"). Sljedeći primjer pokazuje oba načina stvaranja regularnog izraza koji odgovara bilo kojem stringu koji započinje s "Mr.".

// Sintaksa literala
var regex = /^Mr\./;

// Konstuktor sintaksa
var regex = new RegExp("^Mr\\.");
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kreiranje Regular Expression u JavaScript</title>
</head>
<body>
    <script>
    var str = "Mr. Mihaljica";
    
    // Sintaksa literala
    var regex1 = /^Mr\./;
    
    if(regex1.test(str)) {
        document.write("Pronađeno podudaranje!");
    } else {
        document.write("Nije pronađeno podudaranje.");
    }
    
    document.write("<hr>");
    
    // Sintaksa konstruktora
    var regex2 = new RegExp("^Mr\\.");
    
    if(regex2.test(str)) {
        document.write("Pronađeno podudaranje!");
    } else {
        document.write("Nije pronađeno podudaranje.");
    }
    </script>
</body>
</html>

Kao što vidite, doslovna sintaksa regularnog izraza je kraća i lakša za čitanje. Zbog toga je poželjno koristiti doslovnu sintaksu. Takođe ćemo ga koristiti u ovoj lekciji.



Poklapanje uzoraka sa regularnim izrazom

Uzorci regularnih izraza uključuju upotrebu slova, znakova, interpunkcijskih znakova itd., plus skup posebnih znakova regularnog izraza (ne brkajte s HTML posebnim znakovima). Znakovi kojima se u regularnom izrazu daje posebno značenje su: . *? + [ ] ( ) { } ^ $ | \. Moraćete iskošiti ove znakove kad god ih želite doslovno koristiti. Na primjer, ako želite podudarati s ".", morali biste napisati \.. Svi ostali znakovi automatski poprimaju svoja doslovna značenja. Sljedeći dijelovi opisuju različite opcije dostupne za formulisanje obrazaca:



Klase karaktera

Uglate zagrade koje okružuju uzorak znakova nazivaju se klasa znakova, npr. [abc]. Klasa znakova uvijek se podudara s jednim znakom s popisa navedenih znakova, što znači da se izraz [abc] podudara samo sa znakom a, b ili c. Takođe se mogu definisati negativne klase znakova koje se podudaraju s bilo kojim znakom, osim onim sadržanim u zagradama. Negirana klasa znakova definiše se postavljanjem znaka znaka (^) odmah nakon uvodne zagrade, poput [^ abc], koji se podudara s bilo kojim znakom osim a, b i c. Takođe možete definisati raspon znakova pomoću crtice (-) unutar klase znakova, poput [0-9]. Pogledajmo neke primjere klasa likova:

RegExp Šta radi
[abc] Podudara se sa bilo kojim od znakova a, b ili c.
[^abc] Podudara se sa bilo kojim drugim znakom osim a, b ili c.
[a-z] Podudara se sa bilo kojim znakom od malog a do malog z.
[A-Z] Podudara se sa bilo kojim znakom od velikog a do velikog z
[a-Z] Podudara se sa bilo kojim znakom od malog do velikog slova Z.
[0-9] Odgovara jednoj cifri između 0 i 9.
[a-z0-9] Poklapa jedan znak između a i z ili između 0 i 9.

Sljedeći primjer će vam pokazati kako pronaći postoji li obrazac unutar stringa ili ne koristeći regularni izraz s metodom JavaScript test():

var regex = /ca[kf]e/;
var str = "Jeo je kolač u kafiću.";

// Testiranje stringa u odnosu na regularni izraz
if(regex.test(str)) {
    alert("Pronađeno podudaranje!");
} else {
    alert("Nema podudaranja.");
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Uparivanje jedanog znaka koristeći Regular Expression u JavaScript</title>
</head>
<body>
    <script>
    var regex = /ca[kf]e/;
    var str = "Jeo je kolač u kafiću.";
    
    // Testiranje stringa u odnosu na regularni izraz
    if(regex.test(str)) {
        document.write("Pronađeno podudaranje!");
    } else {
        document.write("Nije pronađeno podudaranje.");
    }
    </script>
</body>
</html>

Dalje, možete dodati globalnu zastavicu g regularnom izrazu da biste pronašli sva podudaranja u stringu:

var regex = /ca[kf]e/g;
var str = "He was eating cake in the cafe.";
var matches = str.match(regex);
alert(matches.length); // Ispisjue: 2
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Pronađi sve pojave uzorka u nizu pomoću redovnog izraza</title>
</head>
<body>
    <script>
    var regex = /ca[kf]e/g;
    var str = "He was eating cake in the cafe.";
    var matches = str.match(regex);
    document.write("Found " + matches.length + " matches: " + matches);
    console.log(matches);
    </script>
</body>
</html>


Unaprijed definisane klase znakova

Neke klase znakova poput znakova, slova i razmaka koriste se tako često da za njih postoje nazivi prečica. Sljedeća tabbela navodi one predefinisane klase znakova:

Prečica Šta radi
. Odgovara bilo kojem pojedinačnom znaku, osim novog reda \n.
\d Podudara se sa bilo kojim znakovnim znakom.
Isto kao: [0-9]
\D Podudara se sa bilo kojim necifrenim znakom.
Isto kao: [^ 0-9]
\s Podudara se s bilo kojim razmakom (znak razmaka, jezička, novog reda ili znaka za vraćanje karaktera).
Isto kao: [ \t\n\r]
\S Podudara se sa bilo kojim znakom koji nije razmak.
Isto kao: [^ \t\n\r]
\w Podudara se sa bilo kojim znakom riječi (definisano kao a do z, A do Z, 0 do 9 i donja crta).
Isto kao: [a-zA-Z_0-9]
\W Odgovara bilo kojem znaku koji nije riječ.
Isto kao: [^a-zA-Z_0-9]

Sljedeći primjer će vam pokazati kako pronaći i zamijeniti prostor s crticom u stringu koristeći regularni izraz s JavaScript metodom replace():

var regex = /\s/g;
var replacement = "-";
var str = "Earth revolves around\nthe\tSun";

// Zamijeni razmake, nove redove i kartice
document.write(str.replace(regex, replacement) + "<hr>");

// Zamijeni samo razmake
document.write(str.replace(/ /g, "-"));
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Pronalaženje i zamjena znakova u nizu pomoću Regular Expression</title>
</head>
<body>
    <script>
    var regex = /\s/g;
    var replacement = "-";
    var str = "Earth revolves around\nthe\tSun";
    
    // Štampanje originalnog niza
    document.write("<pre>" + str + "</pre>");
    
    // Zamijeni razmake, nove redove i kartice
    document.write("<pre>" + str.replace(regex, replacement) + "</pre>");
    
    // Zamijeni samo razmake
    document.write("<pre>" + str.replace(/ /g, "-") + "</pre>");
    </script>
</body>
</html>


Kvantifikatori ponavljanja

U prethodnom dijeli naučili smo kako upariti jednan karakter u nivou mode. Ali što ako želite podudaranje s više od jednog karaktera? Na primjer, recimo da želite otkriti riječi koje sadrže jedan ili više primjera slova p ili riječi koje sadrže najmanje dva p i tako dalje. Tu u obzir dolaze kvantifikatori. Kvantifikatorima možete odrediti koliko puta se znak u regularnom izrazu treba podudarati. Kvantifikatori se mogu primijeniti na pojedinačne znakove, kao i na klase znakova i grupe znakova sadržane u zagradama. Sljedeća tabela navodi različite načine za kvantifikovanje određenog uzorka:

RegExp Šta radi
p+ Podudara se sa jednom ili više pojava slova p.
p* Podudara se sa nula ili više pojavljivanja slova p.
p? Podudara se sa nula ili jednom pojavom slova p.
p{2} Poklapa se tačno sa dva pojavljivanja slova str.
p{2,3} Podudara se s najmanje dva pojavljivanja slova p, ali ne više od tri pojavljivanja.
p{2,} Podudara se s dva ili više pojavljivanja slova p.
p{,3} Podudara se sa najviše tri pojavljivanja slova str

Regularni izraz u sljedećem primjeru razdvaja string na zarez, redoslijed zareza, razmak ili kombinaciju istih, koristeći JavaScript split() metodu:

var regex = /[\s,]+/;
var str = "Najdraže boje su mi crvena, zelena i plava";
var parts = str.split(regex);

// Pregledajte niz dijelova i prikažite podnizove
for(var part of parts){
    document.write("<p>" + part + "</p>");
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Razdvajanje stringova korištenjem Regular Expression u JavaScript</title>
</head>
<body>
    <script>
    var regex = /[\s,]+/;
    var str = "Najdraže boje su mi crvena, zelena i plava";
    var parts = str.split(regex);
    console.log(parts);
    
    // Pregledajte niz dijelova i prikažite podnizove
    for(var part of parts){
        document.write("<p>" + part + "</p>");
    }
    </script>
</body>
</html>


Položaj sidra (Position Anchors)

Postoje određene situacije u kojima želite da se podudaraju na početku ili na kraju reda, riječi ili string. Da biste to učinili, možete koristiti sidra. Dva uobičajena sidra su kareta (^) koja predstavlja početak stringa i znak dolara ($) koji predstavljaju kraj stringa.

RegExp Šta radi
^p Podudara se sa slovom p na početku reda.
p$ Podudara se sa slovom p na kraju reda.

Regularni izraz u sljedećem primjeru odgovaraće samo onim imenima u nizu koja počinju slovom "J" pomoću JavaScript funkcije test():

var regex = /^J/;
var names = ["James Bond", "Clark Kent", "John Rambo"];

// Prelistajte niz imena i prikažite odgovarajuća imena
for(var name of names) {
    if(regex.test(name)) {
        document.write("<p>" + name + "</p>")
    }
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Podudaranje stringa počevši od korištenja određenih znakova Regular Expression</title>
</head>
<body>
    <script>
    var regex = /^J/;
    var names = ["James Bond", "Clark Kent", "John Rambo"];
    
    // Prelistaj niz imena i prikažite odgovarajuća imena
    for(var name of names) {
        if(regex.test(name)) {
            document.write("<p>" + name + "</p>")
        }
    }
    </script>
</body>
</html>


Modifikatori uzorka (Flags)

Modifikator uzorka omogućava vam upravljanje načinom na koji se rukuje podudaranjem uzorka. Modifikatori uzorka postavljaju se neposredno nakon regularnog izraza, na primjer, ako želite tražiti obrazac na način koji ne razlikuje velika i mala slova, možete koristiti modifikator i, poput ovog: /pattern/i. Sljedeća tabela navodi neke od najčešće korištenih modifikatora uzoraka.

Modifikator Šta radi
g Izvršite globalno podudaranje, tj. pronađite sve pojave.
i Čini da se podudaranje razlikuje od malih i velikih slova.
m Mijenja ponašanje ^ i $ kako bi se podudarali s granicom nove linije (tj. početkom ili krajem svake linije unutar stringa s više linija), umjesto granice stringa.
o Procjenjuje izraz samo jednom.
s Mijenja ponašanje . (tačka) kako bi se podudarali sa svim znakovima, uključujući nove redove.
x Omogućuje korištenje razmaka i komentara u regularnom izrazu radi jasnosti.

Sljedeći primjer pokazaće vam kako koristiti g i i modifikatore u regularnom izrazu za obavljanje globalne i neosjetljive pretrage s JavaScript metodom match().

var regex = /boja/gi;
var str = "Crvena boja je vidljivija od plave na dnevnom svjetlu.";
var matches = str.match(regex); // globalno podudaranje bez velikih i malih slova
console.log(matches);
// očekivani izlaz: ["boja", "boja"]
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Koristite obrazac na način koji ne razlikuje velika i mala slova Regular Expression</title>
</head>
<body>
    <script>    
    var str = "Crvena boja je vidljivija od plave na dnevnom svjetlu.";
    var regex1 = /boja/g;
    var regex2 = /boja/gi;
    
    var matches = str.match(regex1); // podudaranje uzorka bez zanemarivanja slova slučaja
    document.write("<p>Pronađeno" + matches.length + " podudaranja: " + matches + "</p>");
    console.log(matches);
    
    matches = str.match(regex2); // podudaranje uzorka sa zanemarenom zastavicom slučaja
    document.write("<p>Pronađeno" + matches.length + " podudaranja: " + matches + "</p>");
    console.log(matches);
    </script>
</body>
</html>

Slično tome, sljedeći primjer pokazuje kako se podudara na početku svakog reda u višerednom nizu pomoću modifikatora ^ sidro i m s JavaScript metodom match().

var regex = /^boja/gim;
var str = "Crvena boja vidljivija je od \nboja plave na dnevnom svjetlu.";
var matches = str.match(regex); // globalno, bez velikih i malih slova, višelinijsko podudaranje
console.log(matches);
// očekivani izlaz: ["boja", "boja"]
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Podudaranje uzorka u višerednom nizu pomoću Regular Expression</title>
</head>
<body>
    <script>    
    var str = "Color red is more visible than \ncolor blue in daylight.";
    var regex1 = /^color/gi;
    var regex2 = /^color/gim;
    
    var matches = str.match(regex1); // pattern matching without multiline flag    
    document.write("<p>Pronađeno " + matches.length + " podudaranja: " + matches + "</p>");
    console.log(matches);
    
    matches = str.match(regex2); // podudaranje uzorka s višerednom zastavom
    document.write("<p>Pronađeno " + matches.length + " podudaranja: " + matches + "</p>");
    console.log(matches);
    </script>
</body>
</html>


Alternacija (Alternation)

Alternacija vam omogućava da odredite alternativnu verziju uzorka. Alternacija u regularnom izrazu radi baš kao i operater OR u uslovnom izrazu if-else. Alternaciju možete odrediti pomoću okomite trake (|). Na primjer, regexp/lisica|pas|mačka/ odgovara stringu "lisica", ili stringu "pas", ili stringu "mačka". Evo primjera:

var regex = /lisica|pas|mačka/;
var str = "Brza smeđa lisica preskače lijenog psa.";
var matches = str.match(regex);
console.log(matches);
// očekivani izlaz: ["lisica", index: 11, ...]
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Navođenje alternativne verzije uzorka u Regular Expression</title>
</head>
<body>
    <script>    
    var regex = /lisica|pas|mačka/;
    var str = "Brza smeđa lisica preskače lijenog psa.";
    var matches = str.match(regex);
    document.write("Podudara se sa podstringom: " + matches);
    
    console.log(matches);
    // očekivani izlaz: ["lisica", index: 11, ...]
    </script>
</body>
</html>


Grupisanje

Regularni izrazi koriste zagrade za grupiranje podizraza, baš kao i matematički izrazi. Zagrade omogućavaju da se kvantifikator ponavljanja primijeni na cijeli podizraz. Na primjer, u regexp /go+/ kvantifikator + primjenjuje se samo na posljednji znak o i podudara se sa nizovima "go", "goo" itd. Dok se u regexp /(go)+/ kvantifikator + primjenjuje na grupu znakova g i o i podudara se sa nizovima "go", "gogo" itd.

var regex = /(go)+/i; 
var str = "Jednog dana Gogo će ići u školu.";
var matches = str.match(regex); // podudaranje bez velikih i malih slova
console.log(matches);
// očekivani izlaz: ["Gogo", index: 12, ...]
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Grupiranje podizraza u Regular Expression</title>
</head>
<body>
    <script>    
    var str = "Jednog dana Gogo će ići u školu.";
    var regex1 = /(go)+/i;
    var regex2 = /(go)+/gi;
    
    var matches = str.match(regex1); // podudaranje bez velikih i malih slova
    console.log(matches);
    //očekivani izlaz: ["Gogo", index: 12, ...]
    
    matches = str.match(regex2); // globalno podudaranje bez velikih i malih slova
    console.log(matches);
    // očekivani izlaz: ["Gogo"]
    </script>
    <p><strong>Napomena: </strong> Provjerite konzolu pretraživača pritiskom
    na tipku f12 na tastaturi. </p>
</body>
</html>


Granice riječi

Znak s granicom riječi (\b) pomaže vam u pretraživanju riječi koje počinju i/ili završavaju uzorkom. Na primjer, regexp /\bauto/ podudara se s riječima koje počinju s uzorkom auto i podudarao bi se s autobus, automat ili autoritet, ali se ne bi podudarao s oscarom. Slično tome, regexp /auto\b/ podudara se s riječima koje se završavaju uzorkom auto i podudarao bi se s oscarom ili superauto, ali se ne bi podudarao s kolicima. Isto tako, /\bauto\b/ podudara se s riječima koje počinju i završavaju uzorkom auto, a podudaralo bi se samo s riječju auto. Sljedeći primjer će naglasiti riječi koje počinju s auto podebljano:

var regex = /(\bcar\w*)/g;
var str = "Words begining with car: cart, carrot, cartoon. Words ending with car: oscar, supercar.";
var replacement = '<b>$1</b>';
var result = str.replace(regex, replacement);
document.write(result);
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Uparivanje riječi započinje ili završava uzorkom Regular Expression</title>
</head>
<body>
    <script>   
    var regex = /(\bcar\w*)/g;
    var str = "Words begining with car: cart, carrot, cartoon. Words ending with car: oscar, supercar.";
    var replacement = '<b>$1</b>';
    
    // Podebljano ističe riječi koje počinju s automobilom
    var result = str.replace(regex, replacement);
    document.write(result);
    </script>
</body>
</html>