JavaScript Regularni izrazi

Regularni izraz je zaporedje znakov, ki tvorijo iskalni vzorec in je lahko enostaven ali kompleksen. Uporablja se za iskanje, zamenjave in preverjanje v besedilu. V JavaScript-u se regex pogosto uporablja z metodami nizov: search() (vrne začetni položaj prvega ujemanja), replace() (vrne nov niz z zamenjanimi ujemanji) in match() (vrne array ujemanj). Na RegExp objektu pa sta na voljo test() (preveri, ali niz ustreza vzorcu) in exec() (vrne podrobnosti ujemanja).

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Regularni izrazi - Preprost primer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        #izpis {
            padding: 15px;
            border: 1px solid #ccc;
            margin-top: 20px;
            font-family: monospace;
            white-space: pre-line;
        }
    </style>
</head>
<body>
    <h1>JavaScript Regularni izrazi</h1>
    
    <div id="izpis">Nalaganje...</div>

    <script>
        let izpis = document.getElementById('izpis');
        izpis.innerHTML = '';

        // 1. Ustvarjanje regex-a
        let vzorec1 = /hello/i; // i = ignoriraj velikost črk
        let vzorec2 = new RegExp("svet", "i");

        // 2. test() - preveri, ali niz ustreza vzorcu
        izpis.innerHTML += "test() - Ali 'Hello World' vsebuje 'hello'?: " + vzorec1.test("Hello World") + "\n";
        izpis.innerHTML += "test() - Ali 'Pozdravljen svet' vsebuje 'svet'?: " + vzorec2.test("Pozdravljen svet") + "\n\n";

        // 3. exec() - vrne podrobnosti ujemanja
        let ujemanje = vzorec1.exec("Hello World");
        izpis.innerHTML += "exec() - Ujemanje: " + ujemanje[0] + "\n";
        izpis.innerHTML += "exec() - Indeks: " + ujemanje.index + "\n\n";

        // 4. search() - vrne indeks prvega ujemanja
        let besedilo = "JavaScript je super jezik";
        izpis.innerHTML += "search() - Pozicija 'super': " + besedilo.search(/super/) + "\n\n";

        // 5. match() - vrne vsa ujemanja
        let niz = "Telefon: 123-456-7890 in 987-654-3210";
        let telefoni = niz.match(/\d{3}-\d{3}-\d{4}/g); // g = globalno
        izpis.innerHTML += "match() - Najdeni telefoni: " + telefoni + "\n\n";

        // 6. replace() - zamenjaj ujemanja
        let original = "Mačka in pes in mačka";
        let zamenjano = original.replace(/mačka/gi, "pes"); // gi = globalno + ignoriraj velikost
        izpis.innerHTML += "replace() - Original: " + original + "\n";
        izpis.innerHTML += "replace() - Zamenjano: " + zamenjano + "\n\n";

        // 7. Validacija e-pošte
        let email = "test@primer.si";
        let regexEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        izpis.innerHTML += "Validacija - Ali '" + email + "' je veljaven email?: " + regexEmail.test(email) + "\n";
        izpis.innerHTML += "Validacija - Ali 'napaka' je veljaven email?: " + regexEmail.test("napaka") + "\n";
    </script>
</body>
</html>

REZULTAT

Ustvarjanje in modifikatorji regularnih izrazov

Regularni izraz (regex) je vzorec za iskanje v besedilu. V JavaScript-u se ustvari z oklepaji /vzorec/modifikatorji ali s konstruktorjem RegExp(). Modifikatorji (flags) določajo način iskanja: i (ignorira velikost črk), g (globalno iskanje vseh ujemanj) in m (več-vrstično iskanje).

Metode za delo z regularnimi izrazi

Za delo z regexom so na voljo dve vrsti metod: tiste na RegExp objektu (test(), exec()) in tiste na String objektu (search(), match(), replace()). Vsaka ima svojo prednost: test() je najhitrejši za preverjanje, exec() vrača podrobnosti, match() vrača vsa ujemanja, replace() pa omogoča zamenjavo.

Pregled simbolov, kvantifikatorjev in skupnih vzorcev

Tabela prikazuje vse osnovne simbole (npr. \d, \w), kvantifikatorje (npr. *, +, {n,m}) in primere skupnih vzorcev (e-pošta, telefon, datum). Za vsak element so navedeni opis, sintaksa in primer uporabe.

Ime / Vzorec	Opis	Sintaksa / Primer	Opomba
Ustvarjanje Regexa	Regularni izraz se ustvari z oklepaji ali konstruktorjem.	`/vzorec/modifikatorji` `new RegExp("vzorec", "modifikatorji")`	Literali so hitrejši. Konstruktor je uporaben, če je vzorec dinamičen (iz niza).
i (ignoreCase)	Ne razlikuje med velikimi in malimi črkami.	`/abc/i`	Ujema "abc", "ABC", "Abc", "aBc" itd.
g (global)	Išče vsa ujemanja (ne samo prvo).	`/a/g`	Brez tega flaga se ustavi pri prvem ujemanju.
m (multiline)	Omogoča iskanje na začetku in koncu vsake vrstice.	`/^start/m`	Sidra `^` in `$` delujejo na začetku/koncu vsake vrstice, ne le celotnega niza.
s (dotAll)	Točka (`.`) ujema tudi presledke in nove vrstice.	`/a.b/s`	Uporabno za več-vrstično iskanje (podprto v novih brskalnikih).
test()	Vrne `true`, če niz ustreza vzorcu, sicer `false`.	`vzorec.test(niz)`	Najhitrejši način za preverjanje (npr. validacija).
exec()	Vrne array s podrobnostmi prvega ujemanja ali `null`.	`vzorec.exec(niz)`	Vrne tudi indeks ujemanja in skupine. Uporaben v zankah za iskanje vseh.
search()	Vrne indeks prvega ujemanja ali -1.	`niz.search(vzorec)`	Ignorira flag `g` (vedno vrne samo prvo ujemanje).
match()	Vrne array vseh ujemanj ali `null`.	`niz.match(vzorec)`	Z flagom `g` vrne samo ujete nize. Brez `g` vrne podrobnosti (kot `exec`).
matchAll()	Vrne iterator vseh ujemanj s podrobnostmi.	`...niz.matchAll(vzorec)`	Mora imeti flag `g`. Uporaben za iteracijo skozi vsa ujemanja.
replace()	Vrne nov niz z zamenjanimi ujemanji.	`niz.replace(vzorec, "nov_niz")`	Brez `g` zamenja samo prvo. Z `g` zamenja vse.
replaceAll()	Vrne nov niz z zamenjanimi vsemi pojavi.	`niz.replaceAll("stari", "novi")`	Enako kot `replace` z `g`, vendar brez potrebe po regexu za preproste zamenjave.
.	Ujema katerikoli znak razen nove vrstice.	`/a.b/`	Ujema "aab", "acb", "a1b", a ne "a\nb" (razen s flagom `s`).
^	Ujema začetek niza (ali vrstice z `m`).	`/^abc/`	Ujema "abc...", a ne "...abc".
$	Ujema konec niza (ali vrstice z `m`).	`/abc$/`	Ujema "...abc", a ne "abc...".
[]	Ujema katerikoli znak znotraj oklepajev.	`[abc]`	Ujema "a", "b" ali "c".
[^]	Ujema katerikoli znak, ki NI znotraj oklepajev.	`[^abc]`	Ujema vse razen "a", "b", "c".
\|	Ali (alternativa).	`a\|b`	Ujema "a" ali "b".
()	Skupina (capturing group).	`(abc)`	Shrani ujeto skupino za kasnejšo uporabo (npr. v `replace` ali `exec`).
\d	Ujema številko (0-9).	`\d+`	Enakovredno `[0-9]`.
\D	Ujema vse razen številke.	`\D+`	Enakovredno `[^0-9]`.
\w	Ujema črko, številko ali podčrtaj (word character).	`\w+`	Enakovredno `[a-zA-Z0-9_]`.
\W	Ujema vse razen črke, številke ali podčrtaja.	`\W+`	Enakovredno `[^a-zA-Z0-9_]`.
\s	Ujema presledni znak (presledek, tab, nova vrstica).	`\s+`	Uporaben za čiščenje niza.
\S	Ujema vse razen preslednega znaka.	`\S+`	Uporaben za iskanje besed.
*	0 ali večkrat.	`ab*c`	Ujema "ac", "abc", "abbc", "abbbc" itd.
+	1 ali večkrat.	`ab+c`	Ujema "abc", "abbc", a ne "ac".
?	0 ali 1 krat (opcija).	`colou?r`	Ujema "color" in "colour".
{n}	Točno n-krat.	`\d{3}`	Ujema natanko 3 števke (npr. "123").
{n,}	vsaj n-krat.	`\d{3,}`	Ujema 3 ali več števk.
{n,m}	med n in m-krat.	`\d{2,4}`	Ujema 2, 3 ali 4 števke.
E-pošta	Osnovna validacija e-pošte.	`/^[^\s@]+@[^\s@]+\.[^\s@]+$/`	Preveri osnovno strukturo (lokal@domena.tld).
Telefonska številka	Format 040 123 456 ali +386 40 123 456.	`/^\+?[0-9\s\-]{7,15}$/`	Preveri, ali je število med 7 in 15 znakov (števke, presledki, minusi, plus).
Datum (YYYY-MM-DD)	Preverjanje formata datuma.	`/^\d{4}-\d{2}-\d{2}$/`	Preveri samo format, ne pa veljavnosti datuma (npr. 2024-13-45 bi bilo "veljavno" po tem regexu).
Barva (HEX)	Preverjanje HEX barve (#RGB ali #RRGGBB).	`/^#([A-Fa-f0-9]{3}\|[A-Fa-f0-9]{6})$/`	Ujema "#FFF" ali "#FFFFFF".

JavaScript Regularni izrazi

Ustvarjanje in modifikatorji regularnih izrazov

Metode za delo z regularnimi izrazi

Pregled simbolov, kvantifikatorjev in skupnih vzorcev

Vadnica.org

Povezave

Podpora