30 utili snippet di codice Regex per sviluppatori Web

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 molto 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. Espressioni regolari (o regex) avere a ripida curva di apprendimento iniziale, ma possono essere tremendamente potente se usato 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 JavaScript a PHP o Pitone.

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 si desidera scrivere da zero il proprio correttore di forza della password. (Fonte)

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. (Fonte)

3. Convalidare l'indirizzo e-mail

/[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]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. (Fonte)

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 determinato computer che accede a Internet. Questa espressione regolare controllerà una stringa per vedere se segue la sintassi dell'indirizzo IPv4. (Fonte)

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. (Fonte)

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 maggiore. Questo codice regex funziona su qualsiasi numero e applica qualsiasi segno che scegli a ogni terza cifra che si divide in migliaia, milioni, ecc. (Fonte)

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 di URL per vedere se ha un prefisso HTTP / HTTPS e, in caso contrario, lo affiderà di conseguenza. (Fonte)

8. Estrarre 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 ciò e restituire solo il nome del dominio senza extra fronzoli. (sorgentel

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 (vale a dire solo 5 parole) o può corrispondere a un intervallo di parole (ad esempio 2 o più parole). Quando viene utilizzato per ordinare i dati di analisi, questa è una potente espressione. (Fonte)

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. (Fonte)

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. (Fonte)

12. Spazio bianco iniziale e finale

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

Usa 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. (Fonte)

13. Pull Image Source)

\< *[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 affidarsi al metodo .attr () di jQuery per il frontend. (Fonte)

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 per la 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. (Fonte)

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 più 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. (Fonte)

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 estremamente utile per gli sviluppatori web. (Fonte)

17. Controlla il codice postale

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

Il creatore di questo frammento non solo ha rilasciato il suo lavoro gratuitamente, ma ha anche avuto il tempo di 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. (Fonte)

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 per @citare sintassi perfetta per la scansione automatica dei contenuti di un tweet (o tweet). (Fonte)

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. (Fonte)

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à e valore CSS corrispondenti dai singoli selettori. Può essere utilizzato per qualsiasi numero di motivi, possibilmente per visualizzare blocchi di CSS o per rimuovere proprietà duplicate. (Fonte)

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 di PHP usando preg_replace. (Fonte)

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. (Fonte)

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. (Fonte)

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. (Fonte)

25. Parse E-mail Header

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

Con questa singola riga di codice è possibile analizzare tramite un'intestazione e-mail per estrarre “a” informazioni 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. (Fonte)

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à. (Fonte)

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. (Fonte)

28. Aggiungi rel =”non seguire” 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 il rel =”non seguire” attributo 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. (Fonte)

30. Sintassi della ricerca Google

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

Puoi creare il tuo codice regex personale per manipolare il testo ricercabile utilizzando la sintassi del marchio di Google. Il segno più (+) indica parole chiave aggiuntive e il segno meno (-) indica 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. (Fonte)

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 una vera e propria web app 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