Vianoce v ITnetwork sú tu! Dobí si teraz kredity a získaj až 80 % extra kreditov na e-learningové kurzy ZADARMO. Zisti viac.
Hľadáme nové posily do ITnetwork tímu. Pozri sa na voľné pozície a pridaj sa k najagilnejšej firme na trhu - Viac informácií.

1. diel - Regulárne výrazy v JavaScriptu

Regulárne výrazy vznikli z dôvodu potreby práce s textovými reťazcami určitým unifikovaným spôsobom. Samotný výraz je špecifickým popisom reťazca alebo znaku. Možno ich teda využiť pre kontroly, či reťazec spĺňa určité pravidlá (validácia) alebo pre vyhľadávanie v reťazci, kedy nevieme (alebo jednoducho nechceme sa týmto spôsobom obmedzovať) presný obsah podreťazca.

Výrazom je reťazec spojený s určitými tzv. Metaznaky a kvalifikátory. Zápis nie je zložitý, avšak je veľmi obsiahly a neprehľadný. Preto si zvyknite výrazy vždy komentovať. Tu máme zoznam metaznaky upresňujúce "anonymný" znaky:

Bodka

Bodka zastupuje jeden ľubovoľný znak. Napríklad výraz o štyroch bodkách (....) môže byť čokoľvek o dĺžke 4 a viac znakov.

  • Abcd = platné
  • H @ st = platné
  • CDF = neplatné
  • dfgsd = platné

Ale prečo sa výraz považuje za platný aj po prekročení dĺžky? Logicky by nemal prejsť. Lenže maximálna dĺžka výraz vôbec nezaujíma. Akonáhle prejdú štyri bodky, výraz je platný aj so zvyškom. Ale aj toto má jednoduché riešenie a to použitím hraníc čiže ukotvenie.

Hranice a ukotvenie

Ak potrebujeme, aby sa hľadaný reťazec mal určitý začiatok aj koniec (tzn. Nezačína strede slova), použijeme ohraničenie čiže ukotvenie. Pre začiatok tu máme ^, pre koniec $. Predchádzajúce výraz bude teda vyzerať takto:

^....$

Teraz výraz označuje textový reťazec presne o 4 ľubovoľných znakoch.

Vyčíslením (quantifiers)

Vyčíslením určujú koľkokrát sa smie opakovať zvolený znak (popr. Reťazec). Tu sú jednotlivé typy:

  • ? - minimálne 0krát, maximálne 1-krát
  • * - minimálne 0krát (maximálne neobmedzené)
  • + - minimálne 1-krát (maximálne neobmedzené)
  • {N} - práve n krát
  • {M, n} - minimálne m krát, maximálne n krát
  • {M,} - minimálne m krát (maximálne neobmedzené)

Zápis kvantifikátorov

Na použitie vyčíslením uzavrieme časť výrazu do okrúhlych zátvoriek (), za ktoré doplníme zvolený kvalifikátor. Tu je alternatíva k prvému výrazu za pomocou kvantifikátorov:

^.{4}$

Hranaté zátvorky

Ak chceme povoliť práve jeden z niekoľkých znakov (a alebo b alebo c ...), uzavrieme takú skupinu do hranatých zátvoriek []. Pokiaľ naopak určité znaky chceme zamietnuť, do hranatých zátvoriek pridáme striešku (^). Zápis [^ ab], tak znamená, že sa v danom mieste môže vyskytovať akýkoľvek znak okrem a alebo b.

Interval

Často potrebujeme vybrať napríklad všetky čísla od 1 do 9 alebo A - Z. Určite by sa vám ich nechcelo ručne vypisovať. Našťastie regulárne výrazy podporujú intervaly, tzn. 1 až 9. Zápis je rovnaký ako u ručne vypisovaných skupín, ale pridáme pomlčku (-). [Az] teda znamená abcdefgh ... Zálaží na veľkosti písmen, [AZ] teda označuje len veľké písmená, [az] len malá, [a-zA-Z] malé aj veľké.

Zástupné (zjednodušujúce) znaky

Pre často používané skupiny znakov existujú špeciálne skratky (napríklad zápis \ d zastupuje všetky číslice 0-9)

Preddefinované skupiny znakov:

  • \ D - číslice 0-9
  • \ D - akýkoľvek znak okrem číslic 0-9
  • \ W - znaky "slová" (az, AZ, 0-9 a podčiarkovník)
  • \ W - akýkoľvek znak okrem znakov "slová"
  • \ S - "biele" znaky (medzera, tabulátor, znaky pre zalomenie riadkov)
  • \ S - akýkoľvek znak okrem "bielych" znakov

Alebo

Ak chceme vybrať jedno alebo druhé, môžeme použiť operátor OR a okrúhle zátvorky (A | B).

Uvádzacích

Občas potrebujeme použiť nejaký metaznaky ako súčasť hľadaného výrazu. Daný znak teda musíme odescapovat. Uvádzacích v Regex prebieha rovnako, ako normálne sekvencie escape tzn. Pred každý takýto znak vložím spätné lomítko.

Príklady regulárnych výrazov

Príklad 1 - emailová adresa

Ako prvý príklad na precvičenie sa pokúste vymyslieť, ako zvalidovat emailovú adresu. Napovieme iba tým, že bude vhodné použiť intervaly a dvakrát kvantifikátor +. Nezabudnite tiež, že emailová adresa môže obsahovať iba znaky ._-, čísla a abecedné znaky. Koncovka je dlhá 2 - 4 znaky a môže sa skladať iba zo znakov abecedy.

riešenie:

[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-z]{2,4}

Príklad 2 - telefónne číslo

Predstavme si, že prevádzkujeme nejakú anketu a potrebujeme zistiť, či je dané číslo korektné. Môže mať akúkoľvek predvoľbu, nie je ničím limitované, iba musí dohromady obsahovať 12 čísel a jedno +. Pre zjednodušenie sme už dopredu z čísla odstránili medzery pomocou funkcie replace (), takže sa nimi nemusíte zaoberať.

riešenie:

^\+(\d){3}[0-9]{9}$

Ak sa chcete inšpirovať alebo si s nejakým výrazom proste neviete rady, pozrite sa na tento web regexlib. Súčasťou je i tester, kde si výraz môžete vyskúšať.

Trieda regexp

A konečne si ukážeme použitie Regex v JavaScriptu. JS obsahuje špeciálnu triedu regexp, ktorá za nás regulárne výrazy vykonáva.

Máme k dispozícii dva konštruktory:

var regexp = new RegExp(vzor, modifikátory);
//Nebo
var regexp = /vzor/modifikátory

Výrazy sme si už vysvetlili, modifikátory sú už len takým malým doplnkom. Tu je zoznam:

  • i = case-insensitive (nepozerá na veľkosť písmen)
  • g = prehľadá všetky výrazy namiesto zastavenia sa po jednom
  • m = multiline (viacriadkový režim, hranice označujú začiatok a koniec riadku miesto začiatku a konca celého reťazca)

Regexp.test (string)

Konečne sa dostávame k najčastejšiemu využitie regulárnych výrazov a to na validáciu. Metóda test otestuje, či daný výraz našiel zhodu. Vracia true-false. Kontrola emailu v JS by teda vyzerala napr. Nasledovne:

var re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-z]{2,4}$/;
var platny = re.test("[email protected]");
document.write(platny)

Skúste si to :)

String.match (regexp)

Vráti pole podreťazcov, ktoré zodpovedajú danému regulárnemu výrazu. Nasledujúci kód nájde v texte všetky slová, ktoré začínajú na itn a potom pokračujú aspoň jedným slovným znakom:

var str="Na itnetwork rozvijim sve developerske schopnosti.";
var n=str.match(/itn\w+/g);
document.write(n);

Vidíte, že využitie regulárnych výrazov je obrovské, môžeme veľmi jednoducho prehľadávať reťazca, prípadne pomocou regulárnych výrazov aj reťazca nahrádzať. To sa robí metódou replace na stringu.

Tak týmto sme zakončili rozprávanie o Regex a zároveň sme odhalili väčšinu tajomstvo reťazcov. Nabudúce si skúsime niečo zábavnejšie, čo treba browser hru Pong zo starých Atari za pomoci knižnice JQuery? :-)


 

Všetky články v sekcii
Kurzy programovania v JavaScripte - Najväčší {C_A} tutorial
Článok pre vás napísal Michael Olšavský
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
...
Aktivity