Tento článek vám ukáže, jak používat regulární výrazy (regex) k ověření shodných řetězců v JavaScriptu.
Všechny uživatelské vstupy shromážděné ve vašich aplikacích by měly být ověřeny. Pokud je vyžadována e-mailová adresa, měla by být zadána platná e-mailová adresa, jinak se odeslání e-mailu nezdaří. Je-li vyžadováno telefonní číslo, je nutné zadat platné telefonní číslo atd. Pro toto ověření lze použít regulární výraz porovnáním celého řetězce se zadaným formátem.
Regex lze také použít k hledání textu v řetězci, k částečné shodě, což je užitečné pro operace hledání/nahrazování nebo hledání.
Jak však uvidíte níže, zápis regulárního výrazu může být docela obtížný. Někdy dává větší smysl použít regulární výraz někoho jiného nebo použít software ke generování požadovaných výrazů.
Regulární výrazy (regex)
Regulární výrazy (Regex) je standard, podle kterého lze v textu vyhledávat odpovídající vzory vyhledávání. Samotný regulární výraz je posloupnost znaků, která definuje sadu pravidel nebo vzor vyhledávání se kterým textem se shoduje.
Regulační výraz lze použít ke shodě celého řetězce nebo jeho části. Porovnáním celého řetězce jej lze použít k ověření uživatelského vstupu. Porovnáním částí řetězce jej lze použít k potvrzení, zda řetězec obsahuje podřetězec, nebo k vyhledávání řetězců pro konkrétní hodnotu a nalezení místa, kde se nachází cíl vyhledávání.
Regulační výraz v JavaScriptu – jak to funguje
Chcete-li použít regulární výraz v JavaScriptu, stačí definovat vzor regulárního výrazu, který chcete porovnat, a poté jej předat jedné z vestavěných metod regulárního výrazu, abyste zjistili, zda vzor vyhledávání odpovídá všem nebo část řetězce.
Jak vypadají regulární výrazy?
Regulární výrazy jsou notoricky složité. Regulární výraz pro ověření e-mailové adresy vypadá takto:
(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\]) Ano, opravdu je to tak složité . Než tedy použijete regulární výraz, vážně zvažte, zda je potřebujete použít regulární výraz. Často existují jednodušší způsoby, jak dosáhnout stejné věci – například mnoho řetězcových metod pro vyhledávání a nahrazování textu, které přijímají regulární výraz jako parametr, přijme jednoduchý řetězec, což může být pro váš případ použití dostačující.
Zřetězení těchto metod za účelem provádění vícenásobných náhrad může být také jednodušší na kódování – a snazší čtení.
Existují také další způsoby ověření a kontroly vstupu, jako je použití správného typu vstupu HTML. Namísto ověřování e-mailu pomocí regulárního výrazu můžete použít vstupní pole pro typ e-mailu – které může ověřit webový prohlížeč jako počáteční ochranu před špatným zadáním. Jakákoli ověření provedená na front-endu by měla být po odeslání dat zkontrolována také na back-endu.
Psaní/generování vzorů vyhledávání Regex
Regex je bolestné psát. Zdá se, že nikoho nebaví pracovat s regulárním výrazem. Ačkoli někteří získávají uspokojení z psaní regulárního výrazu, je obecně považováno za frustraci a je náchylné k chybám – což může mít škodlivý vliv na produkční aplikace, pokud se regulární výraz nechová tak, jak bylo zamýšleno.
Pravidla a syntaxe je poměrně těžké pochopit, takže začátečníci často bojují.
Často je rozumnější použít generátor regulárních výrazů místo ručního psaní vlastních vzorců vyhledávání. Ušetří vám to čas v raných fázích a budete moci vidět, jak vypadá fungující regulární výraz, a poučit se z něj, pokud se rozhodnete začít psát svůj vlastní.
Online fóra navíc pro běžné případy použití poskytují dobrý zdroj pro předem napsané vzorce vyhledávání regulárních výrazů pro věci, jako jsou e-mailové adresy, telefonní čísla, PSČ atd. – stačí vzor regulárního výrazu vyhledat na internetu chcete a pravděpodobně zjistíte, že někdo jiný pro to již napsal vzor.
Definování regulárních výrazů v JavaScriptu
Objekt RegExp se používá k ukládání regulárních výrazů v JavaScriptu. Syntaxe pro deklaraci objektu RegExp je následující:
var myRegExp = new RegExp('EXPRESSION'); Všimněte si, že EXPRESSION zde bude regulární výraz, podle kterého chcete ověřit svůj řetězec.
Regulovaný výraz můžete také definovat jako literál výrazu:
var myRegExp = /EXPRESSION/;
Toto však není upřednostňovaná metoda, protože je hůře čitelná a po vytvoření nelze výraz upravit. Použití objektu RegExp je při čtení a ladění kódu méně nejednoznačné. Použití objektu RegExp také znamená, že můžete ukládat své výrazy jako řetězce a předat je konstruktoru, což zvyšuje flexibilitu.
Pomocí objektu RegExp mohou být výrazy uloženy jako řetězce v souboru nebo databázi, což vám umožní udržovat seznam výrazů pro opětovné použití.
Použití regulárních výrazů v JavaScriptu
Níže jsou uvedeny metody RegExp a String, které lze použít s regulárním výrazem k vyhledávání a manipulaci s řetězci, s příkladem kódu pro každou z nich.
Regulační výraz použitý v každém příkladu je záměrně jednoduchý, abyste viděli, jak se používá samotná funkce.
Vyhledejte shodu pomocí exec()
Metoda RegExp.exec() vyhledává shodu v daném řetězci a vrací pole nebo null pokud není výsledek:
var myRegEx = RegExp('red');
var myString = 'blue green red purple';
console.log(myRegEx.exec(myString)); Nahoře hledáme v řetězci slovo „červená“ a výsledek zaprotokolujeme.
Otestujte úplnou shodu pomocí test()
Metoda RegExp.test() testuje shodu v daném řetězci a vrací hodnotu TRUE nebo FALSE:
var myString = 'blue green red purple';
var myRegEx = new RegExp('red', 'g');
console.log(myRegEx.test(myString)); Všimněte si použití ‘g‘ příznak při inicializaci objektu RegExp – to říká regulárnímu výrazu, aby provedl globální vyhledávání řetězce.
Najděte všechny shody pomocí match() a matchAll()
Metoda String.match() vrací pole všech shod v řetězci pro daný regulární výraz. Níže uvedený příklad najde všechna velká písmena v řetězci:
var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';
var myRegEx = new RegExp('[A-Z]', 'g');
console.log(myString.match(myRegEx)); Metoda String.matchAll() provádí totéž, ale vrací iterátor :
var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';
var myRegEx = new RegExp('[A-Z]', 'g');
console.log([...myString.matchAll(myRegEx)]); Všimněte si použití spread syntaxe k rozbalení iterovatelného do pole, aby jej bylo možné vytisknout pomocí console.log() .
Otestujte shodu v řetězci pomocí search()
Metoda String.search() vrací index pro shodu regulárního výrazu v řetězci, neboli -1 pokud není nalezen:
var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';
var myRegEx = new RegExp('quick', 'g');
console.log(myString.search(myRegEx)); Nahradit text znakem replace()
Metoda String.replace() nahradí první shodu v řetězci. Původní řetězec nebude změněn, takže výsledek musí být přiřazen k nové proměnné, pokud má být použita:
var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';
var myRegEx = new RegExp('Hawaii', 'g');
console.log(myString.replace(myRegEx, 'New York')); Upozorňujeme, že pokud je jako hledaný výraz předán řetězec, nikoli jako objekt RegExp, bude nahrazen pouze první nalezený výskyt!
Nahradit všechny shody pomocí replaceAll()
Metoda String.replaceAll() nahradí všechny výskyty shody v řetězci – ať už se k definování vyhledávacího výrazu použije regulární výraz nebo řetězec:
var myString = 'The quick brown fox jumps over the lazy dog and ignores the other dog';
var myRegEx = new RegExp('dog', 'g');
console.log(myString.replaceAll(myRegEx, 'cat')); Rozdělení řetězce na podřetězce pomocí split()
Metoda String.split() rozdělí řetězec v daném bodě, který lze určit pomocí regulárního výrazu:
var myString = '1 dog, 4 parrots, 6 pigs';
var myRegEx = new RegExp('(,)');
console.log(myString.split(myRegEx)); Nahoře je řetězec rozdělen na čárku. Všimněte si použití hranatých závorek ve výrazu regulárního výrazu – to znamená, že shody budou zahrnuty do výsledku tam, kde by je obvykle funkce String.split() vynechala .
Snazší způsob?
Pokud k ověření vstupu používáte regulární výraz a ověřujete standardizované formáty (jako jsou e-mailové adresy a adresy URL), zvažte použití ověřovací knihovny. Veškerá těžká práce byla udělána za vás, stačí předat svá data do knihovny a ta vám dá vědět, zda jsou data správně nebo nesprávně naformátována.
Pokud vyhledáváte text shromážděný z uživatelského vstupu, souboru nebo databáze, existují také knihovny, jejichž použití je mnohem jednodušší a mnohem výkonnější než spoléhání se na regulární výraz. Některé knihovny umožňují vyhledávat přesné nebo fuzzy shody, což vám umožňuje provádět širší a uživatelsky přívětivější vyhledávání.
To neznamená, že regulárním výrazům byste se měli za každou cenu vyhýbat – když je potřebujete, potřebujete je – a nezbytnost, složitost a implementace bude do značné míry záviset na tom, co se snažíte stavět.