30 Nyttige Regex kodeuddrag til webudviklere

Regelmæssige udtryk er et kraftfuldt værktøj, der skal være i hver udviklerens værktøjsbælte. De kan matche mod en række tegn baseret på meget komplekse parametre, hvilket kan spare dig meget tid, når du opbygger dynamiske websites.

Webudviklere står over for forskellige opgaver end softwareudviklere, men mange af de samme kodegrundlag forbliver. Regelmæssige udtryk (eller regex) har en stejl indledende indlæringskurve, men de kan være enormt kraftfuld, når den anvendes korrekt.

Den vanskeligste del er at lære syntaksen og lære at skrive din egen regex kode fra bunden. For at spare tid har jeg organiseret 30 forskellige regex kodestykker, som du kan indarbejde i udviklingsprojekter. Og da regex ikke er begrænset til et enkelt sprog, kan du anvende disse uddrag til alt fra JavaScript til PHP eller Python.

1. Kodeordstyrke

^ (? =. * [AZ]. * [AZ]) (? =. * [! @ # $ & *]) (? =. * [0-9]. * [0-9]) (? = . * [az]. * [az]. * [az]). 8 $

Kontrol af passwordets styrke er ofte subjektiv, så der er ikke noget absolut korrekt svar. Men jeg mener, at dette regex-stykke er et godt udgangspunkt, hvis du ikke ønsker at skrive din egen adgangskode styrke checker fra bunden. (Kilde)

2. Hexadecimal Farve

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

Feltet for webudvikling er allestedsnærværende med hex farvekoder. Denne regex snippet kan bruges til at trække hex kode kampe fra enhver streng til ethvert formål. (Kilde)

3. Validér e-mail-adresse

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

En af de mest almindelige opgaver for en udvikler er at kontrollere, om en streng er formateret i stil med en e-mail-adresse. Der er mange forskellige varianter til at udføre denne opgave, så dette SitePoint-link tilbyder to forskellige kodestykker til at kontrollere e-mail-syntaks mod en streng. (Kilde)

4. IPv4-adresse

/\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.)3 (:??? 25 [0-5] | 2 [0-4] [0-9] | [01] [0-9] [0-9]) \ b /

Ligesom en e-mail-adresse er den typiske IP-adresse, der bruges til at identificere en bestemt computer, der har adgang til internettet. Dette regulære udtryk vil tjekke en streng for at se om det følger IPv4-adressesyntaxen. (Kilde)

5. IPv6-adresse

(([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 |:) | fe80: (: [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]))

Alternativt kan du måske tjekke en adresse til den nyere IPv6-syntaks med dette mere avancerede regex-uddrag. Forskellen er mindre omend vital under udvikling. (Kilde)

6. Tusinder Separator

/ \ D 1,3 (? = (\ D 3) + (?! \ D)) / g

Traditionelle nummereringssystemer kræver et komma, en periode eller et andet mærke hvert tredje ciffer i et større antal. Denne regex kode fungerer på et hvilket som helst nummer og vil anvende et hvilket som helst mærke du vælger til hvert tredje ciffer adskille i tusinder, millioner osv. (Kilde)

7. Udfør HTTP til hyperlink

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

Uanset om du arbejder i JavaScript, Ruby eller PHP, kan dette regulære udtryk vise sig meget nyttigt. Det vil tjekke en hvilken som helst URL-streng for at se, om den har et HTTP / HTTPS-præfiks, og hvis ikke, skal du forudbestille det i overensstemmelse hermed. (Kilde)

8. Træk domæne fra URL

/https?:\/\/(?:[-\w]+\.)?([-\w]+)\.\w+(?:\.\w+)?\/?.*/i

Hvert website domæne indeholder den oprindelige protokol (HTTP eller HTTPS) og ofte et underdomæne plus den ekstra sidebane. Du kan bruge dette uddrag til at skære igennem alt det, og returnere bare domænenavnet uden ekstra dikkedarer. (SourceL

9. Sorter søgeord ved Word Count

^ [^ \ s] * $ matcher nøjagtigt 1-ord nøgleord ^ [^ \ s] * \ s [^ \ s] * $ matcher nøjagtigt 2-ord nøgleord ^ [^ \ s] * \ s [^ \ s] * matcher nøgleord på mindst 2 ord (2 og flere) ^ ([^ \ s] * \ s) 2 [^ \ s] * $ matcher nøjagtigt 3-ordsordsted ^ ([^ \ s] * \ s ) 4 [^ \ s] * $ matches 5-ord-og flere søgeord (longtail)

Brugere af Google Analytics og Webmasterværktøjer vil virkelig nyde dette regelmæssige udtryk. Det kan sortere og organisere søgeord baseret på antallet af ord, der anvendes i en søgning.

Dette kan være numerisk specifikt (dvs. kun 5 ord), eller det kan matche en række ord (dvs. 2 eller flere ord). Når det bruges til at sortere analysedata er dette et kraftigt udtryk. (Kilde)

10. Find en gyldig Base64-streng i PHP

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

Hvis du er en PHP dev, så kan du på et tidspunkt måske analysere kode efter Basic64-kodede binære objekter. Denne uddrag kan anvendes til alle PHP-kode og vil kontrollere for eksisterende Base64-strenge. (Kilde)

11. Gyldigt telefonnummer

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

Kort, sød og til punktet. Denne regex kode vil validere enhver traditionel telefonnummer syntaks baseret primært på amerikansk stil af telefonnumre.

Da dette kan omdanne til et ret kompliceret emne, anbefaler jeg at skumme denne Stack-tråd til mere detaljerede svar. (Kilde)

12. Leading & Trailing Whitespace

^ [\ s] + | [\ s] + $

Brug denne kodestykke til at trække ledende / efterfølgende whitespace fra en streng. Dette kan ikke være en big deal, men nogle gange kan det påvirke output, når det trækkes fra en database eller anvendes til en anden dokumentkodning. (Kilde)

13. Træk billedkilde)

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

Hvis du af en eller anden grund skal trække et billedkilde direkte fra HTML, er denne kodestykke den perfekte løsning. Selvom det kan køre problemfrit på bagsiden, skal frontend JS devs i stedet stole på jQuery's .attr () metode til frontend. (Kilde)

14. Validationsdato i DD / MM / ÅÅÅÅ Format

^ (:( ?: 31 (\ / | - |?.? \) (?: 0 [13578] | 1 [02])) | (? :( ?: 29 | 30) \ 1 (\ / | - | \) (?: 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] \ d ) (?: 0 [48] |? [2468] [048] | [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) \ d 2) $

Datoer er vanskelige, fordi de kan vises som tekst + tal eller lige som tal med forskellige formater. PHP har en fantastisk dato funktion, men det er ikke altid det bedste valg, når du trækker en rå streng. Overvej i stedet at bruge dette regulære udtryk lavet til denne specifikke datasyntax. (Kilde)

15. YouTube Video ID Match

/http:\/\/(?:youtu\.be\/|(?:[az]2,3\.)?youtube\.com\/watch(?:\?|#\!)v =) ([\ w -]. 11) * / gi

YouTube har holdt den samme URL-struktur i årevis, fordi den bare virker. Det er også det mest populære videodelingssite på internettet, så YouTube-videoer har tendens til at køre mest trafik.

Hvis du skal trække et YouTube-video-id fra en webadresse, er denne regex-kode perfekt og skal fungere perfekt for alle varianter af YouTube-URL-strukturer. (Kilde)

16. Gyldigt ISBN

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

Trykte bøger følger et system med nummerering kendt som ISBN. Dette kan blive temmelig vanskeligt, når du overvejer forskelle mellem ISBN-10 og ISBN-13.

Men denne utrolige snippet giver dig mulighed for at validere et ISBN-nummer og kontrollere, om det er ISBN10 eller 13. Alt kode er skrevet i PHP, så dette burde vise sig usædvanligt nyttigt for webudviklere. (Kilde)

17. Tjek postnummer

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

Skaberen af ​​dette stykke frigjorde ikke kun sit arbejde gratis, men han tog også tid til at forklare det. Du finder dette uddrag nyttigt, om du matcher en typisk 5-cifret postnummer eller den længerevarende 9-cifrede version.

Husk dette er primært beregnet til det amerikanske system med postnumre, så det kan kræve justeringer for andre lande. (Kilde)

18. Gyldigt kvidre brugernavn

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

Her er et meget lille kodestykke til matchning til kvidre brugernavne fundet i en streng. Det kontrollerer for @nævne syntaks, som er perfekt til automatisk scanning af indholdet i en tweet (eller tweets). (Kilde)

19. Kreditkortnumre

^ (?: 4 [0-9] 12 (: [0-9] 3) | 5 [1-5] [0-9] 14 | 6 (:??? 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) $

Validering af et kreditkortnummer kræver ofte en sikker platform, der hostes andre steder online. Men regex kan bruges til de minimale krav til et typisk kreditkortnummer.

En mere omfattende liste over koder til individuelle kort findes her. Dette omfatter Visa, MasterCard, Discover og mange andre. (Kilde)

20. Find CSS attributter

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

Det kan være sjældent at køre regex over CSS, men det er heller ikke en utrolig mærkelig situation.

Denne kodestykke kan bruges til at trække ud hver matchende CSS-egenskab og værdi fra de enkelte selektorer. Det kan bruges af en række årsager, muligvis for at se klumper af CSS eller for at fjerne dubletter. (Kilde)

21. Strip HTML Comments

Hvis du af en eller anden grund skal fjerne alle kommentarer fra en blok af HTML, er dette den regex-kode, der skal bruges. Sammen med udtrykket finder du et PHP-eksempel ved hjælp af preg_replace. (Kilde)

22. Facebook profil URL

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

Facebook er utroligt populær og har gennemgået mange forskellige URL-ordninger. I en situation, hvor du bruger profilwebadresser fra brugere, kan det være nyttigt at analysere strenge og bekræfte, at de er struktureret korrekt. Denne uddrag kan gøre præcis det, og det er perfekt til alle FB-stil links. (Kilde)

23. Kontroller version af Internet Explorer

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

Microsofts overgang til Edge har ikke været enstemmigt, og mange mennesker er stadig afhængige af klassisk Internet Explorer. Udviklere skal ofte kontrollere for versioner af IE for at håndtere uoverensstemmelser med rendermotorer.

Denne uddrag kan bruges i JavaScript til at teste en browser agent baseret på hvilken version af Internet Explorer (5-11) der bruges. (Kilde)

24. Uddrag Pris

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

Prissætning leveres i en række forskellige formater, der indeholder decimaler, kommaer og valutasymboler. Dette regulære udtryk kan tjekke alle disse forskellige formater for at trække en pris fra en hvilken som helst streng. (Kilde)

25. Parse E-mail Header

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

Med denne enkelt kode kode kan du analysere gennem en e-mailoverskrift for at trække ud “til” information fra overskriften. Den kan bruges sammen med flere e-mails, der er sluttet sammen.

Hvis du foretrækker at undgå regex for denne opgave, kan du i stedet stole på et parsing-bibliotek. (Kilde)

26. Match en bestemt filtype

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

Når du beskæftiger dig med forskellige filformater som .xml, .html og .js, kan det hjælpe med at kontrollere filer både lokalt og uploadet af brugere. Dette uddrag trækker en filudvidelse for at kontrollere, om den er gyldig fra en række gyldige udvidelser, der kan ændres efter behov. (Kilde)

27. Match en URL-streng

/[-a-zA-Z0-9@:%_\+.~#?&//=]2,256\.[az]2,4\b(\/[-a-zA-Z0 -9 @:.??% _ \ + ~ # & // =] *) / gi

Denne uddrag kan bruges både til HTTPS- og HTTP-strenge for at kontrollere, om teksten stemmer overens med den traditionelle TLD-domæne-syntaks. Der er også en simpel implementering af denne regex ved hjælp af JavaScript's RegExp. (Kilde)

28. Tilføj rel =”ingen følger” til Links

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

Hvis du arbejder med et parti af HTML-kode, kan det være grusomt at anvende manuel arbejdskraft til gentagne opgaver. Regelmæssige udtryk er perfekte til denne lejlighed, og de sparer meget tid.

Denne uddrag kan trække alle anker links fra en blok af HTML og tilføje rel =”ingen følger” attribut til hvert element. Udvikleren, der skrev denne kode, var venlig nok til at offentliggøre det raske udtryk plus et fungerende eksempel i PHP.

29. Media Query Match

/ @ Medier ([^ ] +) \ ([\ s \ S] +?) \ S * / g

Opdel CSS mediesøgninger i deres parametre og egenskaber. Dette kan hjælpe dig med at analysere ekstern CSS på en renere måde med mere direkte fokus på, hvordan koden fungerer. (Kilde)

30. Google Search Syntax

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

Du kan opbygge din egen regex kode til at manipulere søgbar tekst ved hjælp af Googles varemærke syntaks. Plustegnet (+) angiver yderligere søgeord, og minustegnet (-) angiver ord, der skal ignoreres og fjernes fra resultater.

Det er en ret kompliceret uddrag, men bruges korrekt, det kan danne grundlag for at opbygge din egen søgealgoritme. (Kilde)

Wrap-Up

Stien til mastering regex er lang, men givende, hvis du holder fast i det. Ud over typiske regexværktøjer er den bedste måde at studere gennem gentagelse. Prøv at opbygge webapplikationer, der er afhængige af disse regex-uddrag, for at lære, hvordan de fungerer i en rigtig fungerende webapp. Og hvis du har andre uddrag til at foreslå, kan du sende dem i kommentarfeltet nedenfor.

Læs nu:

50 Nyttige CSS Snippets Hver Designer skal have