30 Užitečné úryvky kódu Regex pro webové vývojáře

Regulární výrazy jsou mocným nástrojem, který by měl být v každém nástrojovém pásu vývojáře. Mohou se shodovat s řetězcem znaků založeným na velmi složitých parametrech, což vám může ušetřit spoustu času při vytváření dynamických webových stránek.

Weboví vývojáři čelí různým úkolům než vývojáři softwaru, ale mnoho stejných zásad kódu zůstává. Regulární výrazy (nebo regex) mají a strmou počáteční křivku učení, ale mohou být nesmírně silný, když je používán správně.

Nejtěžší je naučit se syntaxi a naučit se psát vlastní regex kód od nuly. Abych ušetřil čas, zorganizoval jsem 30 různých úryvků kódu, které můžete začlenit do rozvojových projektů. A protože regex není omezen na jediný jazyk, můžete tyto úryvky aplikovat na cokoliv JavaScript na PHP nebo Krajta.

1. Síla hesla

^ (A = * [AZ]. * [AZ]) (a =. * [! # $ & *]) (A =. * [0-9]. * [0-9]) (p = * [az]. * [az]. * [az]). 8 $

Kontrola síly hesla je často subjektivní, takže neexistuje absolutní správná odpověď. Ale cítím, že tento úryvek z regexu je skvělým výchozím bodem, pokud nechcete psát vlastní kontrolní sílu hesla od nuly. (Zdroj)

2. Šestnáctková barva

# ([a-fA-F] | [0-9]) 3, 6

Oblast vývoje webu je všudypřítomná s hexadecimálními barevnými kódy. Tento úryvek z regexu lze použít k vytáhnutí shody hexadecimálního kódu z libovolného řetězce pro jakýkoli účel. (Zdroj)

3. Ověřte e-mailovou adresu

/[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]2,4/igm

Jedním z nejčastějších úkolů pro vývojáře je zkontrolovat, zda je řetězec formátován ve stylu e-mailové adresy. Pro splnění tohoto úkolu existuje mnoho různých variant, takže tento odkaz SitePoint nabízí dva odlišné úryvky kódu pro kontrolu syntaxe e-mailu proti řetězci. (Zdroj)

4. Adresa IPv4

/????:25 [0-5 ]| 2 [0-4] [0-9 ]| [01 ]??0-9] [0-9 ]?)\t (?: 25 [0-5] | 2 [0-4] [0-9] | [01] 5 [0-9] [0-9] a) \ t

Podobně jako e-mailová adresa je typická adresa IP používaná k identifikaci konkrétního počítače, který přistupuje k Internetu. Tento regulární výraz zkontroluje řetězec, aby zjistil, zda následuje syntaxi adresy IPv4. (Zdroj)

5. Adresa IPv6

(([0-9a-fA-F] 1,4:) 7,7 [0-9a-fA-F] 1,4 | ([0-9a-fA-F] 1 , 4:) 1,7: | ([0-9a-fA-F] 1,4:) 1,6: [0-9a-fA-F] 1,4 | ([0-9a-fA-F] 1,4:) 1,5 (: [0-9a-fA-F] 1,4) 1,2 | ([0-9a -fA-F] 1,4:) 1,4 (: [0-9a-fA-F] 1,4) 1,3 | ([0-9a-fA-F] 1,4:) 1,3 (: [0-9a-fA-F] 1,4) 1,4 | ([0-9a-fA-F] 1,4 :) 1,2 (: [0-9a-fA-F] 1,4) 1,5 | [0-9a-fA-F] 1,4: ((: [0 -9a-fA-F] 1,4) 1,6) |: ((: [0-9a-fA-F] 1,4) 1,7 |:) | (: [0-9a-fA-F] 0,4) 0,4% [0-9a-zA-Z] 1, |: :( ffff (: 0 1,4) 0,1:) 0,1 ((25 [0-5] | (2 [0-4] | 1 0,1 [0-9]) 0,1 [0-9 ] 3,3 (25 [0-5] | (2 [0-4] | 1 0,1 [0-9]) 0,1 [0-9]) | ([0-9a-fA-F] 1,4:) 1,4: ((25 [0-5] | (2 [0-4] | 1 0,1 [0-9 ]) 0,1 [0-9]) 3,3 (25 [0-5] | (2 [0-4] | 1 0,1 [0-9])  0,1 [0-9]))

Případně můžete zkontrolovat adresu novější syntaxe protokolu IPv6 s tímto vylepšeným fragmentem regex. Rozdíl je menší, i když zásadní během vývoje. (Zdroj)

6. Tisíce separátoru

/ d 1,3 (a = (d 3) + (a!)) / g

Tradiční číslovací systémy vyžadují čárku, tečku nebo jinou značku každé třetí číslice ve větším čísle. Tento regex kód pracuje na libovolném čísle a bude používat libovolnou značku, kterou zvolíte pro každou třetí číslici oddělující do tisíců, milionů atd. (Zdroj)

7. Přepněte HTTP na hypertextový odkaz

if (! s.match (/ ^ [a-zA-Z] +: /)) s = 'http: //' + s; 

Ať už pracujete v JavaScriptu, Ruby nebo PHP, tento regulární výraz může být velmi užitečný. Bude kontrolovat jakýkoliv řetězec URL, aby zjistil, zda má předponu HTTP / HTTPS, a pokud ne, předpřipravte jej odpovídajícím způsobem. (Zdroj)

8. Vytáhněte doménu z adresy URL

/https?:\t/???--)\t\t???\t

Každá doména webu obsahuje počáteční protokol (HTTP nebo HTTPS) a často subdoménu plus další cestu stránky. Tento úryvek můžete použít k tomu, abyste prořízli vše a vrátili jen název domény bez zbytečných kudrlinek. (SourceL

9. Seřadit klíčová slova podle počtu slov

^ [^ s] * $ odpovídá přesně jednomu slovnímu klíčovému slovu ^ [^ s] * s [^] * $ odpovídá přesně 2-slovnímu klíčovému slovu ^ [^] * [^] odpovídá klíčovým slovům přinejmenším 2 slova (2 a více) ^ ([^] * s) 2 [^] * $ odpovídá přesně 3-slovnímu klíčovému slovu ^ ([^]] * \ t ) 4 [^] * $ odpovídá klíčovým slovům s 5 a více slovy (longtail)

Uživatelé regulátoru Google Analytics a Nástrojů pro webmastery budou tento regulární výraz opravdu využívat. To může třídit a organizovat klíčová slova na základě počtu slov používaných ve vyhledávání.

To může být číselně specifické (tj. Pouze 5 slov) nebo může odpovídat rozsahu slov (tj. 2 nebo více slov). Když se používá k třídění analytických dat, je to jeden silný výraz. (Zdroj)

10. Vyhledejte platný řetězec Base64 v PHP

php [eval] (base64_decode) (([A-Za-z0-9 + /] 4) * ([A-Za-z0-9 + /] 3 = | [A-Za-z0-9 + /] 2 ==)?) 1 \ t

Pokud jste PHP dev pak v určitém okamžiku budete možná muset analyzovat pomocí kódu hledajícího binární objekty Base64. Tento úryvek lze aplikovat na veškerý kód PHP a zkontroluje všechny existující řetězce Base64. (Zdroj)

11. Platné telefonní číslo

^ +? d 1,3 a [-] (a (a: d 2,3)? [-.] d [-.]? d d d d

Krátká, sladká a do té míry. Tento regex kód bude platit pro všechny tradiční telefonní čísla syntaxe založené především na americkém stylu telefonních čísel.

Vzhledem k tomu, že se to může proměnit v poměrně komplikovaný předmět, doporučuji skákat toto vlákno Stack pro podrobnější odpovědi. (Zdroj)

12. Vedení a koncové mezery

^ [s] + | [s] + $

Pomocí tohoto fragmentu kódu můžete vytáhnout vedoucí / koncové mezery z řetězce. To nemusí být velký problém, ale někdy to může ovlivnit výstup, když je tažen z databáze nebo aplikován na jiné kódování dokumentu. (Zdroj)

13. Vytáhněte obrazový zdroj)

\< *[img][^\>] * [src] * = * ['] 0,1 ([^]'] *)

Pokud z nějakého důvodu potřebujete vytáhnout zdroj obrázku přímo z HTML, tento fragment kódu je ideálním řešením. Ačkoli to může běžet hladce na backendu, frontend JS devs by měl místo toho spoléhat na metodu .attr () jQuery pro frontend. (Zdroj)

14. Ověřte datum ve formátu DD / MM / RRRR

^ (? :( ?: 31 (/ | - |) (?: 0? [13578] | 1 [02])) 1 | (? :( ?: 29 | 30) ( (?: 0? [1,3-9] | 1 [0-2]) 2)) (? :( ?: 1 [6-9] | [2-9] d)? d 2) $ | ^ (?: 29 (/ | - |)) 0? 2 3 (? :(? :( ?: 1 [6-9] | [2-9] (?: 0 [48] | [2468] | [13579] [26]) | (? :( ?: 16 | [2468] [048] | [3579] [26]) 00)) )) $ | ^ (?: 0? [1-9] | 1 d | 2 [0-8]) (/ | - |) (? :( ?: 0? [1-9]) | (?: 1 [0-2])) 4 (? :( ?: 1 [6-9] | [2-9] d)?

Data jsou složitá, protože se mohou zobrazit jako text + čísla, nebo jako čísla s různými formáty. PHP má fantastickou funkci data, ale to není vždy nejlepší volba při tahání surového řetězce. Zvažte místo toho použití tohoto regulárního výrazu vytvořeného pro tuto konkrétní syntaxi data. (Zdroj)

15. YouTube Video ID Match

/http:\t/(?:youtu.be.\t??????????????????????????????????\t =) ([w -] 11). * / gi

Služba YouTube uchovává po celé roky stejnou strukturu adres URL, protože funguje. Je to také nejoblíbenější web pro sdílení videa na webu, takže videa na YouTube mají tendenci řídit nejvíce provozu.

Pokud potřebujete vytáhnout ID videa YouTube z adresy URL, je tento kód regexu dokonalý a měl by dokonale fungovat pro všechny varianty struktur URL adresy YouTube. (Zdroj)

16. Platné ISBN

/ b (?: ISBN (? ::? |))? ((?: 97 [89]) d 9 [dx]) \ t

Tištěné knihy se řídí systémem číslování známým jako ISBN. To může být dost složité, když vezmete v úvahu rozdíly mezi ISBN-10 a ISBN-13.

Nicméně tento neuvěřitelný úryvek vám umožní ověřit číslo ISBN a zkontrolovat, zda je to ISBN10 nebo 13. Všechny kódy jsou napsány v PHP, takže by to mělo být mimořádně užitečné pro webové vývojáře. (Zdroj)

17. Zkontrolujte PSČ

^ d 5 (?: [- s] d 4)? $

Tvůrce tohoto úryvku nejen uvolnil svou práci zdarma, ale také si to vysvětlil. Tento úryvek zjistíte, zda vyhovujete typickému 5místnému PSČ nebo delší devítimístné verzi.

Mějte na paměti, že toto je určeno především pro americký systém PSČ, takže to může vyžadovat úpravy pro jiné země. (Zdroj)

18. Platné uživatelské jméno služby Twitter

/ @ ([A-Za-z0-9 _] 1,15) /

Zde je velmi malý zlomek kódu pro shodu s uživatelskými jmény služby Twitter, která se nacházejí v řetězci. Kontroluje @zmínit se syntaxe, která je ideální pro automatické skenování obsahu tweetu (nebo tweetu). (Zdroj)

19. Čísla kreditních karet

^ (A: 4 [0-9] 12 (a: [0-9] 3) | 5 [1-5] [0-9] 14 | 6 (a: 011 | 5 [ 0-9] [0-9]) [0-9] 12 | 3 [47] [0-9] 13 | 3 (?: 0 [0-5] | [68] [0-9] ]) [0-9] 11 | (?: 2131 | 1800 | 35 d 3) d 11) $

Ověření čísla kreditní karty často vyžaduje bezpečnou platformu hostovanou jinde online. Regex však může být použit pro minimální požadavky typického čísla kreditní karty.

Podrobnější seznam kódů jednotlivých karet naleznete zde. To zahrnuje Visa, MasterCard, Discover a mnoho dalších. (Zdroj)

20. Najít atributy CSS

^ s * [a-zA-Z -] + s * [:] 1 s [a-zA-Z0-9 s. #] + [;] 1

To může být vzácné spustit regex přes CSS, ale to není neuvěřitelně zvláštní situaci jeden.

Tento fragment kódu lze použít k vytáhnutí všech odpovídajících vlastností CSS a hodnoty z jednotlivých selektorů. Lze jej použít z libovolného počtu důvodů, případně k zobrazení kusů CSS nebo k odstranění duplicitních vlastností. (Zdroj)

21. Poznámky ke Stripu HTML

Pokud z nějakého důvodu potřebujete odstranit všechny komentáře z bloku HTML, je to regex kód, který chcete použít. Spolu s výrazem najdete příklad PHP pomocí preg_replace. (Zdroj)

22. Adresa URL profilu na Facebooku

/(?:http:\t/)?(?:www.)?facebook.com/(?:(?:))##!/)?(?:pages\t (?: [w -] * /) * ([w -] *) /

Facebook je neuvěřitelně populární a prošel mnoha různými schématy URL. V situaci, kdy užíváte profilové adresy URL od uživatelů, může být užitečné analyzovat řetězce a potvrdit, že jsou správně strukturovány. Tento úryvek může dělat přesně to a je ideální pro všechny odkazy ve stylu FB. (Zdroj)

23. Zkontrolujte verzi aplikace Internet Explorer

* MSIE [5-8] (a: [0-9] +) a (a! * Trident / [5-9] 0). * $

Přechod Microsoftu na Edge nebyl jednotný a mnoho lidí se stále spoléhá na klasický Internet Explorer. Vývojáři často potřebují kontrolovat verze IE, aby zvládli nesrovnalosti s vykreslovacími motory.

Tento úryvek lze použít v JavaScriptu k testování agenta prohlížeče, na základě které se používá verze aplikace Internet Explorer (5-11). (Zdroj)

24. Cena extraktu

/( \ t [0-9 ,]+(\t [0-9]2)?)/

Ceny se dodávají v různých formátech, které obsahují desetinné čárky, čárky a symboly měn. Tento regulární výraz může kontrolovat všechny tyto různé formáty a vytáhnout cenu z libovolného řetězce. (Zdroj)

25. Analyzovat záhlaví e-mailu

/ A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]2,6

Pomocí tohoto jediného řádku kódu můžete analyzovat pomocí záhlaví e-mailu vytáhnout “na” informace z hlavičky. Lze použít v tandemu s více e-maily spojenými dohromady.

Chcete-li se vyhnout regexu pro tento úkol, můžete místo toho spoléhat na knihovnu analýzy. (Zdroj)

26. Srovnejte konkrétní typ souboru

/^(.*\.(?!(htm|html|class|js)$))?[^.]*$/i

Pokud máte co do činění s různými formáty souborů, jako jsou .xml, .html a .js, může vám pomoci kontrolovat soubory lokálně i nahrané uživateli. Tento úryvek vytáhne příponu souboru a zkontroluje, zda je platný z řady platných rozšíření, která lze podle potřeby změnit. (Zdroj)

27. Shoda řetězce URL

/[-a-zA-Z0-9@:%_\+.~#?&//=]2,256\t -9:% _ +. # => *) A / gi

Tento úryvek lze použít jak pro řetězce HTTPS, tak pro HTTP, aby se zjistilo, zda text odpovídá tradiční syntaxi domény TLD. K dispozici je také jednoduchá implementace tohoto regexu pomocí JavaScriptu RegExp. (Zdroj)

28. Doplnění rel =”nofollow” na odkazy

(] *) (href = "https?: //) ((?! (?: (?: www)? '. implode (' | (?: www)? ', $ follow_list).') ) [^ "] +)" ((?!. * brel =) [^>] *) (?: [^>] *)>

Pokud pracujete s dávkou HTML kódu, může být hrozné aplikovat manuální práci na opakované úkoly. Regulární výrazy jsou ideální pro tuto příležitost a ušetří spoustu času.

Tento úryvek může vytáhnout všechna kotevní spojení z bloku HTML a připojit rel =”nofollow” atributu každému prvku. Vývojář, který napsal tento kód, byl natolik laskavý, že zveřejnil hrubý výraz a pracovní příklad v PHP.

29. Mediální dotaz

/ @ media ([^ ] +) ([S] +?) * * / g

Rozdělte CSS mediální dotazy do jejich parametrů a vlastností. To vám může pomoci analyzovat externí CSS čistějším způsobem s přímějším zaměřením na fungování kódu. (Zdroj)

30. Syntaxe Vyhledávání Google

/( [+-]?(?:'.+?'|".+?"| [^+\-] 1 [^] *)) / g

Můžete vytvořit svůj vlastní regex kód pro manipulaci s prohledávatelným textem pomocí syntaxe ochranné známky Google. Znaménko plus (+) označuje další klíčová slova a znaménko mínus (-) označuje slova, která by měla být ignorována a odstraněna z výsledků.

Jedná se o poměrně složitý úryvek, který je však používán správně a může poskytnout základ pro vytváření vlastního vyhledávacího algoritmu. (Zdroj)

Zabalit

Cesta k zvládnutí regexu je dlouhá, ale odměněná, pokud s ním budete držet. Kromě obvyklých nástrojů pro regex je nejlepším způsobem, jak studovat, opakování. Zkuste vytvořit webové aplikace, které se spoléhají na tyto úryvky z aplikace regex, abyste se dozvěděli, jak fungují ve skutečné fungující webové aplikaci. A pokud máte další úryvky, které můžete navrhnout, můžete je poslat do komentáře níže.

Číst nyní:

50 Užitečných CSS fragmentů Každý Designer by měl mít