Share
Les expressions régulières peuvent être effrayantes… vraiment effrayantes. Heureusement, une fois que vous avez mémorisé ce que chaque symbole représente, la peur s'atténue rapidement. Si vous correspondez au titre de cet article, il y a beaucoup à apprendre! Commençons.
La clé pour apprendre à utiliser efficacement les expressions régulières consiste à prendre une journée et à mémoriser tous les symboles. C'est le meilleur conseil que je puisse éventuellement offrir. Asseyez-vous, créez des cartes-éclair et mémorisez-les! Voici les plus courantes:
Oui, ce n'est pas amusant, mais mémorisez-les simplement. Vous serez reconnaissant si vous faites!
Vous pouvez être certain que vous voudrez vous arracher les cheveux à un moment ou à un autre lorsqu'une expression ne fonctionne pas, peu importe l'ampleur de celle-ci - ou vous pensez qu'elle le devrait! Le téléchargement de l'application RegExr Desktop est essentiel et il est vraiment très amusant de jouer avec. Outre la vérification en temps réel, il propose également une barre latérale détaillant la définition et l'utilisation de chaque symbole. Télécharge le!.
La prochaine étape consiste à apprendre à utiliser réellement ces symboles! Si la vidéo est votre préférence, vous avez de la chance! Regardez la série de vidéos de cinq leçons intitulée "Expressions régulières pour les nuls".
Dans cette dernière section, nous allons passer en revue quelques-unes des principales méthodes JavaScript permettant de travailler avec des expressions régulières..
Celui-ci accepte un seul paramètre de chaîne et renvoie un booléen indiquant si une correspondance a été trouvée ou non. Si vous n'avez pas nécessairement besoin d'effectuer une opération avec un résultat correspondant spécifique - par exemple, lors de la validation d'un nom d'utilisateur - "test" fera l'affaire correctement.
var nom d'utilisateur = 'JohnSmith'; alert (/ [[A-Za-z _-] + /. test (nom d'utilisateur)); // retourne vrai
Ci-dessus, nous commençons par déclarer une expression régulière qui n'autorise que les majuscules et les minuscules, un trait de soulignement et un tiret. Nous enveloppons ces caractères acceptés entre parenthèses, ce qui désigne un classe de personnage. Le symbole "+", qui le produit, signifie que nous recherchons un ou plusieurs des caractères précédents. Nous testons ensuite ce modèle avec notre variable, "JohnSmith". En raison d'une correspondance, le navigateur affichera une boîte d'alerte avec la valeur "true".
Vous êtes probablement déjà familiarisé avec la méthode de la scission. Il accepte une seule expression régulière qui représente l'endroit où la "scission" doit avoir lieu. Veuillez noter que nous pouvons également utiliser une chaîne si nous préférerions.
var str = 'c'est ma chaîne'; alert (str.split (/ \ s /)); // alerte "ceci est ma chaîne"
En passant "\ s" - représentant un seul espace - nous avons maintenant divisé notre chaîne en un tableau. Si vous avez besoin d'accéder à une valeur particulière, ajoutez simplement l'index souhaité..
var str = 'c'est ma chaîne'; alert (str.split (/ \ s /) [3]); // alerte "chaîne"
Comme on pouvait s'y attendre, la méthode "replace" vous permet de remplacer un certain bloc de texte, représenté par une chaîne ou une expression régulière, par une autre chaîne.
Si nous souhaitions remplacer la chaîne "Hello, World" par "Hello, Universe", nous pourrions procéder comme suit:
var someString = 'Hello, World'; someString = someString.replace (/ World /, 'Universe'); alerte (un peu de corde); // alerte "Bonjour, Univers"
Il convient de noter que, pour cet exemple simple, nous aurions pu simplement utiliser .replace ('World', 'Universe'). De plus, l’utilisation de la méthode replace n’écrase pas automatiquement la valeur de la variable, nous devons donc réaffecter la valeur renvoyée à la variable, someString..
Pour un autre exemple, imaginons que nous souhaitons prendre certaines mesures de sécurité élémentaires lorsqu'un utilisateur s'inscrit sur notre site fictif. Peut-être voulons-nous prendre leur nom d'utilisateur et supprimer tous les symboles, guillemets, points-virgules, etc. L'exécution d'une telle tâche est triviale avec JavaScript et les expressions régulières.
Nom d'utilisateur var = 'J; ohnSmith; @%'; nom_utilisateur = nom_utilisateur.replace (/ [^ A-Za-z \ d _-] + /, "); alert (nom d'utilisateur); // JohnSmith; @%
Compte tenu de la valeur de l'alerte produite, on peut supposer qu'il y a une erreur dans notre code (que nous examinerons sous peu). Cependant, ce n'est pas le cas. Si vous le remarquez, le point-virgule immédiatement après le "J" a été supprimé comme prévu. Pour que le moteur continue à rechercher d'autres correspondances dans la chaîne, nous ajoutons un "g" directement après notre barre oblique de fermeture; ce modificateur, ou drapeau, signifie "global". Notre code révisé devrait maintenant ressembler à ceci:
Nom d'utilisateur var = 'J; ohnSmith; @%'; nom d'utilisateur = nom d'utilisateur.replace (/ [^ A-Za-z \ d _-] + / g, "); alert (nom d'utilisateur); // alerte JohnSmith
Maintenant, l'expression régulière recherche dans la chaîne ENTIRE et remplace tous les caractères nécessaires. Réviser l'expression réelle - .remplacer (/ [^ A-Za-z \ d _-] + / g, "); - il est important de noter le symbole carot à l'intérieur des crochets. Lorsqu'il est placé dans une classe de caractères, cela signifie "trouve tout ce qui N'EST PAS…". Maintenant, si nous relisons, cela dit, trouve tout ce qui n'est PAS une lettre, un chiffre (représenté par \ d), un trait de soulignement ou un tiret ; si vous trouvez une correspondance, remplacez-la par rien ou, en fait, supprimez entièrement le caractère..
Contrairement à la méthode "test", "match ()" renverra un tableau contenant chaque correspondance trouvée.
var name = 'JeffreyWay'; alert (name.match (/ e /)); // alerte "e"
Le code ci-dessus alertera un seul "e". Cependant, notez qu'il y a en fait deux e dans la chaîne "JeffreyWay". Encore une fois, nous devons utiliser le modificateur "g" pour déclarer un "grecherche globale.
var name = 'JeffreyWay'; alert (name.match (/ e / g)); // alerte "e, e"
Si nous voulons ensuite alerter l'une de ces valeurs spécifiques avec le tableau, nous pouvons référencer l'index souhaité après les parenthèses.
var name = 'JeffreyWay'; alert (name.match (/ e / g) [1]); // alerte "e"
Passons en revue un autre exemple pour nous assurer de bien le comprendre..
var string = 'Ceci est juste une chaîne avec 12345 et certains! @ # $ mélangés.'; alert (string.match (/ [a-z] + / gi)); // alertes "Ceci est juste une chaîne, avec, et, parfois, mélangé"
Dans l'expression régulière, nous avons créé un motif qui correspond à une ou plusieurs lettres majuscules ou minuscules, grâce au modificateur "i". Nous ajoutons également le "g" pour déclarer une recherche globale. Le code ci-dessus alertera "Ceci est juste une chaîne, avec, et, parfois, mélangé, dans". Si nous voulions ensuite piéger l'une de ces valeurs dans le tableau à l'intérieur d'une variable, nous référons simplement l'index correct.
var string = 'Ceci est juste une chaîne avec 12345 et certains! @ # $ mélangés.'; var correspond = string.match (/ [a-z] + / gi); alerte (correspond à [2]); // alerte "juste"
Pour la pratique, essayons de scinder une adresse électronique - [email protected] - en son nom d'utilisateur et son nom de domaine respectifs: "nettuts" et "tutsplus".
var email = '[email protected]'; alert (email.replace (/ ([a-z \ d _-] +) @ ([a-z \ d _-] +) \. [a-z] 2,4 / ig, '$ 1, $ 2')); // alerte "nettuts, tutsplus"
Si vous êtes nouveau dans les expressions régulières, le code ci-dessus peut paraître un peu intimidant. Ne vous inquiétez pas, cela a été le cas pour nous tous lorsque nous avons commencé. Une fois que vous avez décomposé en sous-ensembles, c'est vraiment très simple. Prenons-le pièce par pièce.
.remplacer (/ ([a-z \ d _-] +)
En partant du milieu, nous recherchons n'importe quelle lettre, chiffre, trait de soulignement ou tiret, et nous en faisons correspondre un ou plusieurs autres (+). Nous aimerions accéder à la valeur de tout ce qui correspond ici, alors nous l'enveloppons entre parenthèses. De cette façon, nous pouvons référencer cet ensemble apparié plus tard!
@ ([a-z \ d _-] +)
Immédiatement après la correspondance précédente, recherchez le symbole @, puis un autre groupe de lettres, chiffres, traits de soulignement et tirets. Encore une fois, nous encapsulons cet ensemble entre parenthèses afin d'y accéder plus tard.
\. [a-z] 2,4 / ig,
En continuant, nous trouvons une seule période (nous devons y échapper avec "\" car, dans les expressions régulières, elle correspond à n’importe quel caractère (en excluant parfois un saut de ligne). La dernière partie consiste à trouver le ".com". "Nous savons que la plupart des domaines, sinon tous, auront une plage de suffixes de deux à quatre caractères (com, edu, net, nom, etc.). Si nous sommes conscients de cette plage spécifique, nous pouvons renoncer à l'aide d'un symbole plus générique comme * ou +, et placez les deux chiffres entre accolades représentant le minimum et le maximum, respectivement.
'1 $, 2 $')
Cette dernière partie représente le deuxième paramètre de la méthode replace ou ce que nous voudrions remplacer par les jeux correspondants. Ici, nous utilisons $ 1 et $ 2 pour faire référence à ce qui était stocké dans les premier et deuxième jeux de parenthèses, respectivement. Dans ce cas particulier, $ 1 désigne "nettuts" et $ 2 désigne "tutsplus".
Pour notre projet final, nous allons répliquer l'objet location. Pour ceux qui ne sont pas familiers, l'objet location vous fournit des informations sur la page en cours: href, hôte, port, protocole, etc. Notez que cela est purement pratique. Dans un site du monde réel, utilisez simplement l'objet de localisation préexistant.!
Nous commençons tout d'abord par créer notre fonction de localisation, qui accepte un seul paramètre représentant l'url que nous souhaitons "décoder"; nous l'appellerons "loc."
fonction loc (url)
Maintenant, nous pouvons l'appeler comme ça et passer une URL de charabia:
Accentsconagua
var l = loc ('http://www.somesite.com?somekey=somevalue&anotherkey=anothervalue#theHashGoesHere'); Ensuite, nous devons renvoyer un objet contenant une poignée de méthodes.
fonction loc (url) return
Bien que nous ne les créions pas tous, nous en imiterons une poignée. Le premier sera "rechercher". En utilisant des expressions régulières, nous aurons besoin de rechercher l'URL et de tout renvoyer dans la chaîne de requête.
return search: function () return url.match (/\?(.+)/ i) [1]; // retourne "une clé = une valeur et une autre clé = une autre valeur # theHashGoesHere"
Ci-dessus, nous prenons l'URL passée, et essayons de faire correspondre nos expressions régulières à celle-ci. Cette expression recherche le point d'interrogation dans la chaîne, ce qui représente le début de notre chaîne de requête. À ce stade, nous devons piéger les caractères restants. C’est pourquoi le (. +) est entouré de parenthèses. Enfin, nous devons ne renvoyer que ce bloc de caractères. Nous utilisons donc [1] pour le cibler..
Maintenant, nous allons créer une autre méthode qui retourne le hash de l'URL, ou n'importe quoi après le signe dièse.
hash: function () return url.match (/#(.+)/ i) [1]; // retourne "theHashGoesHere",
Cette fois, nous recherchons le signe dièse et, encore une fois, interceptons les caractères suivants entre parenthèses afin que nous puissions nous référer uniquement à ce sous-ensemble spécifique - avec [1].
La méthode de protocole doit renvoyer, comme vous pouvez le deviner, le protocole utilisé par la page, généralement "http" ou "https".
protocole: function () return url.match (/ (ht | f) tps?: / i) [0]; // retourne 'http:',
Celui-ci est légèrement plus compliqué, uniquement parce qu'il existe quelques choix pour compenser: http, https et ftp. Bien que nous puissions faire quelque chose comme - (http | https | ftp) - ce serait plus propre à faire: (ht | f) tps?
Ceci indique que nous devrions d’abord trouver un caractère "ht" ou "f". Ensuite, nous associons les caractères "tp". Le dernier "s" doit être facultatif, nous ajoutons donc un point d'interrogation, ce qui signifie qu'il peut y avoir zéro ou une instance du caractère précédent. Beaucoup mieux.
Par souci de brièveté, ce sera notre dernier. Il va simplement retourner l'URL de la page.
href: function () return url.match (/ (. +. [a-z] 2,4) / ig); // retourne "http://www.somesite.com"
Ici, nous faisons correspondre tous les caractères jusqu'au point où nous trouvons un point suivi de deux à quatre caractères (représentant com, au, edu, nom, etc.). Il est important de réaliser que nous pouvons rendre ces expressions aussi compliquées ou aussi simples que nous le souhaiterions. Tout dépend de la rigueur avec laquelle nous devons être.
function loc (url) return search: function () return url.match (/\?(.+)/ i) [1]; , hash: function () return url.match (/#(.+)/ i) [1]; , protocole: function () return url.match (/ (ht | f) tps?: /) [0]; , href: function () return url.match (/ (. + \. [a-z] 2,4) / ig);
Avec cette fonction créée, nous pouvons facilement alerter chaque sous-section en procédant comme suit:
var l = loc ('http://www.net.tutsplus.edu?key=value#hash'); alerte (l.href ()); // http://www.net.tutsplus.com alert (l.protocol ()); // http:… etc. Merci d'avoir lu! Je suis Jeffrey Way… signant.
