30 snippet di codice Regex che tutti gli sviluppatori Web dovrebbero conoscere

Le espressioni regolari sono uno strumento potente che dovrebbe essere presente nella cintura degli attrezzi di ogni sviluppatore. Possono essere confrontati con una stringa di caratteri basata su parametri molto complessi, che possono far risparmiare un sacco di tempo quando si costruiscono siti Web dinamici.

Gli sviluppatori Web affrontano compiti diversi rispetto agli sviluppatori di software, ma restano molti degli stessi fondamentali del codice. Le espressioni regolari (o regex ) hanno una curva di apprendimento iniziale ripida, ma possono essere tremendamente potenti se usate correttamente .

La parte più difficile è imparare la sintassi e imparare come scrivere il proprio codice regex da zero. Per risparmiare tempo, ho organizzato 30 diversi frammenti di codice regex che puoi incorporare in progetti di sviluppo. E poiché regex non è limitato a una singola lingua, puoi applicare questi snippet a qualsiasi cosa, da JavaScript a PHP o Python .

1. Forza della password

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

Il controllo della forza di una password è spesso soggettivo, quindi non esiste una risposta assolutamente corretta. Ma ritengo che questo snippet di regex sia un ottimo punto di partenza se non vuoi scrivere da zero il tuo correttore di forza della password.

2. Colore esadecimale

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

Il campo dello sviluppo web è onnipresente con codici colore esadecimali. Questo snippet di espressioni regolari può essere utilizzato per estrarre corrispondenze di codice esadecimale da qualsiasi stringa per qualsiasi scopo.

3. Convalidare l'indirizzo e-mail

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

Uno dei compiti più comuni per uno sviluppatore è verificare se una stringa è formattata nello stile di un indirizzo e-mail. Esistono molte varianti diverse per eseguire questa attività, quindi questo collegamento SitePoint offre due distinti frammenti di codice per il controllo della sintassi e-mail su una stringa.

4. Indirizzo IPv4

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

Simile a un indirizzo e-mail è il tipico indirizzo IP utilizzato per identificare un computer specifico che accede a Internet. Questa espressione regolare controllerà una stringa per vedere se segue la sintassi dell'indirizzo IPv4.

5. Indirizzo IPv6

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

In alternativa, potresti voler controllare un indirizzo per la più recente sintassi IPv6 con questo snippet di regex più avanzato. La differenza è minore seppur vitale durante lo sviluppo.

6. Migliaia di separatori

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

I sistemi di numerazione tradizionali richiedono virgola, punto o qualche altro segno ogni terza cifra in un numero più grande. Questo codice regex funziona su qualsiasi numero e applicherà qualsiasi segno che scegli per ogni terza cifra che separa in migliaia, milioni, ecc.

7. Prepend HTTP to Hyperlink

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

Sia che tu stia lavorando in JavaScript, in Ruby o in PHP, questa espressione regolare può rivelarsi molto utile. Controllerà qualsiasi stringa URL per vedere se ha un prefisso HTTP / HTTPS e, in caso contrario, lo affiderà di conseguenza.

8. Estrai il dominio dall'URL

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

Ogni dominio del sito Web contiene il protocollo iniziale (HTTP o HTTPS) e spesso un sottodominio più il percorso della pagina aggiuntiva. Puoi usare questo snippet per tagliare tutto e restituire solo il nome del dominio senza extra fronzoli.

9. Ordina parole chiave per numero

 ^ [^ \ s] * $ corrisponde esattamente alla parola chiave a 1 parola ^ [^ \ s] * \ s [^ \ s] * $ corrisponde esattamente alla parola chiave a 2 parole ^ [^ \ s] * \ s [^ \ s] * corrisponde a parole chiave di almeno 2 parole (2 e più) ^ ([^ \ s] * \ s) {2} [^ \ s] * $ corrisponde esattamente alla parola chiave a 3 parole ^ ([^ \ s] * \ s ) {4} [^ \ s] * $ corrisponde a 5 parole e più parole chiave (longtail) 

Gli utenti di Google Analytics e Strumenti per i Webmaster apprezzeranno davvero questa espressione regolare. Può ordinare e organizzare le parole chiave in base al numero di parole utilizzate in una ricerca.

Questo può essere numericamente specifico (cioè solo 5 parole) o può corrispondere a un intervallo di parole (cioè 2 o più parole). Quando viene utilizzato per ordinare i dati di analisi, questa è una potente espressione.

10. Trova una stringa Base64 valida in PHP

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

Se sei un dev PHP allora a un certo punto potresti dover analizzare il codice alla ricerca di oggetti binari codificati Base64. Questo snippet può essere applicato a tutto il codice PHP e controlla eventuali stringhe Base64 esistenti.

11. Numero di telefono valido

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

Breve, dolce e al punto. Questo codice regex convalida qualsiasi sintassi del numero di telefono tradizionale basata principalmente sullo stile americano dei numeri di telefono.

Poiché questo può trasformarsi in un argomento abbastanza complicato, ti consiglio di sfogliare questo thread Stack per ottenere risposte più dettagliate.

12. Spazio bianco iniziale e finale

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

Utilizza questo snippet di codice per estrarre lo spazio bianco iniziale / finale da una stringa. Questo potrebbe non essere un grosso problema, ma a volte può influire sull'output quando viene estratto da un database o applicato ad un'altra codifica del documento.

13. Estrai origine immagine

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

Se per qualche motivo hai bisogno di estrarre la fonte di un'immagine direttamente dall'HTML, questo frammento di codice è la soluzione perfetta. Sebbene possa funzionare senza problemi sul back-end, gli sviluppatori JS di frontend dovrebbero invece fare affidamento sul metodo .attr () di jQuery per il frontend.

14. Convalida la data nel formato GG / MM / AAAA

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

Le date sono difficili perché possono apparire come testo + numeri o semplicemente come numeri con formati diversi. PHP ha una fantastica funzione di data, ma questa non è sempre la scelta migliore quando si tira una stringa grezza. Considera invece l'utilizzo di questa espressione regolare creata per questa sintassi specifica della data.

15. Match ID video di YouTube

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

YouTube ha mantenuto la stessa struttura di URL per anni perché funziona. È anche il sito di condivisione video più popolare sul Web, quindi i video di YouTube tendono a generare il maggior numero di traffico.

Se hai bisogno di estrarre un ID video di YouTube da un URL, questo codice regex è perfetto e dovrebbe funzionare perfettamente per tutte le varianti delle strutture URL di YouTube.

16. ISBN valido

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

I libri stampati seguono un sistema di numerazione noto come ISBN. Questo può diventare piuttosto complicato se si considerano le differenze tra ISBN-10 e ISBN-13.

Tuttavia questo incredibile frammento ti permette di convalidare un numero ISBN e controllare se è ISBN 10 o 13. Tutto il codice è scritto in PHP, quindi questo dovrebbe rivelarsi eccezionalmente utile per gli sviluppatori web.

17. Controllare il codice postale

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

Il creatore di questo frammento non solo ha rilasciato il suo lavoro gratuitamente, ma si è anche preso il tempo per spiegarlo. Trovi questo snippet utile se stai abbinando un tipico codice postale a 5 cifre o la versione a 9 cifre più lunga.

Tieni presente che questo è inteso principalmente per il sistema americano di codici postali in modo che questo potrebbe richiedere modifiche per altri paesi.

18. Nome utente Twitter valido

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

Ecco uno snippet di codice molto piccolo per la corrispondenza con i nomi utente di Twitter trovati in una stringa. Controlla la sintassi @mention che è perfetta per la scansione automatica dei contenuti di un tweet (o tweet).

19. Numeri di carta di credito

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

La convalida di un numero di carta di credito spesso richiede una piattaforma sicura ospitata altrove online. Ma regex può essere utilizzato per i requisiti minimi di un tipico numero di carta di credito.

Un elenco più completo di codici per le singole carte può essere trovato qui. Questo include Visa, MasterCard, Discover e molti altri.

20. Trova gli attributi CSS

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

Può essere raro eseguire regex su CSS, ma non è nemmeno una situazione strana.

Questo snippet di codice può essere utilizzato per estrarre ogni proprietà CSS e valore corrispondente dai singoli selettori. Può essere utilizzato per qualsiasi numero di motivi, possibilmente per visualizzare blocchi di CSS o per rimuovere proprietà duplicate.

21. Elimina commenti HTML

Se per qualsiasi motivo è necessario rimuovere tutti i commenti da un blocco di HTML, questo è il codice regex da utilizzare. Insieme all'espressione, troverai un esempio in PHP usando preg_replace.

22. URL del profilo di Facebook

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

Facebook è incredibilmente popolare e ha attraversato molti schemi URL diversi. In una situazione in cui stai utilizzando gli URL del profilo dagli utenti, potrebbe essere utile analizzare le stringhe e confermare che sono strutturate correttamente. Questo frammento può fare esattamente questo ed è perfetto per tutti i link in stile FB.

23. Verifica la versione di Internet Explorer

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

Il passaggio di Microsoft a Edge non è stato unanime e molte persone si affidano ancora al classico Internet Explorer. Gli sviluppatori spesso hanno bisogno di verificare la presenza di versioni di IE per gestire incongruenze con i motori di rendering.

Questo snippet può essere utilizzato in JavaScript per testare un agente browser in base a quale versione di Internet Explorer (5-11) viene utilizzata.

24. Prezzo estratto

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

I prezzi sono disponibili in una varietà di formati che contengono decimali, virgole e simboli di valuta. Questa espressione regolare può controllare tutti questi diversi formati per ottenere un prezzo da qualsiasi stringa.

25. Parse E-mail Header

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

Con questa singola riga di codice è possibile analizzare tramite un'intestazione e-mail per estrarre informazioni "a" dall'intestazione. Può essere utilizzato in tandem con più e-mail collegate tra loro.

Se si preferisce evitare l'espressione regolare per questa attività, si potrebbe invece fare affidamento su una libreria di analisi.

26. Abbina un particolare tipo di file

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

Quando hai a che fare con vari formati di file come .xml, .html e .js, può aiutare a controllare i file sia localmente che caricati dagli utenti. Questo snippet estrae un'estensione di file per verificare se è valida da una serie di estensioni valide che possono essere modificate secondo necessità.

27. Abbina una stringa URL

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

Questo snippet può essere utilizzato sia per HTTPS che per le stringhe HTTP per verificare se il testo corrisponde alla sintassi del dominio TLD tradizionale. C'è anche una semplice implementazione di questa regex utilizzando il RegExp di JavaScript.

28. Aggiungi rel = "nofollow" ai collegamenti

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

Se stai lavorando con un lotto di codice HTML, può essere raccapricciante applicare manodopera manuale a compiti ripetitivi. Le espressioni regolari sono perfette per questa occasione e faranno risparmiare un sacco di tempo.

Questo snippet può estrarre tutti i link di ancoraggio da un blocco di HTML e aggiungere l' attributo rel = "nofollow" a ogni elemento. Lo sviluppatore che ha scritto questo codice è stato così gentile da pubblicare l'espressione raw più un esempio funzionante in PHP.

29. Media Query Match

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

Suddividi le query multimediali CSS nei loro parametri e proprietà. Questo può aiutarti ad analizzare i CSS esterni in modo più pulito con un focus più diretto su come funziona il codice.

30. Sintassi della ricerca Google

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

Puoi creare il tuo codice regex per manipolare il testo ricercabile utilizzando la sintassi del marchio di Google. Il segno più (+) indica parole chiave aggiuntive e il segno meno (-) indica le parole che devono essere ignorate e rimosse dai risultati.

È uno snippet piuttosto complicato ma usato correttamente può fornire una base per costruire il proprio algoritmo di ricerca.

Incartare

Il percorso per padroneggiare la regex è lungo ma gratificante se ci si attiene. Al di là degli strumenti tipici di regex, il modo migliore per studiare è attraverso la ripetizione. Prova a creare applicazioni web che si basano su questi snippet di espressioni regolari per scoprire come funzionano in un'applicazione web funzionante. E se hai altri snippet da suggerire, puoi pubblicarli nell'area dei commenti qui sotto.

Ora Leggi: 50 utili snippet CSS che ogni designer dovrebbe avere

Fresh Resource for Web Developers - Aprile 2017

Dall'inizio dell'anno 2017, molto è cambiato nel mondo dello sviluppo web, con nuove app e risorse in arrivo a giorni alterni . Al passo con la tendenza, sto condividendo con te un paio di nuove risorse per lo sviluppo web.Queste risorse includono un'app Web che ti aiuterà a imparare il nuovo modulo Grid CSS nativo, un corso per aiutarti a imparare React fin dall'inizio, un riferimento per imparare alcuni modelli di progettazione PHP per migliorare i tuoi codici PHP, e alcuni altri.

(Consigli tecnici e di design)

15 (altro) Inspiring esperimenti HTML5

A meno che tu non abbia vissuto sotto una roccia, avrai sentito parlare di HTML5. Ora è ovunque, grazie alla promozione dell'ex CEO di Apple Steve Jobs e di alcuni sviluppatori che credono che HTML5 possa prendere il controllo di Flash.Beh, in effetti non vediamo che questa situazione sia ancora accaduta, ma HTML5 è davvero magica in riferimento alle sue capacità video, all'illustrazione su tela e alle animazioni che funzionano davvero bene e senza intoppi. I

(Consigli tecnici e di design)