30 Regex kode utdrag alle webutviklere bør vite

Regelmessige uttrykk er et kraftig verktøy som burde 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. Regelmessige uttrykk (eller regex ) har en bratt innledende læringskurve, men de kan være enormt kraftige når de 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 kodeutdrag 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 riktig svar. Men jeg føler at dette regex-kodestykket er et flott utgangspunkt hvis du ikke vil skrive din egen passordstyrkekontroller fra grunnen av.

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.

3. Bekreft e-postadresse

 /[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[AZ]{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.

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 det følger IPv4-adressesyntaxen.

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 vil du kanskje sjekke en adresse for den nyere IPv6-syntaksen med denne mer avanserte regex-koden. Forskjellen er liten, men viktig under utviklingen.

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 opererer 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.

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, prepend det tilsvarende.

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 det og returnere bare domenenavnet uten ekstra frills.

9. Sorter søkeord ved Word Count

 ^ [^ \ s] * $ samsvarer nøyaktig 1 ordsord ^ ^ ^ ^ s] * \ s [^ \ s] * $ samsvarer nøyaktig 2 ordsord ^ ^ ^ ^ s] * \ s [^ \ s] * matcher søkeord med minst 2 ord (2 og flere) ^ ([^ \ 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 en rekke ord (dvs. 2 eller flere ord). Når det brukes til å sortere analytiske data, er dette et kraftig uttrykk.

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å noen punkt 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.

11. Gyldig telefonnummer

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

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

Siden dette kan forvandle seg til et ganske komplisert emne, anbefaler jeg å skumme denne Stack-tråden for mer detaljerte svar.

12. Leading & Trailing Whitespace

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

Bruk denne kodestykket til å trekke ut ledende / bakre hvitt 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.

13. Trekk Image Source

 \ <* [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.

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 bare 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 vanlige uttrykket laget for denne bestemte datasyntaxen.

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 videodelingsstedet 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.

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 kan du 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.

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 koden nyttig om du svarer til 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.

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 kontrollerer @mention syntaks som er perfekt for automatisk å skanne innholdet i en tweet (eller tweets).

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.

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 selektorer. Den kan brukes av et hvilket som helst antall grunner, muligens for å se biter av CSS eller for å fjerne dupliserte egenskaper.

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.

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.

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 gjengivelsesmotorer.

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

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.

25. Parse E-post Header

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

Med denne ene linjen med kode kan du analysere gjennom en e-post header for å trekke ut "til" informasjon fra toppteksten. 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.

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.

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 for 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.

28. Legg til rel = "nofollow" til Links

 (  ] *) (): (? | (?: (?: (?: 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 = "nofollow" -attributtet 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.

30. Google Search Syntax

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

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

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

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 dem inn i kommentarfeltet nedenfor.

Nå Les: 50 Nyttige CSS-utsnitt Hver designer burde ha

Lytro Illum lar deg omfokusere bilder etter at du har fanget dem

Fotografering har eksistert lenge, men det har ikke vært mye fremgang de siste årene. Sikker på at sensorene i våre kameraer og DSLR blir bedre og bedre, og vi får kule teknologier som WiFi-tilkobling, men mediet selv har ikke forandret seg mye. Vi fanger fortsatt flat 2D-bilder, med de eneste forbedringene som er størrelsen og detaljene på disse bildene. Innti

(Tekniske og design tips)

Koding av en grasiøs Brødcrumb Navigasjonsmeny i CSS3

Denne artikkelen er en del av vår "HTML5 / CSS3 Tutorials Series" - dedikert til å gjøre deg til en bedre designer og / eller utvikler. Klikk her for å se flere artikler fra samme serie. Navigasjonsmenyer og koblinger er muligens de viktigste grensesnittelementene til et weboppsett. Dette er de eneste uttakene for brukere å reise mellom sider og samhandle med alt innholdet du har opprettet. Bre

(Tekniske og design tips)