30 extraits de code Regex que tous les développeurs Web doivent savoir

Les expressions régulières sont un outil puissant qui devrait être dans la ceinture d'outils de chaque développeur. Ils peuvent correspondre à une chaîne de caractères basée sur des paramètres très complexes, ce qui peut vous faire gagner beaucoup de temps lors de la création de sites Web dynamiques.

Les développeurs Web font face à des tâches différentes de celles des développeurs de logiciels, mais la plupart des principes fondamentaux du code restent les mêmes. Les expressions régulières (ou regex ) ont une courbe d'apprentissage initiale abrupte, mais elles peuvent être extrêmement puissantes lorsqu'elles sont utilisées correctement .

La partie la plus délicate est d'apprendre la syntaxe et d'apprendre à écrire votre propre code regex à partir de zéro. Pour gagner du temps, j'ai organisé 30 extraits de code regex différents que vous pouvez intégrer dans des projets de développement. Et puisque regex n'est pas limité à une seule langue, vous pouvez appliquer ces extraits à n'importe quoi de JavaScript à PHP ou Python .

1. Force de mot de passe

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

Vérification de la force d'un mot de passe est souvent subjective, donc il n'y a pas de réponse correcte absolue. Mais je pense que cet extrait de regex est un bon point de départ si vous ne voulez pas écrire votre propre vérificateur de force de mot de passe à partir de zéro.

2. Couleur hexadécimale

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

Le domaine du développement web est omniprésent avec des codes de couleur hexadécimaux. Cet extrait de regex peut être utilisé pour extraire des correspondances de code hexadécimal à partir de n'importe quelle chaîne à n'importe quelle fin.

3. Valider l'adresse e-mail

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

L'une des tâches les plus courantes pour un développeur consiste à vérifier si une chaîne est formatée dans le style d'une adresse de messagerie. Comme il existe de nombreuses variantes pour accomplir cette tâche, ce lien SitePoint propose deux extraits de code distincts pour vérifier la syntaxe du courrier électronique par rapport à une chaîne.

4. Adresse 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 / 

Similaire à une adresse e-mail est l'adresse IP typique utilisée pour identifier un ordinateur spécifique d'accéder à Internet. Cette expression régulière vérifiera une chaîne pour voir si elle suit la syntaxe de l'adresse IPv4.

5. Adresse 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])) 

Vous pouvez également vérifier une adresse pour la syntaxe IPv6 plus récente avec cet extrait regex plus avancé. La différence est mineure bien que vitale pendant le développement.

6. Séparateur de milliers

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

Les systèmes de numérotation traditionnels requièrent une virgule, une période ou une autre marque chaque troisième chiffre d'un plus grand nombre. Ce code regex fonctionne sur n'importe quel nombre et appliquera n'importe quelle marque que vous choisissez à chaque troisième chiffre séparant en milliers, millions, etc.

7. Ajouter un lien HTTP au lien hypertexte

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

Que vous travailliez en JavaScript, Ruby ou PHP, cette expression régulière peut s'avérer très utile. Il vérifiera toute chaîne d'URL pour voir s'il a un préfixe HTTP / HTTPS et, si ce n'est pas le cas, ajoutera un préfixe en conséquence.

8. Extraire le domaine de l'URL

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

Chaque domaine de site Web contient le protocole initial (HTTP ou HTTPS) et souvent un sous-domaine plus le chemin de page supplémentaire. Vous pouvez utiliser cet extrait pour couper tout cela et retourner juste le nom de domaine sans fioritures supplémentaires.

9. Trier les mots clés par nombre de mots

 ^ [^ \ s] * $ correspond exactement au mot-clé de 1 mot ^ [^ \ s] * \ s [^ \ s] * $ correspond exactement au mot-clé de 2 mots ^ [^ \ s] * \ s [^ \ s] * correspond à des mots-clés d'au moins 2 mots (2 et plus) ^ ([^ \ s] * \ s) {2} [^ \ s] * $ correspond exactement à un mot-clé de 3 mots ^ ([^ \ s] * \ s ) {4} [^ \ s] * $ correspond à des mots-clés de 5 mots et plus (longtail) 

Les utilisateurs de Google Analytics et des outils pour les webmasters apprécieront vraiment cette expression régulière. Il peut trier et organiser les mots clés en fonction du nombre de mots utilisés dans une recherche.

Cela peut être numériquement spécifique (c'est-à-dire seulement 5 mots) ou correspondre à une gamme de mots (c'est-à-dire 2 mots ou plus). Lorsqu'il est utilisé pour trier les données d'analyse, il s'agit d'une expression puissante.

10. Trouver une chaîne Base64 valide en PHP

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

Si vous êtes un développeur PHP, vous aurez peut-être besoin d'analyser le code à la recherche d'objets binaires encodés en Base64. Cet extrait peut être appliqué à tout le code PHP et vérifiera toutes les chaînes Base64 existantes.

11. Numéro de téléphone valide

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

Court, doux, et au point. Ce code regex va valider toute syntaxe traditionnelle de numéro de téléphone basée principalement sur le style américain des numéros de téléphone.

Puisque cela peut se transformer en un sujet assez compliqué, je recommande d'écrémer ce fil Stack pour des réponses plus détaillées.

12. Espace blanc de début et de fin

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

Utilisez cet extrait de code pour extraire les espaces avant / arrière d'une chaîne. Cela peut ne pas être un gros problème, mais parfois, il peut affecter la sortie lorsqu'il est extrait d'une base de données ou appliqué à un autre codage de document.

13. Tirer la source de l'image

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

Si, pour une raison quelconque, vous devez extraire la source d'une image directement du HTML, cet extrait de code est la solution parfaite. Bien qu'il puisse fonctionner correctement sur le backend, les devs JS frontaux devraient plutôt s'appuyer sur la méthode .attr () de jQuery pour le frontend.

14. Valider la date au format JJ / MM / AAAA

 ^ (? :( ?: 31 (\ / | - | \.) (?: 0? [13578] | 1 [02])) \ 1 | (? :( ?: 29 | 30) (\ / | - | \.) (?: 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}) $ 

Les dates sont difficiles car elles peuvent apparaître sous forme de texte + chiffres, ou simplement sous forme de nombres avec différents formats. PHP a une fonction de date fantastique, mais ce n'est pas toujours le meilleur choix pour tirer une chaîne brute. Pensez plutôt à utiliser cette expression régulière faite pour cette syntaxe de date spécifique.

15. Correspondance ID vidéo YouTube

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

YouTube a conservé la même structure d'URL pendant des années, car cela fonctionne. Il s'agit également du site de partage de vidéos le plus populaire sur le Web. Les vidéos YouTube ont donc tendance à générer le plus de trafic.

Si vous devez sortir un identifiant vidéo YouTube d'une URL, ce code regex est parfait et devrait fonctionner parfaitement pour toutes les variantes de structures d'URL YouTube.

16. ISBN valide

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

Les livres imprimés suivent un système de numérotation appelé ISBN. Cela peut devenir difficile lorsque vous considérez les différences entre ISBN-10 et ISBN-13.

Cependant, cet extrait incroyable vous permet de valider un numéro ISBN et de vérifier si c'est ISBN10 ou 13. Tout le code est écrit en PHP, donc cela devrait s'avérer exceptionnellement utile pour les développeurs web.

17. Vérifiez le code postal

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

Le créateur de cet extrait a non seulement publié son travail gratuitement, mais il a également pris le temps de l'expliquer. Vous trouverez cet extrait utile si vous faites correspondre un code postal typique à 5 chiffres ou la version plus longue à 9 chiffres.

Gardez à l'esprit que cela est principalement destiné au système américain de codes postaux, ce qui peut nécessiter des ajustements pour d'autres pays.

18. Nom d'utilisateur Twitter valide

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

Voici un très petit extrait de code pour faire correspondre les noms d'utilisateur Twitter trouvés dans une chaîne. Il vérifie la syntaxe @mention qui est parfaite pour analyser automatiquement le contenu d'un tweet (ou tweets).

19. Numéros de carte de crédit

 ^ (?: 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 validation d'un numéro de carte de crédit nécessite souvent une plateforme sécurisée hébergée ailleurs en ligne. Mais regex peut être utilisé pour les exigences minimales d'un numéro de carte de crédit typique.

Une liste plus complète des codes pour les cartes individuelles peut être trouvée ici. Cela inclut Visa, MasterCard, Discover et bien d'autres.

20. Trouver des attributs CSS

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

Il peut être rare d'exécuter regex sur CSS, mais ce n'est pas une situation incroyablement étrange non plus.

Cet extrait de code peut être utilisé pour extraire toutes les propriétés et valeurs CSS correspondantes des sélecteurs individuels. Il peut être utilisé pour un certain nombre de raisons, éventuellement pour afficher des morceaux de CSS ou pour supprimer les propriétés en double.

21. Supprimer les commentaires HTML

Si, pour une raison quelconque, vous devez supprimer tous les commentaires d'un bloc HTML, il s'agit du code regex à utiliser. Avec l'expression, vous trouverez un exemple PHP utilisant preg_replace.

22. URL du profil Facebook

 /(?:http:\/\/)?(?????????????????????????????????:pages\/)? (?: [\ w \ -] * \ /) * ([\ w \ -] *) / 

Facebook est incroyablement populaire et a traversé de nombreux schémas d'URL différents. Dans une situation où vous prenez des URL de profil d'utilisateurs, il peut être utile d'analyser les chaînes et de confirmer qu'elles sont correctement structurées. Cet extrait peut faire exactement cela et il est parfait pour tous les liens de style FB.

23. Vérifiez la version d'Internet Explorer

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

Le passage de Microsoft à Edge n'a pas été unanime et beaucoup de gens comptent toujours sur Internet Explorer classique. Les développeurs ont souvent besoin de vérifier les versions d'IE pour gérer les incohérences avec les moteurs de rendu.

Cet extrait peut être utilisé en JavaScript pour tester un agent de navigateur en fonction de la version d'Internet Explorer (5-11) utilisée.

24. Prix d'extrait

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

Les prix sont disponibles dans une variété de formats qui contiennent des décimales, des virgules et des symboles monétaires. Cette expression régulière peut vérifier tous ces différents formats pour tirer un prix de n'importe quelle chaîne.

25. Parse E-mail Header

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

Avec cette seule ligne de code, vous pouvez analyser l'en-tête d'un e-mail pour extraire les informations «à» de l'en-tête. Il peut être utilisé en tandem avec plusieurs emails joints ensemble.

Si vous préférez éviter la regex pour cette tâche, vous pouvez utiliser une bibliothèque d'analyse.

26. Faire correspondre un type de fichier particulier

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

Lorsque vous traitez différents formats de fichiers comme .xml, .html et .js, il peut être utile de vérifier les fichiers localement et de les télécharger par les utilisateurs. Cet extrait extrait une extension de fichier pour vérifier si elle est valide à partir d'une série d'extensions valides pouvant être modifiées au besoin.

27. Faire correspondre une chaîne d'URL

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

Cet extrait peut être utilisé à la fois pour les chaînes HTTPS et HTTP afin de vérifier si le texte correspond à la syntaxe du domaine TLD traditionnel. Il y a aussi une implémentation simple de cette regex en utilisant RegExp de JavaScript.

28. Ajouter rel = "nofollow" aux liens

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

Si vous travaillez avec un lot de code HTML, il peut être horrible d'appliquer le travail manuel dans des tâches répétitives. Les expressions régulières sont parfaites pour cette occasion et elles vous feront gagner beaucoup de temps.

Cet extrait peut extraire tous les liens d'ancrage d'un bloc HTML et ajouter l' attribut rel = "nofollow" à chaque élément. Le développeur qui a écrit ce code a eu la gentillesse de publier l'expression brute plus un exemple de travail en PHP.

29. Match de requête multimédia

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

Séparez les requêtes de médias CSS en leurs paramètres et propriétés. Cela peut vous aider à analyser les CSS externes de manière plus propre en mettant plus directement l'accent sur le fonctionnement du code.

30. Syntaxe de la recherche Google

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

Vous pouvez créer votre propre code regex pour manipuler du texte interrogeable en utilisant la syntaxe de marque déposée de Google. Le signe plus (+) indique des mots-clés supplémentaires et le signe moins (-) indique des mots qui doivent être ignorés et supprimés des résultats.

C'est un extrait plutôt compliqué mais utilisé correctement il peut fournir une base pour construire votre propre algorithme de recherche.

Emballer

Le chemin vers la maîtrise de regex est long mais enrichissant si vous y tenez. Au-delà des outils regex typiques, la meilleure façon d'étudier est la répétition. Essayez de créer des applications Web qui s'appuient sur ces extraits de regex pour apprendre comment ils fonctionnent dans une application Web fonctionnant réellement. Et si vous avez d'autres extraits à suggérer, vous pouvez les poster dans la zone des commentaires ci-dessous.

Maintenant, lisez: 50 extraits CSS utiles que chaque concepteur devrait avoir

iPhone 4 Accessoires: 30+ cas et manches uniques

La plupart des gens n'achètent plus de cas et de pochettes simplement pour protéger leurs iPhones; nous voulons quelque chose que nous nous sentons bien avoir. Tout comme avoir un iPhone par rapport à un téléphone Blackberry ou HTC donne une idée du genre de personne que vous êtes, vous pouvez toujours vous démarquer de la foule grandissante de l'iPhone et revendiquer une identité pour vous-même . Une faço

(Conseils techniques et de conception)

Construire des fenêtres modales accessibles avec la boîte de dialogue A11y

Les modaux sont largement supportés dans les navigateurs modernes. Ils peuvent être utilisés comme fenêtres de notification, comme champs d'inscription, ou même pour les diaporamas de photos .Vous pouvez construire ces fenêtres en utilisant du CSS pur, mais ce n'est pas la solution la plus accessible. Au l

(Conseils techniques et de conception)