JavaScript Porovnávání Vzorů s Regulárními Výrazy: Obsáhlý Průvodce

Regulární výrazy (regex) jsou mocný nástroj pro porovnávání vzorů a manipulaci s textem v JavaScriptu. Umožňují vývojářům vyhledávat, ověřovat a transformovat řetězce na základě definovaných vzorů. Tento průvodce poskytuje komplexní přehled regulárních výrazů v JavaScriptu, pokrývá syntaxi, použití a pokročilé techniky.

Co jsou Regulární Výrazy?

Regulární výraz je sekvence znaků, která definuje vyhledávací vzor. Tyto vzory se používají k porovnávání a manipulaci s řetězci. Regulární výrazy jsou široce používány v programování pro úkoly, jako jsou:

• Validace Dat: Zajištění, že uživatelský vstup odpovídá specifickým formátům (např. e-mailové adresy, telefonní čísla).
• Extrakce Dat: Získávání specifických informací z textu (např. extrahování dat, URL adres nebo cen).
• Hledání a Nahrazení: Hledání a nahrazování textu na základě složitých vzorů.
• Zpracování Textu: Rozdělování, spojování nebo transformace řetězců na základě definovaných pravidel.

Vytváření Regulárních Výrazů v JavaScriptu

V JavaScriptu lze regulární výrazy vytvořit dvěma způsoby:

1. Pomocí Literálu Regulárního Výrazu: Uzavřete vzor mezi lomítka (/).
2. Pomocí Konstruktoru RegExp: Vytvořte objekt RegExp se vzorem jako řetězcem.

Příklad:

// Použití literálu regulárního výrazu
const regexLiteral = /hello/;

// Použití konstruktoru RegExp
const regexConstructor = new RegExp("hello");

Volba mezi těmito dvěma metodami závisí na tom, zda je vzor znám v době kompilace nebo je dynamicky generován. Použijte literálovou notaci, když je vzor pevný a známý předem. Použijte konstruktor, když je třeba vzor sestavit programově, zejména při začlenění proměnných.

Základní Syntaxe Regexu

Regulární výrazy se skládají ze znaků, které reprezentují vzor, který má být porovnán. Zde jsou některé základní komponenty regexu:

• Literální Znaky: Porovnávají samotné znaky (např. /a/ porovnává znak 'a').
• Metaznaky: Mají speciální významy (např. ., ^, $, *, +, ?, [], {}, (), \, |).
• Znakové Třídy: Reprezentují sady znaků (např. [abc] porovnává 'a', 'b' nebo 'c').
• Kvantifikátory: Určují, kolikrát by se měl znak nebo skupina vyskytovat (např. *, +, ?, {n}, {n,}, {n,m}).
• Kotvy: Porovnávají pozice v řetězci (např. ^ porovnává začátek, $ porovnává konec).

Běžné Metaznaky:

• . (tečka): Porovnává libovolný jeden znak kromě znaku nového řádku.
• ^ (stříška): Porovnává začátek řetězce.
• $ (dolar): Porovnává konec řetězce.
• * (hvězdička): Porovnává nula nebo více výskytů předchozího znaku nebo skupiny.
• + (plus): Porovnává jeden nebo více výskytů předchozího znaku nebo skupiny.
• ? (otazník): Porovnává nula nebo jeden výskyt předchozího znaku nebo skupiny. Používá se pro volitelné znaky.
• [] (hranaté závorky): Definuje znakovou třídu, porovnává libovolný jeden znak uvnitř závorek.
• {} (složené závorky): Určuje počet výskytů, které se mají porovnat. {n} porovnává přesně n krát, {n,} porovnává n nebo vícekrát, {n,m} porovnává mezi n a m krát.
• () (kulaté závorky): Seskupuje znaky dohromady a zachycuje porovnaný podřetězec.
• \ (zpětné lomítko): Umožňuje escapovat metaznaky, což vám umožní je porovnávat doslovně.
• | (svislá čára): Funguje jako operátor "nebo", porovnává buď výraz před, nebo za ním.

Znakové Třídy:

• [abc]: Porovnává kterýkoli z znaků a, b nebo c.
• [^abc]: Porovnává jakýkoli znak, který *není* a, b nebo c.
• [a-z]: Porovnává jakékoli malé písmeno od a do z.
• [A-Z]: Porovnává jakékoli velké písmeno od A do Z.
• [0-9]: Porovnává jakoukoli číslici od 0 do 9.
• [a-zA-Z0-9]: Porovnává jakýkoli alfanumerický znak.
• \d: Porovnává jakoukoli číslici (ekvivalentní [0-9]).
• \D: Porovnává jakýkoli znak, který není číslicí (ekvivalentní [^0-9]).
• \w: Porovnává jakýkoli znak slova (alfanumerický plus podtržítko; ekvivalentní [a-zA-Z0-9_]).
• \W: Porovnává jakýkoli znak, který není znakem slova (ekvivalentní [^a-zA-Z0-9_]).
• \s: Porovnává jakýkoli znak bílého místa (mezera, tabulátor, nový řádek atd.).
• \S: Porovnává jakýkoli znak, který není bílé místo.

Kvantifikátory:

• *: Porovnává předchozí prvek nula nebo vícekrát. Například a* porovnává "", "a", "aa", "aaa" a tak dále.
• +: Porovnává předchozí prvek jednou nebo vícekrát. Například a+ porovnává "a", "aa", "aaa", ale ne "".
• ?: Porovnává předchozí prvek nula nebo jednou. Například a? porovnává "" nebo "a".
• {n}: Porovnává předchozí prvek přesně *n* krát. Například a{3} porovnává "aaa".
• {n,}: Porovnává předchozí prvek *n* nebo vícekrát. Například a{2,} porovnává "aa", "aaa", "aaaa" a tak dále.
• {n,m}: Porovnává předchozí prvek mezi *n* a *m* krát (včetně). Například a{2,4} porovnává "aa", "aaa" nebo "aaaa".

Kotvy:

• ^: Porovnává začátek řetězce. Například, ^Hello porovnává řetězce, které *začínají* na "Hello".
• $: Porovnává konec řetězce. Například, World$ porovnává řetězce, které *končí* na "World".
• \b: Porovnává hranici slova. To je pozice mezi znakem slova (\w) a znakem, který není znakem slova (\W) nebo začátkem nebo koncem řetězce. Například, \bword\b porovnává celé slovo "word".

Příznaky:

Příznaky Regexu upravují chování regulárních výrazů. Připojují se na konec literálu regexu nebo se předávají jako druhý argument konstruktoru RegExp.

• g (globální): Porovnává všechny výskyty vzoru, nejen první.
• i (ignorovat velikost písmen): Provádí porovnávání bez rozlišení velikosti písmen.
• m (víceřádkový): Povoluje víceřádkový režim, kde ^ a $ porovnávají začátek a konec každého řádku (odděleného \n).
• s (dotAll): Umožňuje tečce (.) porovnávat také znaky nového řádku.
• u (unicode): Povoluje plnou podporu Unicode.
• y (sticky): Porovnává pouze od indexu označeného vlastností lastIndex regexu.

JavaScript Regex Metody

JavaScript poskytuje několik metod pro práci s regulárními výrazy:

• test(): Testuje, zda řetězec odpovídá vzoru. Vrací true nebo false.
• exec(): Provede hledání shody v řetězci. Vrací pole obsahující porovnaný text a zachycené skupiny, nebo null, pokud nebyla nalezena žádná shoda.
• match(): Vrací pole obsahující výsledky porovnávání řetězce s regulárním výrazem. Chová se odlišně s příznakem g a bez něj.
• search(): Testuje shodu v řetězci. Vrací index první shody, nebo -1, pokud nebyla nalezena žádná shoda.
• replace(): Nahrazuje výskyty vzoru náhradním řetězcem nebo funkcí, která vrací náhradní řetězec.
• split(): Rozděluje řetězec do pole podřetězců na základě regulárního výrazu.

Příklady Použití Regex Metod:

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

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

// match() s příznakem 'g'
const regex3 = /\d+/g; // Porovnává jednu nebo více číslic globálně
const str3 = "There are 123 apples and 456 oranges.";
const matches = str3.match(regex3);
console.log(matches); // Výstup: ["123", "456"]

// match() bez příznaku 'g'
const regex4 = /\d+/;
const str4 = "There are 123 apples and 456 oranges.";
const match = str4.match(regex4);
console.log(match); // Výstup: ["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)); // Výstup: 6

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

// replace() s funkcí
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); // Výstup: Today's date is 27/10/2023

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

Pokročilé Regex Techniky

Zachycovací Skupiny:

Kulaté závorky () se používají k vytváření zachycovacích skupin v regulárních výrazech. Zachycené skupiny vám umožňují extrahovat specifické části porovnaného textu. Metody exec() a match() vracejí pole, kde prvním prvkem je celá shoda a následné prvky jsou zachycené skupiny.

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

console.log(match[0]); // Výstup: 2023-10-27 (Celá shoda)
console.log(match[1]); // Výstup: 2023 (První zachycená skupina - rok)
console.log(match[2]); // Výstup: 10 (Druhá zachycená skupina - měsíc)
console.log(match[3]); // Výstup: 27 (Třetí zachycená skupina - den)

Pojmenované Zachycovací Skupiny:

ES2018 zavedl pojmenované zachycovací skupiny, které vám umožňují přiřadit jména zachycovacím skupinám pomocí syntaxe (?<name>...). Díky tomu je kód čitelnější a udržovatelnější.

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

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

Nezachycovací Skupiny:

Pokud potřebujete seskupit části regexu bez jejich zachycení (např. pro použití kvantifikátoru na skupinu), můžete použít nezachycovací skupinu se syntaxí (?:...). Tím se vyhnete zbytečné alokaci paměti pro zachycené skupiny.

const regex = /(?:https?:\/\/)?([\w\.]+)/; // Porovnává URL, ale zachycuje pouze název domény
const url = "https://www.example.com/path";
const match = regex.exec(url);

console.log(match[1]); // Výstup: www.example.com

Lookarounds:

Lookarounds jsou zero-width assertions, které porovnávají pozici v řetězci na základě vzoru, který předchází (lookbehind) nebo následuje (lookahead) danou pozici, aniž by zahrnovaly lookaround vzor do samotné shody.

• Pozitivní Lookahead: (?=...) Porovnává, pokud vzor uvnitř lookahead *následuje* aktuální pozici.
• Negativní Lookahead: (?!...) Porovnává, pokud vzor uvnitř lookahead *nenásleduje* aktuální pozici.
• Pozitivní Lookbehind: (?<=...) Porovnává, pokud vzor uvnitř lookbehind *předchází* aktuální pozici.
• Negativní Lookbehind: (?<!...) Porovnává, pokud vzor uvnitř lookbehind *nepředchází* aktuální pozici.

Příklad:

// Pozitivní Lookahead: Získej cenu pouze, pokud následuje USD
const regex = /\d+(?= USD)/;
const text = "The price is 100 USD";
const match = text.match(regex);
console.log(match); // Výstup: ["100"]

// Negativní Lookahead: Získej slovo pouze, pokud nenásleduje číslo
const regex2 = /\b\w+\b(?! \d)/;
const text2 = "apple 123 banana orange 456";
const matches = text2.match(regex2);
console.log(matches); // Výstup: null, protože match() vrací jen první shodu bez příznaku 'g', což není to, co potřebujeme.
// pro opravu:
const regex3 = /\b\w+\b(?! \d)/g;
const text3 = "apple 123 banana orange 456";
const matches3 = text3.match(regex3);
console.log(matches3); // Výstup: [ 'banana' ]

// Pozitivní Lookbehind: Získej hodnotu pouze, pokud předchází $
const regex4 = /(?<=\$)\d+/;
const text4 = "The price is $200";
const match4 = text4.match(regex4);
console.log(match4); // Výstup: ["200"]

// Negativní Lookbehind: Získej slovo pouze, pokud nepředchází slovo 'not'
const regex5 = /(?<!not )\w+/;
const text5 = "I am not happy, I am content.";
const match5 = text5.match(regex5); //vrací první shodu, pokud nalezena, ne pole
console.log(match5); // Výstup: ['am', index: 2, input: 'I am not happy, I am content.', groups: undefined]
// pro opravu, použij příznak g a exec(), ale buď opatrný, protože regex.exec ukládá index
const regex6 = /(?<!not )\w+/g;
let text6 = "I am not happy, I am content.";
let match6; let matches6=[];
while ((match6 = regex6.exec(text6)) !== null) {
  matches6.push(match6[0]);
}

console.log(matches6); // Výstup: [ 'I', 'am', 'happy', 'I', 'am', 'content' ]

Backreferences:

Backreferences vám umožňují odkazovat se na dříve zachycené skupiny v rámci stejného regulárního výrazu. Používají syntaxi \1, \2 atd., kde číslo odpovídá číslu zachycené skupiny.

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

Praktické Aplikace Regulárních Výrazů

Validace E-mailových Adres:

Běžný případ použití regulárních výrazů je validace e-mailových adres. I když je dokonalý regex pro validaci e-mailů extrémně složitý, zde je zjednodušený příklad:

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

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

Extrahování URL z Textu:

Můžete použít regulární výrazy k extrahování URL adres z bloku textu:

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); // Výstup: ["https://www.example.com", "http://blog.example.org"]

Parsování CSV Dat:

Regulární výrazy lze použít k parsování dat CSV (Comma-Separated Values). Zde je příklad rozdělení řetězce CSV do pole hodnot, které zpracovává pole v uvozovkách:

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

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


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

Validace Mezinárodního Telefonního Čísla

Validace mezinárodních telefonních čísel je složitá kvůli různým formátům a délkám. Robustní řešení často zahrnuje použití knihovny, ale zjednodušený regex může poskytnout základní validaci:

const phoneRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
console.log(phoneRegex.test("+1 555 123 4567")); // Výstup: true (US Příklad)
console.log(phoneRegex.test("+44 20 7946 0500")); // Výstup: true (UK Příklad)
console.log(phoneRegex.test("+81 3 3224 5000"));  // Výstup: true (Japonský Příklad)
console.log(phoneRegex.test("123-456-7890"));   // Výstup: false

Validace Síly Hesla

Regulární výrazy jsou užitečné pro vynucování zásad síly hesla. Následující příklad kontroluje minimální délku, velká písmena, malá písmena a číslo.

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

console.log(passwordRegex.test("P@ssword123")); // Výstup: true
console.log(passwordRegex.test("password"));       // Výstup: false (žádná velká písmena ani číslo)
console.log(passwordRegex.test("Password"));       // Výstup: false (žádné číslo)
console.log(passwordRegex.test("Pass123"));        // Výstup: false (žádná malá písmena)
console.log(passwordRegex.test("P@ss1"));          // Výstup: false (méně než 8 znaků)

Optimalizační Techniky Regexu

Regulární výrazy mohou být výpočetně náročné, zejména pro složité vzory nebo velké vstupy. Zde jsou některé techniky pro optimalizaci výkonu regexu:

• Buďte Specifický: Vyvarujte se používání příliš obecných vzorů, které mohou porovnávat více, než je zamýšleno.
• Používejte Kotvy: Kotvěte regex na začátek nebo konec řetězce, kdykoli je to možné (^, $).
• Vyvarujte se Backtrackingu: Minimalizujte backtracking pomocí posesivních kvantifikátorů (např. ++ místo +) nebo atomických skupin ((?>...)), kdy je to vhodné.
• Kompilujte Jednou: Pokud používáte stejný regex vícekrát, zkompilujte jej jednou a znovu použijte objekt RegExp.
• Používejte Znakové Třídy Moudře: Znakové třídy ([]) jsou obecně rychlejší než alternace (|).
• Udržujte to Jednoduché: Vyvarujte se příliš složitým regexům, které je obtížné pochopit a udržovat. Někdy může být efektivnější rozdělit složitý úkol na několik jednodušších regexů nebo použít jiné techniky manipulace s řetězci.

Běžné Chyby v Regexu

• Zapomenutí Escapovat Metaznaky: Selhání escapovat speciální znaky jako ., *, +, ?, $, ^, (, ), [, ], {, }, | a \, když je chcete porovnat doslovně.
• Nadměrné Používání . (tečka): Tečka porovnává jakýkoli znak (kromě nového řádku v některých režimech), což může vést k neočekávaným shodám, pokud se nepoužívá opatrně. Buďte specifičtější, když je to možné, pomocí znakových tříd nebo jiných restriktivnějších vzorů.
• Hamižnost: Ve výchozím nastavení jsou kvantifikátory jako * a + hamižné a budou porovnávat tolik, kolik je možné. Používejte líné kvantifikátory (*?, +?), když potřebujete porovnat nejkratší možný řetězec.
• Nesprávné Používání Kotev: Nepochopení chování ^ (začátek řetězce/řádku) a $ (konec řetězce/řádku) může vést k nesprávnému porovnávání. Nezapomeňte použít příznak m (víceřádkový) při práci s víceřádkovými řetězci a chcete, aby ^ a $ porovnávaly začátek a konec každého řádku.
• Nezpracování Okrajových Případů: Selhání zvážit všechny možné scénáře vstupu a okrajové případy může vést k chybám. Důkladně otestujte své regexy s různými vstupy, včetně prázdných řetězců, neplatných znaků a okrajových podmínek.
• Problémy s Výkonem: Konstrukce příliš složitých a neefektivních regexů může způsobit problémy s výkonem, zejména u velkých vstupů. Optimalizujte své regexy pomocí specifičtějších vzorů, vyhýbáním se zbytečnému backtrackingu a kompilováním regexů, které se používají opakovaně.
• Ignorování Kódování Znaků: Nesprávné zpracování kódování znaků (zejména Unicode) může vést k neočekávaným výsledkům. Použijte příznak u při práci se znaky Unicode, abyste zajistili správné porovnávání.

Závěr

Regulární výrazy jsou cenný nástroj pro porovnávání vzorů a manipulaci s textem v JavaScriptu. Zvládnutí syntaxe a technik regexu vám umožňuje efektivně řešit širokou škálu problémů, od validace dat po složité zpracování textu. Pochopením konceptů popsaných v tomto průvodci a procvičováním s příklady z reálného světa se můžete stát odborníkem na používání regulárních výrazů k vylepšení svých dovedností ve vývoji JavaScriptu.

Pamatujte, že regulární výrazy mohou být složité a často je užitečné je důkladně otestovat pomocí online testerů regexu, jako je regex101.com nebo regexr.com. To vám umožní vizualizovat shody a efektivně ladit jakékoli problémy. Šťastné kódování!