Comment démarrer rapidement avec VUE3.0 : Entrez dans l'apprentissage
Recommandations associées : Tutoriel JavaScript
L'expression régulière ( expression régulière, appelée regexp )
Application : dans le développement de projets, des fonctions telles que le masquage de chiffres spécifiés de numéros de téléphone mobile, la collecte de données, le filtrage de mots sensibles et la vérification de formulaire peuvent toutes être implémentées à l'aide d'expressions régulières.
Domaines applicables : Dans les systèmes d'exploitation (Unix, Linux, etc.), les langages de programmation (C, C++, Java, PHP, Python, JavaScript, etc.).
Par exemple : prenez la recherche de texte comme exemple. Si vous trouvez une chaîne qui correspond à une certaine fonctionnalité (comme un numéro de téléphone portable) dans une grande quantité de texte, écrivez cette fonctionnalité selon la syntaxe d'une expression régulière pour former un modèle reconnu par le programme informatique ( Modèle), puis le programme informatique fera correspondre le texte selon ce modèle pour trouver la chaîne qui répond aux règles.
L'histoire des expressions régulières 
Forme d'expression de l'expression régulière
Au cours du développement, il est souvent nécessaire de rechercher et de faire correspondre les chaînes spécifiées en fonction de modèles de correspondance réguliers.
En plus de récupérer la valeur spécifiée dans la chaîne, la méthode match() dans l'objet String peut également faire correspondre tout le contenu qui répond aux exigences de la chaîne cible selon les règles habituelles et l'enregistrer dans un tableau après l'exécution de la méthode match(). la correspondance est réussie, renvoie false si la correspondance échoue.
Dans une application JavaScript, vous devez d'abord créer un objet régulier avant d'utiliser des expressions régulières. En plus de la création littérale expliquée précédemment, elle peut également être créée via le constructeur de l'objet RegExp.
Afin de permettre aux lecteurs de mieux comprendre l'acquisition d'objets réguliers, une explication comparative sera donnée en prenant comme exemple la correspondance des caractères spéciaux "^", "$", "*", "."
Notez que
bien que les objets réguliers créés par la méthode constructeur et la méthode littérale aient une fonction complètement identique, ils présentent certaines différences dans l'implémentation de la syntaxe. Le premier modèle doit échapper à la barre oblique inverse () lorsqu'il est utilisé. Lors de l'écriture de ce dernier modèle, il doit être placé entre le délimiteur "/", et la balise flags doit être placée en dehors du délimiteur de fin.
Avantages: Une utilisation efficace des catégories de caractères peut rendre les expressions régulières plus concises et plus faciles à lire.
Exemple 1 : Les lettres majuscules, les lettres minuscules et les chiffres peuvent être directement représentés à l'aide de "w".
Cas 2 : Si vous souhaitez faire correspondre des nombres compris entre 0 et 9, vous pouvez utiliser "d".
Afin de faciliter la compréhension des lecteurs sur l'utilisation des catégories de caractères, les éléments suivants utilisent "." et "s" comme exemples de démonstration.
Représentation des jeux de caractères : "[]" peut implémenter un jeu de caractères.
Plage de caractères : lorsqu'il est utilisé avec le trait d'union "-", cela signifie faire correspondre les caractères dans la plage spécifiée.
Caractères d'antonyme : lorsque le métacaractère "^" est utilisé avec "[]", on l'appelle un caractère d'antonyme.
Pas dans une certaine plage : "^" est utilisé avec "[]" pour faire correspondre les caractères qui ne se trouvent pas dans la plage de caractères spécifiée.
Prenons la chaîne 'get好TB6'.match(/pattern/g) comme exemple pour démontrer son utilisation courante.
Notez
que le caractère "-" ne représente généralement qu'un caractère ordinaire et n'est
utilisé comme métacaractère que pour représenter une plage de caractères. La plage représentée par le trait d'union « - » suit la séquence de codage de caractères. Par exemple, « aZ », « za » et « a-9 » sont toutes des plages illégales.
[Case] Limiter le contenu d'entrée
Idée d'implémentation de code :
écrivez du HTML, définissez une zone de texte pour l'année (année) et le mois (mois) et un bouton de requête.
Récupérez l'objet élément de l'opération et vérifiez la soumission du formulaire.
Vérifiez l'année, forme régulière : /^d{4}/. Vérifiez le mois, règle régulière : / ( ( 0 ? [ 1 − 9 ] ) ∣ ( 1 [ 012 ] ) /.
La zone de texte obtient le focus et la couleur de la zone d'invite est supprimée. La zone de texte perd le focus, supprime les espaces aux deux extrémités du contenu d'entrée et est validée.
Implémentation du code
<!DOCTYPEhtml>
<html>
<tête>
<méta charset="UTF-8">
<title>Limiter le contenu d'entrée</title>
<style>
input[type=text]{largeur : 40px;border-color: #bbb;height: 25px;font-size: 14px;border-radius: 2px;outline: 0;border: #ccc 1px solid;remplissage : 0 10px; -webkit-transition : box-shadow .5s ; marge inférieure : 15 px ;}
input[type=text]:hover, input[type=text]:focus,input[type=submit]:hover{border: 1px solid #56b4ef; encart 0 1px 3px rgba(0,0,0, .05),0 0 8px rgba(82 168 236,.6); -webkit-transition : box-shadow .5s ;}
input ::-webkit-input-placeholder {couleur : #999 ; -webkit-transition : couleur .5s ;}
input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {couleur : #c2c2c2 ; -webkit-transition : couleur .5s ;}
input[type=submit]{hauteur : 30px ; largeur : 80px ; arrière-plan : #4393C9 ; bordure : 1px solide #fff ;couleur : #fff ;police : 14px plus gras }
</style>
</tête>
<corps>
<identifiant du formulaire="formulaire">
Année<input type="text" name="year">
Mois<input type="text" name="mois">
<input type="submit" value="query">
</form>
<p id="result"></p>
<script>
fonction checkYear(obj) {
si (!obj.value.match(/^d{4}$/)) {
obj.style.borderColor = 'rouge';
result.innerHTML = 'Erreur de saisie, l'année est représentée par 4 chiffres';
renvoie faux ;
}
résultat.innerHTML = '';
renvoie vrai ;
}
fonction checkMonth(obj) {
if (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) {
obj.style.borderColor = 'rouge';
result.innerHTML = 'Erreur de saisie, le mois est compris entre 1 et 12';
renvoie faux ;
}
résultat.innerHTML = '';
renvoie vrai ;
}
var form = document.getElementById('form'); // Objet élément <form> var result = document.getElementById('result'); // Objet élément <p> var inputs = document.getElementsByTagName('input'); // Collection d'éléments <input> form.onsubmit = function() {
return checkYear(inputs.year) && checkMonth(inputs.month);
} ;
inputs.year.onfocus = fonction() {
this.style.borderColor = '';
} ;
inputs.month.onfocus = fonction() {
this.style.borderColor = '';
} ;
si (!String.prototype.trim) {
String.prototype.trim = fonction() {
return this.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, '');
// uFEFF la marque d'ordre des octets ; xA0 n'enveloppe pas les espaces };
}
entrées.année.onblur = fonction() {
this.value = this.value.trim();
checkYear(this);
} ;
inputs.month.onblur = fonction() {
this.value = this.value.trim();
checkMonth(ce);
} ;
</script>
</corps>
</html> La : détecte si l'expression régulière correspond à la chaîne spécifiée.
Lorsque la correspondance est réussie, la valeur de retour de la méthode test() est vraie, sinon elle renvoie faux.
Détection des modificateurs de modèle d'objets réguliers
Il existe également certaines propriétés dans la classe RegExp qui sont utilisées pour détecter les modificateurs de modèle utilisés par l'objet régulier actuel et spécifier l'index de départ de la prochaine correspondance.
Afin que les lecteurs puissent mieux comprendre l'utilisation de ces attributs, ce qui suit utilise la correspondance des espaces comme exemple pour le démontrer.
: peut renvoyer la position où la sous-chaîne du motif spécifié apparaît pour la première fois dans la chaîne. Elle est plus puissante que la méthode indexOf().
Méthode split() : utilisée pour diviser une chaîne en un tableau de chaînes en fonction du délimiteur spécifié. Le tableau de chaînes divisé n'inclut pas le délimiteur.
Lorsqu'il y a plus d'un délimiteur, un objet régulier doit être défini pour terminer l'opération de fractionnement de chaîne.
Notez que
lorsque la chaîne est vide, la méthode split() renvoie un tableau "[""]" contenant une chaîne vide. Si la chaîne et le délimiteur sont tous deux des chaînes vides, un tableau vide "[] est renvoyé. ".
Vérification
pratique
de la force du mot de passeConditions de vérification de la force du mot de passe :
① Longueur <6 chiffres, pas de force du mot de passe.
②La longueur est >6 caractères et contient un chiffre, une lettre ou d'autres caractères, et la force du mot de passe est « faible ».
③La longueur est >6 caractères et contient deux types de chiffres, de lettres ou d'autres caractères. La force du mot de passe est « moyenne ».
④ Si la longueur est >6 caractères et contient au moins trois types de chiffres, lettres ou autres caractères, la force du mot de passe est « Élevée ».
pose une question : correspond à un caractère consécutif, tel que 6 chiffres consécutifs "458925".
Solution 1 : objet régulier/dddddd/gi.
Problèmes : Le "d" répété n'est pas facile à lire et fastidieux à écrire.
Solution 2 : utilisez les qualificatifs (?, +, *, { }) pour compléter la correspondance des occurrences consécutives d'un certain caractère. Objet régulier/d{6}/gi.
Lorsque le caractère point (.) est utilisé avec le qualificatif, il peut correspondre à n'importe quel caractère dans la plage de nombres spécifiée.
L'expression régulière prend en charge la correspondance gourmande et la correspondance paresseuse lors de la correspondance avec n'importe quel caractère dans une plage spécifiée.
Dans les expressions régulières, le contenu entouré des caractères entre crochets "()" est appelé une "sous-expression".
Les parenthèses implémentent la correspondance de catch et cater, et si les parenthèses ne sont pas utilisées, cela devient catch et euh. 
Lorsqu'il n'est pas groupé, cela signifie faire correspondre 2 caractères c ; après le regroupement, cela signifie faire correspondre 2 chaînes "bc".
: processus de stockage du contenu correspondant à une sous-expression dans la zone de cache du système.
Non-capture : ne stockez pas le contenu correspondant de la sous-expression dans le cache système, utilisez (?:x) pour y parvenir.
La méthode replace() de l'objet String peut utiliser directement $n (n est un entier positif supérieur à 0) pour obtenir le contenu capturé et terminer l'opération de remplacement du contenu capturé par la sous-expression.
Vous pouvez utiliser "(?:x)" pour obtenir une correspondance sans capture
Lors de l'écriture d'une expression régulière, si vous souhaitez obtenir le contenu capturé de la sous-expression stockée dans la zone de cache de l'expression régulière, vous pouvez utiliser "n" (n est un entier positif supérieur à 0, ceci). le processus est une « référence inversée ».
Assertion de largeur nulle : fait référence à une correspondance de sous-expression de largeur nulle, utilisée pour déterminer si le contenu correspondant à la sous-expression contient un jeu de caractères spécifique avant ou après.
Classification : divisé en prélecture avant et prélecture inverse, mais seule la prélecture avant est prise en charge dans JavaScript, c'est-à-dire la correspondance des données avant qu'elles ne contiennent ou ne contiennent pas le contenu capturé, et les résultats de correspondance ne contiennent pas le contenu capturé.
Il existe de nombreux opérateurs dans les expressions régulières. Dans l'application réelle, les différents opérateurs seront mis en correspondance selon l'ordre de priorité. La priorité des opérateurs couramment utilisés dans les expressions régulières, par ordre décroissant, est la suivante.
[Cas] Recherche et remplacement de contenu
Idée d'implémentation de code :
Implémentation du code
<!DOCTYPEhtml>
<html>
<tête>
<méta charset="UTF-8">
<title>Recherche et remplacement de contenu</title>
<style>
p{float:gauche;}
entrée{marge:0 20px;}
</style>
</tête>
<corps>
<p>Contenu avant filtrage :<br>
<textarea id="pre" rows="10" cols="40"></textarea>
<input id="btn" type="bouton" value="filter">
</p>
<p>Contenu filtré :<br>
<textarea id="res" rows="10" cols="40"></textarea>
</p>
<script>
document.getElementById('btn').onclick = function () {
// Définir les règles de contenu qui doivent être recherchées et remplacées [u4e00-u9fa5] signifie faire correspondre tous les caractères chinois var reg = /(bad)|[u4e00-u9fa5]/gi;
var str = document.getElementById('pre').value;
var newstr = str.replace(reg, '*');
document.getElementById('res').innerHTML = newstr;
} ;
</script>
</corps>
</html> Recommandations associées : Tutoriel d'apprentissage de JavaScript
.Ce qui précède est une expression régulière JavaScript.Cet article suffit pour en savoir plus. Pour en savoir plus, veuillez prêter attention aux autres articles connexes sur le site Web PHP en chinois.
