Une expression régulière est une chaîne composée de caractères ayant des significations particulières et est principalement utilisée pour rechercher et remplacer des chaînes qui respectent les règles. Il est souvent utilisé dans la validation de formulaire, le mappage d'URL, etc.
Lors de l'écriture d'expressions régulières, nous devons écrire le modèle dans une paire de // barres obliques
/正则表达式/匹配模式La plupart des concepts sur Internet concernent les expressions régulières, qui sont obscures et difficiles à retenir. Ignorons d'abord ces concepts, et apprenons directement 10 cas d'expressions régulières qui sont très couramment utilisés dans le front-end . Dans l'explication de cas , J'utiliserai La police rouge en gras mettra en évidence quelle expression régulière signifie ce qu'elle signifie, afin que tout le monde puisse se concentrer sur la compréhension. Je pense qu'après avoir appris ces 10 points, vous pourrez traverser vos deux veines et comprendre facilement comment pour écrire des expressions régulières. Enfin, je joindrai un résumé des expressions régulières à la fin de l'article, afin que chacun puisse consolider ce qu'il a appris. Sans plus tarder, commençons !
1. Faites correspondre le numéro de téléphone portable
1. Nous savons que le numéro de téléphone portable a des caractères spéciaux, qui commencent par 1. Dans les expressions régulières : ^ signifie le début. ,donc:
/ ^1 /
2. Le deuxième chiffre est généralement un nombre parmi 3, 4, 5, 7 et 8. Nous utilisons [] pour faire correspondre, et le nombre entre [] signifie qu'un seul nombre correspond. Comme suit, cela signifie qu'un seul nombre dans 3,4,5,7,8 correspond au deuxième chiffre.
/^1 [34578] /
3. Les suivants sont tous des nombres de 0 à 9.
Il y a 11 chiffres dans le numéro de téléphone mobile, nous avons confirmé deux chiffres, il reste donc neuf chiffres à déterminer, \d représente un nombre.
{m} signifie faire correspondre m symboles, et {9} ici signifie faire correspondre 9 nombres.
Par souci de rigueur, on rajoute $ à la fin , ce qui veut dire : ça se termine par 9 chiffres.
/^1[34578] \d{9}$ /
4. Enfin, ajoutez g après la barre oblique pour indiquer une correspondance globale, c'est-à-dire pour rechercher tout le contenu de la chaîne, au lieu de faire correspondre le premier et de terminer.
/^1[34578]\d{9}$/ g
2. Numéro QQ
Le nombre Qq est également relativement courant.
1. Le premier numéro du numéro QQ ne peut pas être 0, c'est donc 0-9, et [1-9] signifie en choisir un entre 1 et 9.
/ ^[1-9] /g
[xxx-xxx] est un raccourci, comme la correspondance de 26 lettres minuscules, nous pouvons écrire [a|b|c|d|e|f|g|h|i....] pour correspondre à a ou b Ou c ou d..., mais c'est très gênant de l'écrire comme ça, on peut l'écrire comme [az] , ce qui signifie faire correspondre toutes les lettres minuscules, toutes les lettres majuscules et minuscules peuvent être écrites comme ceci : [a-zA- Z ] . Remarque : un seul caractère correspond à []
2. À l'heure actuelle, qq a un maximum de 10 chiffres et un minimum de 5 chiffres. Utilisez {4,9} pour faire correspondre 4 à 9 de ces nombres, y compris 4 et 9, c'est-à-dire que l'intervalle de correspondance est [4,9]
/^[1-9] [1-9]{4,9} /g
Ici on peut aussi écrire :
/^[1-9] /d{4,9} /g
Trois, la voie de la représentation hexadécimale de la couleur
La représentation des couleurs en hexadécimal est également très courante dans le développement Web.
1. D'abord, il y aura le symbole # au début, puis il y aura six caractères, qui peuvent être de 0 à 9, a à f, A à F, c'est-à-dire [0-9a-fA-F]
/ #[0-9a-fA-F]{6} /g
2. Ce n'est pas encore fini, car parfois le système hexadécimal peut être abrégé. Lorsque les deux lettres sont identiques, il sera omis dans une lettre à 3 chiffres. Par exemple : #ccaaff deviendra #caf, #FFFFFF deviendra #FFF .
Puisqu'il y a ces deux situations, nous devons utiliser le symbole | pour représenter "ou".
/#[0-9a-fA-F]{6} |[0-9a-fA-F]{3} /g
3. Mais ces deux cas doivent commencer par #, nous ne voulons pas ajouter un # aux deux formules, nous n'avons qu'à ajouter une parenthèse () à ces deux cas, et nous ne pouvons écrire qu'un signe # épicé , ( ) signifie groupement.
/# ( [0-9a-fA-F]{6}|[0-9a-fA-F]{3} ) /g
4. Parfois, l'utilisateur ne saisit pas #, nous utilisons ? Indique dispensable.
/# ? ([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g
4. Boîte aux lettres
Le format dans lequel le serveur permet aux utilisateurs de personnaliser le nom de la boîte aux lettres est également différent. Prenons l'exemple des règles de boîte aux lettres courantes :
1. Le nom de la boîte aux lettres que les utilisateurs peuvent saisir comprend : toutes les lettres majuscules et minuscules, tous les chiffres et trois symboles _-.
/ ^[A-Za-z0-9_-.] /g
2. Nous constaterons qu'il n'y a pas de correspondance du tout, car :
-Les symboles entre parenthèses sont à l'origine utilisés pour représenter des plages, et maintenant ils doivent être échappés pour les caractères. L'échappement nécessite l'utilisation du symbole d'échappement \ . De plus, nous devons également échapper le symbole . , car le point anglais Dans la norme expression, cela signifie n'importe quel caractère sauf la nouvelle ligne.
/^[A-Za-z0-9_ \ - \ .]/g
3. Maintenant, nous pouvons définir le nombre de caractères. En principe, nous devons limiter le nombre de caractères pour les utilisateurs, mais ici, il n'est pas limité par défaut, nous devons donc utiliser + pour indiquer au moins une fois, car après tout , nous ne pouvons pas définir 0 caractères, au moins une fois
/^[A-Za-z0-9_\-\.] + /g
4. Ensuite, il y a @, le nom de domaine est derrière le caractère @, et le nom de domaine peut également être un nom de domaine à plusieurs niveaux, nous pouvons directement prendre la partie tout à l'heure
/^[A-Za-z0-9_\-\.]+ @ [A-Za-z0-9_\-\.]+ /g
5. La dernière partie est notre .com ou .cn commun, qui est le nom de domaine de premier niveau, qui doit être représenté par \.. Le nom de domaine de premier niveau ne peut être que des lettres anglaises majuscules et minuscules, d'une manière générale, il se compose de 2 à 4 lettres. terminer par $
/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]+ \. [A-Za-z]{2,6} $ /g
5. URL
Quelque chose comme une adresse e-mail est une URL
1. Le début de l'URL est le protocole, c'est-à-dire http ou https, il peut également s'agir de ftp ou de fichiers, suivis de : deux-points et deux symboles /
/ ^(https?|ftp|fichier):\/\/ /g
celui du dessus ? Il n'agit que sur la lettre précédente, c'est-à-dire s, afin qu'il puisse correspondre à http et https.
ne pas se souvenir? Montez ce que ça veut dire, je viens de le dire !
2. Habituellement, lors de la saisie de l'URL, l'accord n'est souvent pas écrit, nous devons donc ajouter ? symbole
/^ ( (https?|ftp|fichier):\/\/ ) ? /g
3. Ensuite, écrivez la partie du nom de domaine faisant autorité, utilisez d'abord une parenthèse pour regrouper, le nom de domaine faisant autorité ici fait référence à bilibili, qui est souvent appelé le nom de domaine principal, et le www devant le nom de domaine principal, l'utilisateur n'a pas nécessairement à saisir et pas nécessairement Il s'agit de www, et il peut s'agir d'autres symboles, nous pouvons donc regarder www.bilibili ensemble. En plus des lettres minuscules et des chiffres, cette partie peut également avoir des symboles et des symboles -
/^((https?|ftp|fichier):\/\/) ? ([\da-z\.\-]+) /g
4. Cette dernière partie est presque la même que notre adresse e-mail
/^((https?|ftp|fichier):\/\/)?([\da-z\.\-]+) \.[az\.]{2,6} /g
5. Bien que l'URL ne soit pas sensible à la casse, elle est généralement spécifiée en minuscules.
Dot. est d'éviter des circonstances particulières, telles que com.cn. Il y a aussi la dernière partie commune de l'URL Par exemple, lorsque nous visitons une des parties de la page d'accueil, une adresse de ressource spécifique très longue ou courte sera générée, nous devons donc la couvrir autant que possible. Les symboles , / peuvent apparaître, les symboles , et les symboles -. On écrit donc ([\/\x\.\-]) . \w signifie inclure n'importe quel caractère littéral, y compris les caractères alphanumériques et les traits de soulignement. * signifie 0 à l'infini, ajoutez donc un * à la périphérie, car il peut y avoir plus d'un groupe de ressources de ce type, ce qui est courant dans notre page Web...../.../.../
/^((https?|ftp|fichier):\/\/)?([\da-z\.\-]+)\.[az\.]{2,6} ( [\/\w\ .\-]* )* /g
6. Enfin, l'utilisateur peut également entrer le symbole /, il peut y avoir 0 ou 1, utilisez ?
/^((https?|ftp|fichier):\/\/)?([\da-z\.\-]+)\.[az\.]{2,6}([\/\w\ .\-]*)* \/?$ /g
6. Balises HTML
La correspondance des balises HTML est également très utile, par exemple, si vous souhaitez déterminer où commence une phrase, elle peut également être utilisée pour les robots.
1. Faites correspondre le début de < et plusieurs lettres minuscules :
/^<([az]+)/g
Si vous ne comprenez toujours pas cette réunion et que vous êtes un peu confus, c'est déraisonnable, alors dépêchez-vous de la revoir !
2. Ensuite, nous ajoutons un m à la fin pour faire correspondre plusieurs lignes :
/^<([az]+)/g m
3. Nous savons qu'il peut y avoir de nombreux attributs dans l'étiquette, et nous n'avons pas besoin d'écrire une longue expression régulière pour exprimer le format d'un attribut aussi long, car nous savons que le symbole > est précédé de certains espaces ou attributs , tel que:
<input type="password" class="input"></input>
Ensuite, il suffit de l'exclure. C'est pour exclure le symbole > dessus . Le format des caractères d'exclusion consiste à utiliser ^ entre crochets, c'est-à-dire que [^] signifie sauf
/^<([az]+) ([^>]) /gm
Cela signifie qu'en plus du symbole >, j'ai également créé un groupe séparé ici. Si vous ne vous souvenez toujours pas que les crochets () indiquent un groupement, vous devez d'abord passer par le cas précédent.
4. Il est en fait faux d'écrire de cette façon ici, car nous ne définissons qu'un seul caractère après le symbole > à exclure de cette manière d'écrire , nous devons donc ajouter un signe + pour correspondre à plusieurs. En dehors de ce groupe, nous devons utiliser le symbole * pour représenter 0 à l'infini, car il peut y avoir plusieurs caractères d'attribut ou aucun, et nous devons inclure ces cas.
/^<([az]+) ([^>] + ) * /gm
5. Vient ensuite le symbole > comme balise de fermeture. Nous mettons en place un groupe séparé pour le contenu et utilisons (.*) pour représenter n'importe quel caractère de 0 à plusieurs
/^<([az]+)([^>]+)* (>(.*)) /gm
6. Ensuite, il y a le début d'un autre ensemble de balises avec une paire de balises, qui consiste à commencer à faire correspondre la partie </ dans <span> </span> .
/^<([az]+)([^>]+)*(>(.*)) <\/ /gm
7. Ensuite, il y a le nom de l'étiquette. Pour le moment, nous n'avons plus besoin du code comme [az]+. Nous pouvons utiliser des matériaux locaux pour appeler la première expression avec des crochets, et nous pouvons utiliser \1 pour représenter ça . \Several : Indique quelle expression régulière entre parenthèses est appelée. Enfin, utilisez le symbole > pour fermer la balise.
/^<([az]+)([^>]+)*(>(.*))<\/ \1> /gm
8. Pensez-vous que c'est la fin ? non non Non. Certaines balises sont distinctes, comme la balise img <img src = "..."/>, nous devons donc utiliser le symbole | pour envisager une autre situation. La situation normale est d'ajouter un symbole / à l'espace, et nous devons utiliser \s pour représenter l'espace. Utilisez simplement \s\/> pour le terminer plus tard.
/^<([az]+)([^>]+)* ( >(.*)<\/\1> |\s + \/> ) $ /gm
\s+ signifie plusieurs espaces.
7. Adresse IP
L'expression régulière de l'adresse IP est également difficile, la difficulté réside dans la manière de représenter la plage de nombres. Nous faisons des adresses IPv4 ici.
1. L'adresse est composée de 4 groupes de chiffres de 0 à 255. Pour chaque groupe de 0 à 255, nous devons diviser la plage de nombres. Après tout, les expressions régulières n'ont pas de codes qui représentent directement la plage de nombres . Ensuite, nous pouvons diviser en 0-199, 200-249, 250-255 . Commençons par écrire la plage de 0 à 199
/^([01]?[0-9][0-9]?)/gm
Comme ci-dessus, vous pouvez faire correspondre tous les numéros à 1 chiffre, 2 chiffres ou 3 chiffres dans 0-199.
2. Entre les trois nombres 200-249, 250-255, on utilise | ou pour relier
/^([01]?[0-9][0-9]? |2[0-4][0-9]|25[0-5] )/gm
3. Étant donné que les adresses IP sont toutes connectées par ., nous ajoutons \., puis définissons ces trois groupes comme 1 groupe et utilisons {3} pour répéter trois fois. La raison de répéter 3 fois mais pas 4 fois est que la dernière groupe est 0- Il n'y a pas de période anglaise après 255.
/^ ( ([01]?[0-9][0-9]?|2[0-4][0-9]|25[0-5]) \. ){3} /gm
4. Ajoutons le dernier 0-255 à la fin et ce sera correct et épicé
/^(([01]?[0-9][0-9]?|2[0-4][0-9]|25[0-5])\.){3} ([01] ? [0-9][0-9] ?|2[0-4][0-9]|25[0-5])$ /g
8. Rendez-vous
Il existe de nombreuses formes d'expression pour les dates, et la gouvernance n'utilise que le format "année-mois-jour" comme exemple
1. L'année est le nombre 0-9 répété 4 fois, le mois aura deux situations : 0-9 et 10-12.
La plage de 0-9 est représentée par 0[1-9], et la plage de 10-12 est représentée par 1[0-2]
/ ^[0-9]{4}-( 0[1-9]|1[0-2] ) /gm
2. Le nombre de jours doit également être divisé en trois situations, 0-9, 10-29 et 30-31
/^[0-9]{4}-(0[1-9]|1[0-2]) - ( 0[1-9]|[12][0-9]|3[01] ) $ /g
9. Numéro de plaque d'immatriculation
1. Tout d'abord, c'est l'abréviation de chaque province, municipalité et région autonome. Notez en particulier les bouchons sont couverts ici, c'est la nouvelle plaque d'immatriculation de l'armée
/ ^[Pékin, Tianjin, Shanghai, Hebei, Jin, Liao, Ji, Black Su, Zhejiang, Anhui, Fujian, Jiangxi, Shandong, Hubei, Hunan, Guangdong, Guangxi, Qiongchuan, Guizhou, Yunnan, Chongqing, Tibet, Shaanxi, Longqing, Ningxia, Nouveau Fujian, Guangdong, Jinqiong, envoyés A_Z] {1} / gm
2. Le chiffre suivant est la région administrative de niveau préfectoral qui en dépend, qui est composé de lettres majuscules. Les cinq derniers chiffres que nous rencontrons sont des majuscules et des chiffres, mais nous ne pouvons les répéter que 4 fois ici , car il y a des circonstances particulières, par exemple, la police sont les véhicules du Bureau de la sécurité publique
/^[Pékin, Tianjin, Shanghai, Hebei, Shanxi, Liaoji, Heisu, Zhejiang, Anhui, Fujian, Jiangxi, Shandong, Hubei, Hunan, Guangdong, Guizhou, Qiongchuan, Guizhou, Yunnan, Chongqing, Tibet, Shannon, Qingning, Nouveau Fujian, Guangdong, Jinqiong, émissaires A_Z]{1} [A_Z] {1} [A-Z0-9]{4}[A-Z0-9 School Police Hong Kong and Macao]{1}$ /gm
Ici, le numéro de plaque d'immatriculation fait ici référence à la voiture à plaque bleue et ne prend pas en compte les véhicules à énergie nouvelle.
10. Carte d'identité
Hoo hoo hoo, enfin le dernier épicé ! Je ne sais pas si vous êtes fatigué après avoir appris cela, mais je suis fatigué de taper de toute façon. Allez, travaillons ensemble !
Ici, le 18 bits couramment utilisé est utilisé à titre de démonstration.
1. Tout d'abord, les 6 premiers chiffres sont le code d'adresse, mais le premier chiffre ne peut pas être 0
/^[1-9][0-9]{5}/gm
2. Les chiffres 7 à 14 sont la date de naissance. Des amis intelligents peuvent se rappeler et utiliser la date écrite plus tôt, mais faites attention à l'année ici. Nous n'avons pas besoin de considérer l'année de naissance des anciens , et nous ne le faisons pas. à considérer il y a 17 ans Y compris les personnes de plus de 17 ans.
/^[1-9][0-9]{5} (18|19|([23][0-9])) [0-9]{2} /gm
3. Ensuite, il y a le mois et le jour, qui sont les mêmes que la date mentionnée ci-dessus, il suffit de les reprendre.
Les polices vertes représentent les mois, les polices jaunes représentent les jours
/^[1-9][ 0-9]{5}(18|19|([23][0-9])) [0-9]{2}(0[1-9]|1[0 -2]) ( 0[1-9]|[12][0-9]|3[01] ) /g
4. Les 15 à 17 chiffres suivants sont des codes séquentiels, qui peuvent être représentés par des nombres répétés trois fois. Le 18ème chiffre est le code de contrôle
/^[1-9][ 0-9]{5}(18|19|([2 3][0-9]))[0-9]{2}(0[1-9]|1[ 0-2])(0[1-9]|[12][0-9]|3[01]) [0-9]{3} [0-9Xx] $ /g
Les dix cas sont enfin terminés. L'avez-vous appris ? Résumons les règles grammaticales des expressions régulières :
Tout le monde a mal à la tête quand il voit les règles denses, et je fais de même. Il n'est pas nécessaire de mémoriser tout ce qui suit. C'est ce que j'ai dit auparavant, mais j'ai ajouté un peu plus de contenu. Il suffit de l'écrire soi-même. Voici juste pour vous aider à résumer les règles grammaticales d'une vague d'expressions régulières. Les plus importantes et couramment utilisées seront couvertes ci-dessus. Dans des circonstances normales, les expressions régulières peuvent être écrites. Les suivantes ont un impact général. Ce qui compte, ce sont les 10 cas précédents ! ! !
- [abc] : Recherche n'importe quel caractère entre crochets.
- [^abc] : recherche les caractères qui ne sont pas entre crochets.
- [0-9] : Trouver des nombres dans la plage de 0 à 9, c'est-à-dire trouver des nombres.
- [az] : recherche des caractères dans la plage allant de la minuscule a à la minuscule z, c'est-à-dire des lettres minuscules.
- [AZ] : recherchez des caractères dans la plage allant de A majuscule à Z majuscule, c'est-à-dire recherchez des lettres majuscules.
- [Az] : Recherche les caractères compris entre A majuscule et z minuscule, c'est-à-dire toutes les lettres majuscules et minuscules.
- . : Indique n'importe quel caractère, pas de limite de plage
- ? : Indique que le contenu précédent apparaît 0-1 fois
- + : Indique que le contenu précédent apparaît au moins 1 fois
- * : Indique que le contenu précédent apparaît un certain nombre de fois (0-plusieurs fois)—le contenu correspondant est cohérent avec +, mais il ne peut pas être écrit une seule fois
- {n} : Indique que le contenu précédent apparaît n fois
- {n,m} : Indique que le contenu précédent apparaît au moins n fois et au plus m fois
- {n,} : indique que le contenu précédent apparaît plus de n fois (dont n fois)
-
() est utilisé pour le regroupement, et le contenu entre parenthèses est considéré comme un tout
| métacaractère | décrire |
|---|---|
| . | Rechercher un seul caractère, à l'exception des retours à la ligne et des fins de ligne |
| \w | Trouver des caractères de mot |
| \W | Rechercher des caractères non verbaux |
| \d | trouver des numéros |
| \D | Rechercher des caractères non numériques |
| \s | Rechercher des caractères d'espacement |
| \S | Rechercher des caractères non blancs |
| \b | faire correspondre les limites des mots |
| \B | Correspond aux limites de non-mot |
| \0 | Rechercher des caractères NUL |
| \n | trouver des sauts de ligne |
| \F | trouver un saut de formulaire |
| \r | trouver retour chariot |
| \t | trouver des onglets |
| \v | Rechercher des onglets verticaux |
| \xxx | Trouver le caractère spécifié par le nombre octal xxxx |
| \xdd | Trouver le caractère spécifié par le nombre hexadécimal dd |
| \uxxxx | Trouve le caractère Unicode spécifié par xxxx hexadécimal |
| quantificateur | décrire |
|---|---|
| n+ | correspond à toute chaîne contenant au moins un n |
| n* | correspond à toute chaîne contenant zéro ou plusieurs n |
| n? | correspond à toute chaîne contenant zéro ou un n |
| n{x} | correspond à une chaîne contenant une séquence de x n |
| n{x,y} | correspond à une chaîne contenant au moins x et au plus y séquences de n |
| n{x,} | correspond à une chaîne contenant au moins x séquences de n |
| quantificateur | illustrer |
|---|---|
| ^ | Faire correspondre le début, en détection multiligne, il correspondra au début d'une ligne |
| $ | Faire correspondre la fin, en détection multi-ligne, il correspondra à la fin d'une ligne |
Enfin codé épicé ! L'avez-vous appris ? Le mot de code n'est pas facile, tout le monde donne beaucoup d'éloges et de soutien ! ! Vos encouragements sont la force motrice pour moi d'avancer, je viendrai ici aujourd'hui, au revoir ~~~
