30 Regex-codefragmenten Alle webontwikkelaars moeten dit weten

Reguliere expressies zijn een krachtig hulpmiddel dat zich in de gereedschapsriem van elke ontwikkelaar zou moeten bevinden. Ze kunnen overeenkomen met een reeks tekens op basis van zeer complexe parameters, waardoor u veel tijd kunt besparen bij het bouwen van dynamische websites.

Webontwikkelaars worden geconfronteerd met verschillende taken dan softwareontwikkelaars, maar veel van dezelfde codefundamentals blijven bestaan. Reguliere expressies (of regex ) hebben een steile initiële leercurve, maar ze kunnen enorm krachtig zijn als ze correct worden gebruikt .

Het lastigste deel is het leren van de syntaxis en leren hoe je je eigen regexcode vanuit het niets kunt schrijven. Om tijd te besparen heb ik 30 verschillende regex-codefragmenten georganiseerd die u kunt opnemen in ontwikkelingsprojecten. En omdat regex niet beperkt is tot één taal, kunt u deze fragmenten toepassen op alles van JavaScript tot PHP of Python .

1. Wachtwoordsterkte

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

Het controleren van de sterkte van een wachtwoord is vaak subjectief, dus er is geen absoluut correct antwoord. Maar ik heb het gevoel dat dit regex-fragment een goed startpunt is als je niet vanuit het niets je eigen wachtwoordsterktecontrole wilt schrijven.

2. Hexadecimale kleur

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

Het gebied van webontwikkeling is alomtegenwoordig met hex kleurcodes. Dit regex-fragment kan worden gebruikt om hex-code overeenkomsten van elke tekenreeks voor welk doel dan ook te verkrijgen.

3. Valideer het e-mailadres

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

Een van de meest voorkomende taken voor een ontwikkelaar is om te controleren of een tekenreeks is opgemaakt in de stijl van een e-mailadres. Er zijn veel verschillende varianten om deze taak te volbrengen, dus deze SitePoint-link biedt twee verschillende codefragmenten voor het controleren van de e-mailsyntaxis tegen een tekenreeks.

4. IPv4-adres

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

Vergelijkbaar met een e-mailadres is het typische IP-adres dat wordt gebruikt om een ​​specifieke computer te identificeren die verbinding met internet maakt. Deze reguliere expressie controleert een tekenreeks om te zien of deze de syntaxis van het IPv4-adres volgt.

5. IPv6-adres

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

Als alternatief kunt u een adres voor de nieuwere IPv6-syntaxis controleren met dit geavanceerdere regex-fragment. Het verschil is klein, hoewel essentieel tijdens de ontwikkeling.

6. Duizend scheidingsteken

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

Traditionele nummeringssystemen vereisen een komma, punt of een ander teken om de drie cijfers in een groter aantal. Deze regex-code werkt op elk nummer en past elk door u gekozen merk toe op elk derde cijfer dat in duizenden, miljoenen, enzovoort wordt gescheiden.

7. Voer HTTP naar Hyperlink uit

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

Of je nu in JavaScript, Ruby of PHP werkt, deze reguliere expressie kan erg nuttig zijn. Het zal elke URL-string controleren om te zien of het een HTTP / HTTPS-voorvoegsel heeft, en zo niet, plaats het dan overeenkomstig.

8. Trek domein van URL

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

Elk websitedomein bevat het eerste protocol (HTTP of HTTPS) en vaak een subdomein plus het extra paginapad. U kunt dit fragment gebruiken om dit alles door te snijden en alleen de domeinnaam te retourneren zonder extra franje.

9. Sorteer Trefwoorden op Word Count

 ^ [^ \ s] * $ komt overeen met exact zoekwoord van één woord ^ [^ \ s] * \ s [^ \ s] * $ komt exact overeen met trefwoord van twee woorden ^ [^ \ s] * \ s [^ \ s] * komt overeen met trefwoorden van minimaal 2 woorden (2 en meer) ^ ([^ \ s] * \ s) {2} [^ \ s] * $ komt overeen met exact trefwoord van 3 woorden ^ ([^ \ s] * \ s ) {4} [^ \ s] * $ komt overeen met zoekwoorden van 5 woorden en meer (longtail) 

Gebruikers van Google Analytics en Webmasterhulpprogramma's zullen echt genieten van deze reguliere expressie. Het kan zoekwoorden sorteren en organiseren op basis van het aantal woorden dat in een zoekopdracht wordt gebruikt.

Dit kan numeriek specifiek zijn (dat wil zeggen slechts 5 woorden) of het kan overeenkomen met een reeks woorden (dwz 2 of meer woorden). Wanneer gebruikt om analysegegevens te sorteren, is dit één krachtige uitdrukking.

10. Zoek een geldige Base64-reeks in PHP

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

Als je een PHP-ontwikkelaar bent, moet je op een bepaald moment de code doorspitten op zoek naar Base64-gecodeerde binaire objecten. Dit fragment kan op alle PHP-codes worden toegepast en zal controleren op bestaande Base64-reeksen.

11. Geldig telefoonnummer

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

Kort, lief en ter zake. Deze regex-code valideert elke traditionele syntaxis van het telefoonnummer gebaseerd op de Amerikaanse stijl van telefoonnummers.

Omdat dit een vrij ingewikkeld onderwerp kan worden, raad ik aan deze Stack-thread af te spelen voor meer gedetailleerde antwoorden.

12. Leading & Trailing Whitespace

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

Gebruik dit codefragment om de eerste / achterste witruimte uit een tekenreeks te verwijderen. Dit is misschien geen probleem, maar soms kan het de uitvoer beïnvloeden wanneer het uit een database wordt gehaald of op een andere documentcodering wordt toegepast.

13. Trek Afbeeldingsbron

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

Als u om welke reden dan ook de bron van een afbeelding rechtstreeks uit HTML moet halen, is dit codefragment de perfecte oplossing. Hoewel het probleemloos kan worden uitgevoerd op de backend, moeten frontend JS-ontwikkelaars in plaats daarvan vertrouwen op de .attr () -methode van jQuery voor de frontend.

14. Valideer de datum in DD / MM / JJJJ-indeling

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

Datums zijn lastig omdat ze kunnen worden weergegeven als tekst + cijfers of alleen als cijfers met verschillende indelingen. PHP heeft een fantastische datumfunctie, maar dit is niet altijd de beste keuze als je een onbewerkte string trekt. Overweeg in plaats daarvan deze reguliere expressie te gebruiken die is gemaakt voor deze specifieke datumsyntaxis.

15. YouTube-ID-overeenkomst video

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

YouTube heeft jarenlang dezelfde URL-structuur behouden omdat het gewoon werkt. Het is ook de meest populaire site voor het delen van video's op het web, dus YouTube-video's hebben de neiging het meeste verkeer te genereren.

Als je een YouTube-video-ID uit een URL moet halen, is deze regex-code perfect en zou deze perfect moeten werken voor alle varianten van YouTube-URL-structuren.

16. Geldig ISBN

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

Gedrukte boeken volgen een systeem van nummering dat bekend staat als ISBN. Dit kan behoorlijk lastig worden als je de verschillen tussen ISBN-10 en ISBN-13 overweegt.

Met dit ongelooflijke fragment kun je echter een ISBN-nummer valideren en controleren of het ISBN10 of 13 is. Alle code is geschreven in PHP, dus dit zou bijzonder nuttig voor webontwikkelaars moeten blijken te zijn.

17. Controleer de postcode

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

De maker van dit fragment heeft niet alleen zijn werk gratis uitgebracht, maar hij nam ook de tijd om het uit te leggen. U vindt dit fragment nuttig, of u nu een typische 5-cijferige postcode of de langere 9-cijferige versie combineert.

Houd in gedachten dat dit voornamelijk bedoeld is voor het Amerikaanse systeem van postcodes, dus dit kan aanpassingen in andere landen vereisen.

18. Geldige Twitter-gebruikersnaam

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

Hier is een heel klein codefragment voor het matchen van Twitter-gebruikersnamen in een reeks. Het controleert de syntaxis van @mention die perfect is voor het automatisch scannen van de inhoud van een tweet (of tweets).

19. Creditcardnummers

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

Het valideren van een creditcardnummer vereist vaak een veilig platform dat elders online wordt gehost. Maar regex kan worden gebruikt voor de minimale vereisten van een typisch creditcardnummer.

Een uitgebreidere lijst met codes voor individuele kaarten vindt u hier. Dit omvat Visa, MasterCard, Discover en vele anderen.

20. Vind CSS-attributen

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

Het komt zelden voor dat we regex over CSS uitvoeren, maar het is ook geen ongelofelijke rare situatie.

Dit codefragment kan worden gebruikt om elke overeenkomende CSS-eigenschap en -waarde uit afzonderlijke selectors te halen. Het kan om een ​​aantal redenen worden gebruikt, bijvoorbeeld om stukjes CSS te bekijken of om dubbele eigenschappen te verwijderen.

21. Strip HTML-opmerkingen

Als u om welke reden dan ook alle opmerkingen uit een HTML-blok moet verwijderen, dan is dit de te gebruiken regex-code. Samen met de expressie vindt u een PHP-voorbeeld met preg_replace.

22. URL van het Facebook-profiel

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

Facebook is ongelooflijk populair en heeft veel verschillende URL-schema's doorlopen. In een situatie waarin u profiel-URL's van gebruikers neemt, kan het handig zijn strings te ontleden en te bevestigen dat ze op de juiste manier zijn gestructureerd. Dit fragment kan precies dat doen en het is perfect voor alle links in FB-stijl.

23. Controleer de versie van Internet Explorer

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

De overstap van Microsoft naar Edge was niet unaniem en veel mensen vertrouwen nog steeds op klassieke Internet Explorer. Ontwikkelaars moeten vaak controleren op versies van IE om inconsistenties met rendering engines te verwerken.

Dit fragment kan in JavaScript worden gebruikt om een ​​browseragent te testen op basis van welke versie van Internet Explorer (5-11) wordt gebruikt.

24. Prijs ophalen

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

Prijzen zijn er in verschillende formaten die decimalen, komma's en valutasymbolen bevatten. Deze reguliere expressie kan al deze verschillende indelingen controleren om een ​​prijs uit elke reeks te halen.

25. Ontleed de e-mailkoptekst

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

Met deze enkele coderegel kunt u door een e-mailheader bladeren om 'naar' informatie uit de koptekst te halen. Het kan samen met meerdere samengevoegde e-mails worden gebruikt.

Als u liever regex voor deze taak wilt vermijden, kunt u in plaats daarvan vertrouwen op een ontleedbibliotheek.

26. Vergelijk een bepaald Filetype

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

Wanneer u te maken hebt met verschillende bestandsindelingen zoals .xml, .html en .js, kan het helpen om bestanden zowel lokaal als door gebruikers te controleren. Dit fragment trekt een bestandsextensie om te controleren of het geldig is van een reeks geldige extensies die naar behoefte kunnen worden gewijzigd.

27. Combineer een URL-reeks

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

Dit fragment kan zowel voor HTTPS- als voor HTTP-reeksen worden gebruikt om te controleren of de tekst overeenkomt met de traditionele syntaxis van het TLD-domein. Er is ook een eenvoudige implementatie van deze regex met RegExp van JavaScript.

28. Voeg rel = "nofollow" toe aan koppelingen

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

Als u met een batch HTML-code werkt, kan het afschuwelijk zijn om handmatige arbeid toe te passen in repetitieve taken. Reguliere expressies zijn perfect voor deze gelegenheid en ze zullen heel wat tijd besparen.

Dit fragment kan alle ankerlinks uit een HTML-blok trekken en het kenmerk rel = "nofollow" aan elk element toevoegen. De ontwikkelaar die deze code schreef, was zo vriendelijk om de onbewerkte uitdrukking plus een werkend voorbeeld in PHP te publiceren.

29. Media Query-overeenkomst

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

Splitsen CSS-mediaquery's op in hun parameters en eigenschappen. Dit kan u helpen om externe CSS schoner te analyseren met een meer directe focus op hoe de code werkt.

30. Syntaxis van Google Zoeken

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

U kunt uw eigen regex-code maken voor het manipuleren van doorzoekbare tekst met de handelsmerksyntax van Google. Het plusteken (+) geeft extra trefwoorden aan en het minteken (-) geeft woorden aan die moeten worden genegeerd en uit de resultaten moeten worden verwijderd.

Het is een nogal gecompliceerd fragment, maar op de juiste manier gebruikt, kan het een basis bieden voor het bouwen van uw eigen zoekalgoritme.

Afronden

Het pad naar mastering regex is lang maar lonend als je eraan vasthoudt. Beyond reguliere regex-tools de beste manier om te studeren is door herhaling. Probeer webtoepassingen te bouwen die afhankelijk zijn van deze regex-fragmenten om te leren hoe ze werken in een echt werkende webapp. En als je andere fragmenten hebt om aan te bevelen dat je ze kunt plaatsen in het gedeelte met opmerkingen hieronder.

Nu lezen: 50 nuttige CSS-fragmenten die elke designer zou moeten hebben

Samsung Galaxy S8 - Het vlaggenschip dat de toekomst van het bedrijf kan veranderen

In 2016 slaagde Samsung erin zichzelf in hete soep te laten landen vanwege de catastrofale mislukking van de Note 7. Algemeen beschouwd als een van de grootste schandalen in de technische industrie, nam de goede reputatie van Samsung een pak slaag over de mislukkingen van de Note 7 . Nu, met het Koreaanse bedrijf dat officieel de Galaxy S8 lanceert, wordt de vraag: zal de S8 Samsung toestaan ​​verder te gaan met het fiasco van Note 7, of blijft de S8 het Koreaanse bedrijf op een donker pad leiden?Voo

(Technische en ontwerptips)

15 nuttige webontwerp-lessen die u kunt leren via YouTube

Of je nu een professional of een newbie-ontwerper bent, door continu te leren en je vaardigheden te perfectioneren, word je een nog betere. Een ontwerper zijn, is meer dan alleen het ontwerpen van visitekaartjes en websitesjablonen, omdat je op de hoogte moet blijven van de snelgroeiende markt en moet werken aan het beheersen van je techniek

(Technische en ontwerptips)