30 Användbara Regex Kod Snippets för webbutvecklare

Regelbundna uttryck är ett kraftfullt verktyg som borde vara i varje utvecklarens verktygsband. De kan matcha en rad tecken baserat på mycket komplexa parametrar, vilket kan spara mycket tid när du bygger dynamiska webbplatser.

Webbutvecklare står inför olika uppgifter än programvaruutvecklare men många av samma kodgrunder kvarstår. Regelbundna uttryck (eller regex) har en brant initial inlärningskurva, men de kan vara oerhört kraftfull när den används korrekt.

Den svåraste delen är att lära sig syntaxen och lära sig hur man skriver din egen regex kod från början. För att spara tid har jag organiserat 30 olika regex kodrader som du kan integrera i utvecklingsprojekt. Och eftersom regex inte är begränsat till ett enda språk kan du tillämpa dessa snippets på allt från JavaScript till PHP eller Pytonorm.

1. Lösenordsstyrka

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

Att kontrollera ett lösenords styrka är ofta subjektivt, så det finns inget absolut korrekt svar. Men jag tycker att detta regex-utdrag är en bra utgångspunkt om du inte vill skriva en egen lösenordsstyrkekontroll från början. (Källa)

2. Hexadecimal Färg

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

Fältet för webbutveckling är allestädes närvarande med hex färgkoder. Detta regex-utdrag kan användas för att dra hexkodsmatcher från någon sträng för något ändamål. (Källa)

3. Bekräfta e-postadress

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

En av de vanligaste uppgifterna för en utvecklare är att kontrollera om en sträng är formaterad i stil med en e-postadress. Det finns många olika varianter för att uppnå denna uppgift, så denna SitePoint-länk erbjuder två distinkta kodfragment för att kontrollera e-postsyntax mot en sträng. (Källa)

4. IPv4-adress

/\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 /

På samma sätt som en e-postadress är den typiska IP-adressen som används för att identifiera en specifik dator som använder Internet. Detta regelbundna uttryck kommer att kolla en sträng för att se om det följer IPv4-adresssyntaxen. (Källa)

5. IPv6-adress

(([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 kolla en adress för den nyare IPv6-syntaxen med detta mer avancerade regex-utdrag. Skillnaden är mindre om än viktig under utvecklingen. (Källa)

6. Tusentals separator

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

Traditionella nummereringssystem kräver ett komma, en period eller något annat märke varje tredje siffra i ett större antal. Denna regex-kod fungerar med vilket nummer som helst och kommer att tillämpa valfritt mark som du väljer att var tredje siffran separerar i tusentals miljoner, etc. (Källa)

7. Förbered HTTP till hyperlänk

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

Oavsett om du arbetar i JavaScript, Ruby eller PHP, kan det här regelbundna uttrycket vara mycket användbart. Det kommer att kontrollera vilken URL-sträng som helst för att se om den har ett HTTP / HTTPS-prefix, och om inte, förordna det i enlighet med det. (Källa)

8. Dra domän från URL

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

Varje webbplatsdomän innehåller det ursprungliga protokollet (HTTP eller HTTPS) och oftast en underdomän plus den extra sidbanan. Du kan använda det här klippet för att skära igenom allt detta och returnera bara domännamnet utan extra krusiduller. (SourceL

9. Sortera nyckelord med Word Count

^ [^ \ s] * $ matchar exakt 1-ordsordet ^ [^ \ s] * \ s [^ \ s] * $ matchar exakt 2-ordsordet ^ [^ \ s] * \ s [^ \ s] * matchar sökord med minst 2 ord (2 och mer) ^ ([^ \ s] * \ s) 2 [^ \ s] * $ matchar exakt 3-ords nyckelord ^ ([^ \ s] * \ s ) 4 [^ \ s] * $ matchar 5-ord-och-fler nyckelord (longtail)

Användare av Google Analytics och verktyg för webbansvariga kommer verkligen att njuta av det här vanliga uttrycket. Det kan sortera och organisera sökord baserat på antalet ord som används i en sökning.

Detta kan vara numeriskt specifikt (dvs bara 5 ord) eller det kan matcha en rad ord (dvs 2 eller flera ord). När det används för att sortera analysdata är detta ett kraftfullt uttryck. (Källa)

10. Hitta en giltig Base64-sträng i PHP

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

Om du är en PHP-dev då kan du på något sätt behöva analysera kod som söker efter Base64-kodade binära objekt. Detta stycke kan tillämpas på alla PHP-koder och kommer att kontrollera efter befintliga Base64-strängar. (Källa)

11. Giltigt telefonnummer

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

Kort, söt och till den punkten. Denna regex-kod kommer att validera alla traditionella telefonnummersyntaxer baserade på den amerikanska stilen av telefonnummer.

Eftersom det här kan bli ett ganska komplicerat ämne, rekommenderar jag att du skumar denna Stack-tråd för mer detaljerade svar. (Källa)

12. Leading & Trailing Whitespace

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

Använd den här kodrutan för att dra ut ledande / bakre mellanslag från en sträng. Det här kanske inte är en stor sak, men ibland kan det påverka resultatet när det dragits från en databas eller tillämpas på en annan dokumentkodning. (Källa)

13. Dra bildkälla)

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

Om du av någon anledning behöver dra ut en bilds källa direkt från HTML, är det här kodavsnittet den perfekta lösningen. Även om den kan springa smidigt på backenden, bör frontend JS devs istället förlita sig på jQuery's .attr () -metod för frontenden. (Källa)

14. Valideringsdatum 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) $?

Datum är svåra eftersom de kan visas som text + nummer, eller precis som siffror med olika format. PHP har en fantastisk datumfunktion men det här är inte alltid det bästa valet när man drar en rå sträng. Tänk istället att använda det här reguljära uttrycket för denna specifika datumsyntax. (Källa)

15. YouTube Video ID Match

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

YouTube har hållit samma webbadressstruktur i många år eftersom det bara fungerar. Det är också den mest populära videodelningsplatsen på webben, så YouTube-videoklipp tenderar att driva mest trafik.

Om du behöver dra ut ett YouTube-video-ID från en webbadress är denna regex-kod perfekt och ska fungera perfekt för alla varianter av YouTube-webbadressstrukturer. (Källa)

16. Giltigt ISBN

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

Tryckta böcker följer ett system med numrering som kallas ISBN. Detta kan bli ganska knepigt när du överväger skillnader mellan ISBN-10 och ISBN-13.

Men det här otroliga snippet gör att du kan validera ett ISBN-nummer och kontrollera om det är ISBN10 eller 13. Alla koden är skrivna i PHP, så det borde vara mycket användbart för webbutvecklare. (Källa)

17. Kontrollera postnummer

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

Skaparen av det här stycket släppte inte bara sitt arbete utan han tog också tid att förklara det. Du hittar det här snippet användbart om du matchar en typisk 5-siffrig postnummer eller den längre 9-siffriga versionen.

Tänk på det här menas främst för det amerikanska systemet med postnummer, så det kan kräva justeringar för andra länder. (Källa)

18. Giltigt Twitter-användarnamn

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

Här är en mycket liten kodbit för matchning mot Twitter användarnamn som finns i en sträng. Det kontrollerar för @nämna syntax som är perfekt för att automatiskt skanna innehållet i en tweet (eller tweets). (Källa)

19. Kreditkortsnummer

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

Att validera ett kreditkortsnummer kräver ofta en säker plattform värd för andra ställen online. Men regex kan användas för de minimala kraven för ett typiskt kreditkortsnummer.

En mer omfattande förteckning över koder för enskilda kort finns här. Detta inkluderar Visa, MasterCard, Discover och många andra. (Källa)

20. Hitta CSS-attribut

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

Det kan vara sällsynt att köra regex över CSS men det är inte en otroligt konstig situation heller.

Denna kodbit kan användas för att dra ut varje matchande CSS-egenskap och värde från enskilda väljare. Den kan användas av några olika orsaker, eventuellt för att se bitar av CSS eller för att ta bort dubbla egenskaper. (Källa)

21. Strip HTML-kommentarer

Om du av någon anledning behöver ta bort alla kommentarer från ett HTML-block, är det här den regex-kod som ska användas. Tillsammans med uttrycket hittar du ett PHP-exempel med preg_replace. (Källa)

22. Facebook-profiladress

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

Facebook är otroligt populär och har gått igenom många olika webbadresser. I en situation där du tar profiladresser från användare kan det vara bra att analysera strängar och bekräfta att de är ordentligt strukturerad. Detta fragment kan göra exakt det och det är perfekt för alla FB-stil länkar. (Källa)

23. Kontrollera versionen av Internet Explorer

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

Microsofts övergång till Edge har inte varit enhälligt och många människor är fortfarande beroende av klassisk Internet Explorer. Utvecklare behöver ofta kolla på versioner av IE för att hantera inkonsekvenser med återgivningsmotorer.

Denna kod kan användas i JavaScript för att testa ett webbläsareagent baserat på vilken version av Internet Explorer (5-11) som används. (Källa)

24. Extraktpris

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

Prissättningen kommer i en mängd olika format som innehåller decimaler, kommatecken och valutasymboler. Det här reguljära uttrycket kan kontrollera alla dessa olika format för att dra ut ett pris från vilken sträng som helst. (Källa)

25. Parse E-post Header

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

Med den här enkla koden kan du analysera genom en e-postrubrik för att dra ut “till” information från rubriken. Den kan användas i kombination med flera e-postmeddelanden.

Om du föredrar att undvika regex för den här uppgiften kan du istället lita på ett parsing-bibliotek. (Källa)

26. Matcha en viss filtyp

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

När du hanterar olika filformat som .xml, .html och .js kan det hjälpa till att kontrollera filer både lokalt och uppladdat av användare. Detta stycke drar en filtillägg för att kontrollera om den gäller från en serie av giltiga tillägg som kan ändras efter behov. (Källa)

27. Matcha en URL-sträng

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

Detta stycke kan användas både för HTTPS- och HTTP-strängar för att kontrollera om texten stämmer överens med den traditionella domännamnens domändomen. Det finns också en enkel implementering av denna regex med JavaScript-regExp. (Källa)

28. Lägg till rel =”nofollow” till länkar

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

Om du arbetar med en sats med HTML-kod kan det vara grymt att använda manuell arbetskraft till repetitiva uppgifter. Regelbundna uttryck är perfekta för detta tillfälle och de sparar mycket tid.

Detta fragment kan dra alla ankars länkar från ett HTML-block och lägga till rel =”nofollow” attribut till varje element. Utvecklaren som skrev denna kod var vänlig nog att publicera det råa uttrycket plus ett fungerande exempel i PHP.

29. Media Query Match

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

Bryta in CSS-mediafrågor i sina parametrar och egenskaper. Detta kan hjälpa dig att analysera extern CSS på ett renare sätt med ett mer direkt fokus på hur koden fungerar. (Källa)

30. Google Search Syntax

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

Du kan bygga din egen regex-kod för att manipulera sökbar text med Googles varumärkessyntax. Plustecknet (+) anger ytterligare nyckelord och minustecknet (-) anger ord som ska ignoreras och tas bort från resultat.

Det är ett ganska komplicerat utdrag, men används korrekt, det kan ge en bas för att bygga en egen sökalgoritm. (Källa)

Sammanfatta

Stigen till mastering regex är lång men givande om du klarar det. Utöver typiska regexverktyg är det bästa sättet att studera genom repetition. Prova att bygga webbprogram som bygger på dessa regex-utdrag för att lära dig hur de fungerar i en verkligt fungerande webapp. Och om du har andra utdrag att föreslå att du kan skicka dem i kommentarfältet nedan.

Läs nu:

50 Användbara CSS-utdrag Varje Designer ska ha