30 Nyttige Regex-kodeutdrag for webutviklere

Regelmessige uttrykk er et kraftig verktøy som bør være i alle utviklerens verktøybelte. De kan samsvare med en rekke tegn basert på svært komplekse parametere, noe som kan spare deg mye tid når du bygger dynamiske nettsteder.

Webutviklere møter forskjellige oppgaver enn programvareutviklere, men mange av de samme grunnleggende kodene forblir. Vanlige uttrykk (eller regex) har en bratt innledende læringskurve, men de kan være enormt kraftig når den brukes riktig.

Den vanskeligste delen er å lære syntaxen og lære å skrive din egen regex-kode fra grunnen av. For å spare tid har jeg organisert 30 forskjellige regex kodestykker som du kan innlemme i utviklingsprosjekter. Og siden regex ikke er begrenset til et enkelt språk, kan du bruke disse utdragene til alt fra Javascript til PHP eller Python.

1. Passordstyrke

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

Kontroll av et passords styrke er ofte subjektivt, så det er ikke noe absolutt korrekt svar. Men jeg føler at dette regex-kodestykket er et godt utgangspunkt hvis du ikke vil skrive din egen passordstyrkekontroll fra grunnen av. (Kilde)

2. Hexadecimal Color

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

Feltet for webutvikling er allestedsnærværende med hex fargekoder. Denne regex-koden kan brukes til å trekke hex-kode-kamper fra en hvilken som helst streng for noe formål. (Kilde)

3. Bekreft e-postadresse

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

En av de vanligste oppgaver for en utvikler er å kontrollere om en streng er formatert i stil med en e-postadresse. Det er mange forskjellige varianter for å utføre denne oppgaven, så denne SitePoint-lenken tilbyr to forskjellige kodeutdrag for å sjekke e-postsyntax mot 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 /

I likhet med en e-postadresse er den typiske IP-adressen som brukes til å identifisere en bestemt datamaskin som får tilgang til Internett. Dette vanlige uttrykket vil sjekke en streng for å se om den 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 det hende du vil sjekke en adresse for den nyere IPv6-syntaksen med denne mer avanserte regex-koden. Forskjellen er liten, men viktig under utviklingen. (Kilde)

6. Tusenvis separator

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

Tradisjonelle nummereringssystemer krever et komma, en periode eller et annet merk hvert tredje siffer i et større antall. Denne regex-koden fungerer på et hvilket som helst nummer og vil gjelde et hvilket som helst merke du velger å hvert tredje siffer skille inn i tusenvis, millioner, etc. (Kilde)

7. Prepend HTTP til Hyperlink

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

Enten du jobber i JavaScript, Ruby eller PHP, kan dette vanlige uttrykket være svært nyttig. Det vil sjekke en hvilken som helst URL-streng for å se om den har et HTTP / HTTPS-prefiks, og hvis ikke, legg det på forhånd. (Kilde)

8. Trekk domene fra URL

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

Hvert nettsted domenen inneholder den opprinnelige protokollen (HTTP eller HTTPS) og ofte et underdomene pluss den ekstra sidebanen. Du kan bruke denne brikken til å kutte gjennom alt dette og returnere bare domenenavnet uten ekstra frills. (SourceL

9. Sorter søkeord ved Word Count

^ [^ \ s] * $ samsvarer nøyaktig 1-ordsordord ^ [^ \ s] * \ s [^ \ s] * $ matcher nøyaktig 2-ordsordord ^ [^ \ s] * \ s [^ \ s] * matcher søkeord med minst 2 ord (2 og mer) ^ ([^ \ s] * \ s) 2 [^ \ s] * $ samsvarer nøyaktig med 3 ordsordre ^ ([^ \ s] * \ s ) 4 [^ \ s] * $ matches 5 ord og flere søkeord (longtail)

Brukere av Google Analytics og verktøy for nettredaktører vil virkelig nyte dette vanlige uttrykket. Det kan sortere og organisere søkeord basert på antall ord som brukes i et søk.

Dette kan være numerisk spesifikk (dvs. bare 5 ord), eller det kan matche et rekke ord (dvs. 2 eller flere ord). Når det brukes til å sortere analysedata, er dette et kraftig uttrykk. (Kilde)

10. Finn 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 kanskje analysere kode som ser etter Base64-kodede binære objekter. Denne koden kan brukes på alle PHP-koden og vil sjekke for eksisterende Base64-strenge. (Kilde)

11. Gyldig telefonnummer

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

Kort, søtt og til poenget. Denne regex-koden vil validere ethvert tradisjonelt telefonnummer syntaks basert primært på amerikansk stil av telefonnumre.

Siden dette kan forvandles til et ganske komplisert emne, anbefaler jeg å skumme denne Stack-tråden for mer detaljerte svar. (Kilde)

12. Leading & Trailing Whitespace

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

Bruk denne kodestykket til å trekke ut ledende / tilbakevendende mellomrom fra en streng. Dette kan ikke være en stor avtale, men noen ganger kan det påvirke produksjonen når den hentes fra en database eller brukes til en annen dokumentkoding. (Kilde)

13. Trekk bildekilde)

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

Hvis du av en eller annen grunn trenger å trekke ut et bilde kilden rett fra HTML, er dette kodestykket den perfekte løsningen. Selv om det kan kjøre jevnt på baksiden, bør frontend JS devs i stedet stole på jQuery's .attr () -metode for frontenden. (Kilde)

14. Valideringsdato 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 vanskelig fordi de kan vises som tekst + tall, eller akkurat som tall med forskjellige formater. PHP har en fantastisk datofunksjon, men dette er ikke alltid det beste valget når du trekker en rå streng. Vurder i stedet å bruke dette regulære uttrykket laget for denne spesifikke datasyntaxen. (Kilde)

15. YouTube Video ID-kamp

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

YouTube har holdt den samme nettadressestrukturen i mange år fordi den bare fungerer. Det er også det mest populære videodelingstedet på nettet, så YouTube-videoer har en tendens til å kjøre mest trafikk.

Hvis du trenger å trekke ut en YouTube-video-ID fra en nettadresse, er denne regex-koden perfekt og bør fungere perfekt for alle varianter av YouTube-nettadressestrukturer. (Kilde)

16. Gyldig ISBN

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

Trykte bøker følger et system med nummerering kjent som ISBN. Dette kan bli ganske vanskelig når du vurderer forskjeller mellom ISBN-10 og ISBN-13.

Men denne utrolige koden gjør det mulig å validere et ISBN-nummer og sjekke om det er ISBN10 eller 13. Alle koden er skrevet i PHP, slik at dette burde vise seg å være svært nyttig for webutviklere. (Kilde)

17. Sjekk postnummer

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

Skaperen av denne brikken lanserte ikke bare sitt arbeid gratis, men han tok også tid til å forklare det. Du finner denne utklippet nyttig om du matcher en typisk 5-sifret kode eller lengre 9-sifret versjon.

Husk dette er ment primært for det amerikanske systemet med postnummer, slik at dette kan kreve justeringer for andre land. (Kilde)

18. Gyldig Twitter Brukernavn

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

Her er en veldig liten kodebit for samsvar med Twitter brukernavn funnet i en streng. Det sjekker for @nevne syntaks som er perfekt for automatisk å skanne innholdet i en tweet (eller tweets). (Kilde)

19. Kredittkortnumre

^ (?: 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) $

Ved å validere et kredittkortnummer krever det ofte en sikker plattform som er vert for andre steder online. Men regex kan brukes til de minimale kravene til et typisk kredittkortnummer.

En mer omfattende liste over koder for individuelle kort finnes her. Dette inkluderer Visa, MasterCard, Discover, og mange andre. (Kilde)

20. Finn CSS-attributter

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

Det kan være sjelden å kjøre regex over CSS, men det er ikke en utrolig merkelig situasjon heller.

Denne kodestykket kan brukes til å trekke ut hver matchende CSS-egenskap og verdi fra individuelle velgere. Den kan brukes av et hvilket som helst antall grunner, muligens for å se biter av CSS eller for å fjerne dupliserte egenskaper. (Kilde)

21. Strip HTML-kommentarer

Hvis du av en eller annen grunn trenger å fjerne alle kommentarer fra en blokk med HTML, er dette regex-koden som skal brukes. Sammen med uttrykket finner du et PHP-eksempel ved hjelp av preg_replace. (Kilde)

22. Facebook-profiladresse

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

Facebook er utrolig populær og har gått gjennom mange forskjellige nettadressesystemer. I en situasjon der du tar profiladresser fra brukere, kan det være nyttig å analysere strenge og bekrefte at de er strukturert riktig. Denne brikken kan gjøre akkurat det, og det er perfekt for alle FB-stilkoblinger. (Kilde)

23. Sjekk versjonen av Internet Explorer

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

Microsofts overgang til Edge har ikke vært enstemmig, og mange stoler fortsatt på klassisk Internet Explorer. Utviklere må ofte sjekke for versjoner av IE for å håndtere inkonsekvenser med gjengemotorer.

Denne brikken kan brukes i JavaScript for å teste et nettleseragent basert på hvilken versjon av Internet Explorer (5-11) som brukes. (Kilde)

24. Ekstra pris

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

Prissetting kommer i en rekke formater som inneholder decimaler, kommaer og valutasymboler. Dette vanlige uttrykket kan sjekke alle disse forskjellige formatene for å trekke ut en pris fra en hvilken som helst streng. (Kilde)

25. Parse E-post Header

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

Med denne ene linjen med kode kan du analysere gjennom en e-post header for å trekke ut “til” informasjon fra overskriften. Den kan brukes sammen med flere e-postmeldinger som er sluttet sammen.

Hvis du foretrekker å unngå regex for denne oppgaven, kan du i stedet stole på et parsing-bibliotek. (Kilde)

26. Match en bestemt filtype

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

Når du arbeider med ulike filformater som .xml, .html og .js, kan det bidra til å sjekke filer både lokalt og lastet opp av brukere. Denne brikken trekker en filutvidelse for å sjekke om den er gyldig fra en rekke gyldige utvidelser som kan endres etter behov. (Kilde)

27. Match en URL-streng

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

Denne brikken kan brukes både til HTTPS- og HTTP-strenger for å sjekke om teksten stemmer overens med den tradisjonelle TLD-domenesyntaxen. Det er også en enkel implementering av denne regex ved hjelp av JavaScript's RegExp. (Kilde)

28. Legg til rel =”ingen følgere” til koblinger

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

Hvis du jobber med en gruppe HTML-koden, kan det være grusomt å bruke manuell arbeidskraft til gjentatte oppgaver. Regelmessige uttrykk er perfekte for denne anledningen, og de vil spare mye tid.

Denne koden kan trekke alle ankerkoblinger fra en blokk med HTML og legge til rel =”ingen følgere” attributt til hvert element. Utvikleren som skrev denne koden var snill nok til å publisere det raske uttrykket pluss et fungerende eksempel i PHP.

29. Media Query Match

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

Koble fra hverandre CSS media spørringer til deres parametere og egenskaper. Dette kan hjelpe deg med å analysere ekstern CSS på en renere måte med et mer direkte fokus på hvordan koden fungerer. (Kilde)

30. Google Search Syntax

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

Du kan bygge din egen regex-kode for å manipulere søkbar tekst ved hjelp av Googles varemerkesyntax. Plustegnet (+) angir flere søkeord og minustegnet (-) betyr ord som skal ignoreres og fjernes fra resultater.

Det er en ganske komplisert utgave, men brukt riktig, det kan gi en base for å bygge din egen søkealgoritme. (Kilde)

Wrap-Up

Veien til å mestre regex er lang, men givende hvis du holder fast i det. Utover typiske regex-verktøy er den beste måten å studere gjennom gjentakelse. Prøv å bygge webapplikasjoner som er avhengige av disse regex-kodene for å lære hvordan de fungerer i en virkelig fungerende webapp. Og hvis du har andre utdrag å foreslå, kan du legge inn dem i kommentarfeltet nedenfor.

Nå Les:

50 Nyttige CSS-utsnitt Hver designer burde ha