JavaScript Uspoređivanje Uzoraka s Regularnim Izrazima: Sveobuhvatan Vodič

Regularni izrazi (regex) moćan su alat za uspoređivanje uzoraka i manipulaciju tekstom u JavaScriptu. Omogućuju programerima pretraživanje, validaciju i transformaciju stringova na temelju definiranih uzoraka. Ovaj vodič pruža sveobuhvatan pregled regularnih izraza u JavaScriptu, pokrivajući sintaksu, upotrebu i napredne tehnike.

Što su regularni izrazi?

Regularni izraz je slijed znakova koji definira uzorak pretraživanja. Ti se uzorci koriste za uspoređivanje i manipulaciju stringovima. Regularni izrazi se široko koriste u programiranju za zadatke kao što su:

• Validacija podataka: Osiguravanje da korisnički unos odgovara određenim formatima (npr. e-mail adrese, telefonski brojevi).
• Ekstrakcija podataka: Dohvaćanje specifičnih informacija iz teksta (npr. izdvajanje datuma, URL-ova ili cijena).
• Pretraživanje i zamjena: Pronalaženje i zamjena teksta na temelju složenih uzoraka.
• Obrada teksta: Dijeljenje, spajanje ili transformacija stringova na temelju definiranih pravila.

Stvaranje regularnih izraza u JavaScriptu

U JavaScriptu se regularni izrazi mogu stvoriti na dva načina:

1. Korištenjem literala regularnog izraza: Umetnite uzorak između kosih crta (/).
2. Korištenjem RegExp konstruktora: Stvorite RegExp objekt s uzorkom kao stringom.

Primjer:

// Korištenje literala regularnog izraza
const regexLiteral = /hello/;

// Korištenje RegExp konstruktora
const regexConstructor = new RegExp("hello");

Izbor između ove dvije metode ovisi o tome je li uzorak poznat u vrijeme kompajliranja ili se dinamički generira. Koristite literalnu notaciju kada je uzorak fiksan i poznat unaprijed. Koristite konstruktor kada uzorak treba programski izgraditi, posebno kada uključuje varijable.

Osnovna Regex Sintaksa

Regularni izrazi sastoje se od znakova koji predstavljaju uzorak koji treba uskladiti. Evo nekih temeljnih regex komponenti:

• Literalni znakovi: Uspoređuju same znakove (npr. /a/ uspoređuje znak 'a').
• Meta-znakovi: Imaju posebna značenja (npr. ., ^, $, *, +, ?, [], {}, (), \, |).
• Klase znakova: Predstavljaju skupove znakova (npr. [abc] uspoređuje 'a', 'b' ili 'c').
• Kvantifikatori: Određuju koliko puta se znak ili grupa treba pojaviti (npr. *, +, ?, {n}, {n,}, {n,m}).
• Sidra: Uspoređuju pozicije u stringu (npr. ^ uspoređuje početak, $ uspoređuje kraj).

Uobičajeni meta-znakovi:

• . (točka): Uspoređuje bilo koji pojedinačni znak osim novog retka.
• ^ (caret): Uspoređuje početak stringa.
• $ (dolar): Uspoređuje kraj stringa.
• * (zvjezdica): Uspoređuje nula ili više pojavljivanja prethodnog znaka ili grupe.
• + (plus): Uspoređuje jedno ili više pojavljivanja prethodnog znaka ili grupe.
• ? (upitnik): Uspoređuje nula ili jedno pojavljivanje prethodnog znaka ili grupe. Koristi se za opcionalne znakove.
• [] (uglate zagrade): Definira klasu znakova, uspoređujući bilo koji pojedinačni znak unutar zagrada.
• {} (vitičaste zagrade): Određuje broj pojavljivanja za usporedbu. {n} uspoređuje točno n puta, {n,} uspoređuje n ili više puta, {n,m} uspoređuje između n i m puta.
• () (okrugle zagrade): Grupiraju znakove i hvataju uspoređeni podstring.
• \ (obrnuta kosa crta): Escapira meta-znakove, omogućujući vam da ih usporedite doslovno.
• | (cijev): Djeluje kao "ili" operator, uspoređujući izraz prije ili poslije njega.

Klase znakova:

• [abc]: Uspoređuje bilo koji od znakova a, b ili c.
• [^abc]: Uspoređuje bilo koji znak koji *nije* a, b ili c.
• [a-z]: Uspoređuje bilo koje malo slovo od a do z.
• [A-Z]: Uspoređuje bilo koje veliko slovo od A do Z.
• [0-9]: Uspoređuje bilo koju znamenku od 0 do 9.
• [a-zA-Z0-9]: Uspoređuje bilo koji alfanumerički znak.
• \d: Uspoređuje bilo koju znamenku (ekvivalentno [0-9]).
• \D: Uspoređuje bilo koji znak koji nije znamenka (ekvivalentno [^0-9]).
• \w: Uspoređuje bilo koji znak riječi (alfanumerički plus donja crta; ekvivalentno [a-zA-Z0-9_]).
• \W: Uspoređuje bilo koji znak koji nije znak riječi (ekvivalentno [^a-zA-Z0-9_]).
• \s: Uspoređuje bilo koji znak praznine (razmak, tabulator, novi redak, itd.).
• \S: Uspoređuje bilo koji znak koji nije praznina.

Kvantifikatori:

• *: Uspoređuje prethodni element nula ili više puta. Na primjer, a* uspoređuje "", "a", "aa", "aaa" i tako dalje.
• +: Uspoređuje prethodni element jedan ili više puta. Na primjer, a+ uspoređuje "a", "aa", "aaa", ali ne "".
• ?: Uspoređuje prethodni element nula ili jedan put. Na primjer, a? uspoređuje "" ili "a".
• {n}: Uspoređuje prethodni element točno *n* puta. Na primjer, a{3} uspoređuje "aaa".
• {n,}: Uspoređuje prethodni element *n* ili više puta. Na primjer, a{2,} uspoređuje "aa", "aaa", "aaaa" i tako dalje.
• {n,m}: Uspoređuje prethodni element između *n* i *m* puta (uključivo). Na primjer, a{2,4} uspoređuje "aa", "aaa" ili "aaaa".

Sidra:

• ^: Uspoređuje početak stringa. Na primjer, ^Hello uspoređuje stringove koji *počinju* s "Hello".
• $: Uspoređuje kraj stringa. Na primjer, World$ uspoređuje stringove koji *završavaju* s "World".
• \b: Uspoređuje granicu riječi. Ovo je pozicija između znaka riječi (\w) i znaka koji nije riječ (\W) ili početka ili kraja stringa. Na primjer, \bword\b uspoređuje cijelu riječ "word".

Zastavice (Flags):

Regex zastavice mijenjaju ponašanje regularnih izraza. Dodaju se na kraj regex literala ili se prosljeđuju kao drugi argument RegExp konstruktoru.

• g (global): Uspoređuje sva pojavljivanja uzorka, a ne samo prvo.
• i (ignore case): Obavlja usporedbu neovisnu o velikim i malim slovima.
• m (multiline): Omogućuje višelinijski način rada, gdje ^ i $ uspoređuju početak i kraj svakog retka (odvojenog s \n).
• s (dotAll): Omogućuje točki (.) da uspoređuje i znakove novog retka.
• u (unicode): Omogućuje punu Unicode podršku.
• y (sticky): Uspoređuje samo od indeksa koji je naveden u lastIndex svojstvu regexa.

JavaScript Regex Metode

JavaScript pruža nekoliko metoda za rad s regularnim izrazima:

• test(): Testira podudara li se string s uzorkom. Vraća true ili false.
• exec(): Izvršava pretragu za podudaranjem u stringu. Vraća polje koje sadrži podudarni tekst i uhvaćene grupe, ili null ako podudaranje nije pronađeno.
• match(): Vraća polje koje sadrži rezultate podudaranja stringa s regularnim izrazom. Ponaša se različito sa i bez g zastavice.
• search(): Testira podudaranje u stringu. Vraća indeks prvog podudaranja, ili -1 ako podudaranje nije pronađeno.
• replace(): Zamjenjuje pojavljivanja uzorka zamjenskim stringom ili funkcijom koja vraća zamjenski string.
• split(): Dijeli string u polje podstringova na temelju regularnog izraza.

Primjeri korištenja Regex metoda:

// test()
const regex = /hello/;
const str = "hello world";
console.log(regex.test(str)); // Izlaz: true

// exec()
const regex2 = /hello (\w+)/;
const str2 = "hello world";
const result = regex2.exec(str2);
console.log(result); // Izlaz: ["hello world", "world", index: 0, input: "hello world", groups: undefined]

// match() s 'g' zastavicom
const regex3 = /\d+/g; // Uspoređuje jednu ili više znamenki globalno
const str3 = "There are 123 apples and 456 oranges.";
const matches = str3.match(regex3);
console.log(matches); // Izlaz: ["123", "456"]

// match() bez 'g' zastavice
const regex4 = /\d+/;
const str4 = "There are 123 apples and 456 oranges.";
const match = str4.match(regex4);
console.log(match); // Izlaz: ["123", index: 11, input: "There are 123 apples and 456 oranges.", groups: undefined]

// search()
const regex5 = /world/;
const str5 = "hello world";
console.log(str5.search(regex5)); // Izlaz: 6

// replace()
const regex6 = /world/;
const str6 = "hello world";
const newStr = str6.replace(regex6, "JavaScript");
console.log(newStr); // Izlaz: hello JavaScript

// replace() s funkcijom
const regex7 = /(\d+)-(\d+)-(\d+)/;
const str7 = "Today's date is 2023-10-27";
const newStr2 = str7.replace(regex7, (match, year, month, day) => {
  return `${day}/${month}/${year}`;
});
console.log(newStr2); // Izlaz: Today's date is 27/10/2023

// split()
const regex8 = /, /;
const str8 = "apple, banana, cherry";
const arr = str8.split(regex8);
console.log(arr); // Izlaz: ["apple", "banana", "cherry"]

Napredne Regex Tehnike

Grupe za hvatanje (Capturing Groups):

Okrugle zagrade () koriste se za stvaranje grupa za hvatanje u regularnim izrazima. Uhvaćene grupe omogućuju vam izdvajanje specifičnih dijelova podudarnog teksta. Metode exec() i match() vraćaju polje gdje je prvi element cijelo podudaranje, a sljedeći elementi su uhvaćene grupe.

const regex = /(\d{4})-(\d{2})-(\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match[0]); // Izlaz: 2023-10-27 (Cijelo podudaranje)
console.log(match[1]); // Izlaz: 2023 (Prva uhvaćena grupa - godina)
console.log(match[2]); // Izlaz: 10 (Druga uhvaćena grupa - mjesec)
console.log(match[3]); // Izlaz: 27 (Treća uhvaćena grupa - dan)

Imenovane grupe za hvatanje (Named Capturing Groups):

ES2018 je uveo imenovane grupe za hvatanje, koje vam omogućuju dodjeljivanje imena grupama za hvatanje koristeći sintaksu (?...). To čini kod čitljivijim i lakšim za održavanje.

const regex = /(?\d{4})-(?\d{2})-(?\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match.groups.year);  // Izlaz: 2023
console.log(match.groups.month); // Izlaz: 10
console.log(match.groups.day);   // Izlaz: 27

Grupe koje ne hvataju (Non-Capturing Groups):

Ako trebate grupirati dijelove regexa bez njihovog hvatanja (npr. za primjenu kvantifikatora na grupu), možete koristiti grupu koja ne hvata sa sintaksom (?:...). To izbjegava nepotrebnu alokaciju memorije za uhvaćene grupe.

const regex = /(?:https?:\/\/)?([\w\.]+)/; // Uspoređuje URL, ali hvata samo naziv domene
const url = "https://www.example.com/path";
const match = regex.exec(url);

console.log(match[1]); // Izlaz: www.example.com

Lookarounds:

Lookarounds su tvrdnje nulte širine koje uspoređuju poziciju u stringu na temelju uzorka koji prethodi (lookbehind) ili slijedi (lookahead) toj poziciji, bez uključivanja samog lookaround uzorka u podudaranje.

• Pozitivni Lookahead: (?=...) Uspoređuje ako uzorak unutar lookaheada *slijedi* trenutnu poziciju.
• Negativni Lookahead: (?!...) Uspoređuje ako uzorak unutar lookaheada *ne slijedi* trenutnu poziciju.
• Pozitivni Lookbehind: (?<=...) Uspoređuje ako uzorak unutar lookbehinda *prethodi* trenutnoj poziciji.
• Negativni Lookbehind: (? Uspoređuje ako uzorak unutar lookbehinda *ne prethodi* trenutnoj poziciji.

// Pozitivni Lookahead: Dohvati cijenu samo ako je slijedi USD
const regex = /\d+(?= USD)/;
const text = "The price is 100 USD";
const match = text.match(regex);
console.log(match); // Izlaz: ["100"]

// Negativni Lookahead: Dohvati riječ samo ako je ne slijedi broj
const regex2 = /\b\w+\b(?! \d)/;
const text2 = "apple 123 banana orange 456";
const matches = text2.match(regex2);
console.log(matches); // Izlaz: null jer match() vraća samo prvo podudaranje bez 'g' zastavice, što nije ono što trebamo.
// da to popravimo:
const regex3 = /\b\w+\b(?! \d)/g;
const text3 = "apple 123 banana orange 456";
const matches3 = text3.match(regex3);
console.log(matches3); // Izlaz: [ 'banana' ]

// Pozitivni Lookbehind: Dohvati vrijednost samo ako joj prethodi $
const regex4 = /(?<=\$)\d+/;
const text4 = "The price is $200";
const match4 = text4.match(regex4);
console.log(match4); // Izlaz: ["200"]

// Negativni Lookbehind: Dohvati riječ samo ako joj ne prethodi riječ 'not'
const regex5 = /(?

const regex = /([a-z]+) \1/;
const text = "hello hello world";
const match = regex.exec(text);
console.log(match); // Izlaz: ["hello hello", "hello", index: 0, input: "hello hello world", groups: undefined]

const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

console.log(emailRegex.test("test@example.com"));    // Izlaz: true
console.log(emailRegex.test("invalid-email"));       // Izlaz: false
console.log(emailRegex.test("test@sub.example.co.uk")); // Izlaz: true

const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
const text = "Visit our website at https://www.example.com or check out http://blog.example.org.";
const urls = text.match(urlRegex);
console.log(urls); // Izlaz: ["https://www.example.com", "http://blog.example.org"]

const csvString = 'John,Doe,"123, Main St",New York';
const csvRegex = /(?:"([^"]*(?:""[^"]*)*)")|([^,]+)/g; //Ispravljen CSV regex
let values = [];
let match;  

while (match = csvRegex.exec(csvString)) {
  values.push(match[1] ? match[1].replace(/""/g, '"') : match[2]);
}


console.log(values); // Izlaz: ["John", "Doe", "123, Main St", "New York"]

const phoneRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
console.log(phoneRegex.test("+1 555 123 4567")); // Izlaz: true (Primjer iz SAD-a)
console.log(phoneRegex.test("+44 20 7946 0500")); // Izlaz: true (Primjer iz UK)
console.log(phoneRegex.test("+81 3 3224 5000"));  // Izlaz: true (Primjer iz Japana)
console.log(phoneRegex.test("123-456-7890"));   // Izlaz: false

const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

console.log(passwordRegex.test("P@ssword123")); // Izlaz: true
console.log(passwordRegex.test("password"));       // Izlaz: false (nema velikog slova ni broja)
console.log(passwordRegex.test("Password"));       // Izlaz: false (nema broja)
console.log(passwordRegex.test("Pass123"));        // Izlaz: false (nema malog slova)
console.log(passwordRegex.test("P@ss1"));          // Izlaz: false (manje od 8 znakova)