Expression régulière JavaScript

Expression régulière JavaScript
De nombreux programmeurs connaissent l'idée que l'expression régulière est un concept utile mais sous-estimé. Mais, ils ne savent pas très bien comment utiliser efficacement les expressions régulières. Des expressions régulières sont utilisées non seulement dans JavaScript, mais presque tous les autres langages de programmation. Dans cet article, vous découvrirez des expressions régulières étape par étape. Il devrait être facile pour les programmeurs de tout niveau de comprendre les concepts couverts dans cet article.

UN Expression régulière est un objet dans lequel les modèles sont donnés pour correspondre à la chaîne souhaitée.

Syntaxe

La syntaxe pour une expression régulière est très simple et peut être écrite comme suit:

/ motif / drapeaux

UN modèle est une chaîne dans laquelle vous fournissez un motif pour correspondre à une autre chaîne.
Drapeaux sont des attributs facultatifs qui servent des fins variées. Par exemple, le drapeau «G» signifie «mondial», entre autres.

La portée des expressions régulières est très large. Nous vous montrerons les plus basiques qui sont les plus nécessaires à la programmation via une explication étape par étape et quelques exemples réels.

Il existe de nombreuses méthodes dans lesquelles vous devrez peut-être utiliser des expressions régulières, par exemple, dans la recherche de JavaScript (), remplace (), correspond à () et divisé (). Nous commencerons par une simple recherche de chaînes sans utiliser l'expression régulière, et plus tard, nous vous montrerons comment effectuer la même recherche en utilisant des expressions régulières.

Exemples

Nous supposerons d'abord la chaîne:

Soit str = "Linuxhint est génial. Linuxhint fonctionne très bien et fonctionne à 100%."

Nous avons répété le même mot "super" et "linuxhint"Dans la phrase. Le but de cette chaîne bizarre deviendra évidente dans un instant.

Bien! Maintenant, nous allons simplement écrire la méthode de la chaîne de recherche JavaScript pour rechercher le terme «travail»

Str.recherche ("travail");


Comme vous pouvez le voir, il montre l'indice d'où le «travail» de la sous-chaîne donnée a commencé. Maintenant, nous allons passer à autre chose et essayer de faire la même chose avec la syntaxe regex.

Étape 1: Recherchez et remplacez une sous-chaîne

Vous pouvez rechercher une chaîne correspondante en utilisant une expression régulière en plaçant simplement la sous-chaîne entre les deux barres obliques dans l'expression.

Str.search (/ work /);


Comme vous pouvez le voir, il nous a également donné la même sortie.

Bien! Maintenant, nous verrons ce que nous pouvons faire avec l'expression régulière. Essayons de remplacer le mot "super"Avec, disons,"génial”En utilisant la méthode Remplace ().

Str.remplacer ("super", "génial");


Ici, vous pouvez voir le problème: la première occurrence de «super"A été remplacé, mais le second n'a pas.

Dans la première étape, vous avez simplement appris à rechercher une chaîne en utilisant une expression régulière. Maintenant, nous allons passer à la prochaine étape et en apprendre davantage sur le concept des drapeaux.

Étape 2: drapeaux

Dans cette étape, vous en apprendrez plus sur le concept et le but des drapeaux dans les expressions régulières. Nous utiliserons la méthode de remplacement de JavaScript pour expliquer cette idée.

Si vous souhaitez remplacer toutes les occurrences de «super,"Vous pouvez utiliser l'expression régulière avec le 'g'Flag, qui est court pour Global.

Str.remplacer (/ génial / g, "génial");


Parfait, toutes les occurrences de «Grand» sont maintenant changées. Mais, vous pouvez faire face à un problème si vous essayez de modifier toutes les occurrences de «Linuxhint» pour, disons, «notre site Web» en utilisant la même technique.

Nous essaierons de le faire d'abord, alors nous verrons comment pouvons-nous résoudre ce problème.

Str.remplacer (/ linuxhint / g, "notre site Web");


Bien que nous ayons fourni l'expression régulière du drapeau global, la première occurrence ne change pas. C'est à cause de la sensibilité à la caisse. Ainsi, nous devrons également fournir le drapeau d'insensibilité à la cas 'je,' dans ce cas. Vous pouvez le faire simplement en ajoutant le 'je'drapeau avec le'g' drapeau.

Str.remplacer (/ linuxhint / gi, "notre site Web");


Super. Comme vous pouvez le voir, toutes les occurrences du terme «linuxhint"Ont été modifiés au terme"notre site Web,”Quelle que soit la sensibilité de cas.

De même, vous pouvez utiliser des expressions régulières dans la fonction Split () de JavaScript.

Str.Split (/ linuxhint / gi);


Bien! La fonction a bien fonctionné. La méthode Split () a renvoyé le tableau de sous-chaînes, basée sur le terme «Linuxhint». Mais, si vous souhaitez également inclure les séparateurs, dans le tableau de la sous-chaîne, vous devrez jouer avec les modèles.

Donc, dans cette étape, nous avons appris les drapeaux et comment ils nous aident. Il y a plus de drapeaux disponibles. Par exemple, «M» est pour la correspondance multiligne, «S» est pour Dot All, etc. Maintenant, nous allons passer au concept de modèles et apprendre à utiliser ces éléments.

Étape 3: modèles

Dans cette étape, vous apprendrez à utiliser les modèles et les options connexes.
Pour inclure les séparateurs dans le tableau de la sous-chaîne, ajoutez simplement des parenthèses autour du motif, comme on peut le voir dans l'image suivante:

Str.Split (/ (LinuxHint) / gi);


Parfait! Comme vous pouvez le voir, les séparateurs sont également inclus dans le tableau de sous-chaînes.

Pour diviser la base de deux séparateurs, vous pouvez donner plusieurs sous-chaînes dans une expression régulière en utilisant le ou «|» opérateur.

Str.Split (/ linuxhint | grand / gi);


D'accord! L'opérateur a très bien fonctionné, car nous nous attendons à ce qu'il se divise.

Barre de barre

Maintenant, diviser entre la base de l'espace «« ou le point »."Signification pour ajouter des caractères spéciaux dans l'expression régulière, ajoutez une barre de barre" \ "avant tout caractères spéciaux.

Str.Split (/ \ | \./ gi);


D'accord, jusqu'à présent, tout va bien. Par exemple, disons, vous voulez changer les points en virgules dans l'expression suivante:

Str.remplacer(/\./g, ",");


Ça a marché!

Les barres réformées sont également utilisées à un autre but. Pour rechercher n'importe quel mot, chiffre ou espace, vous pouvez utiliser respectivement \ w, \ d et \ s, respectivement. Par exemple, pour remplacer les espaces par des tirets, l'expression suivante est utilisée:

Str.remplacer (/ \ s / g, "-");


Génial! Vous pouvez vraiment voir le potentiel dans les expressions régulières, maintenant.

Crochets [ ]

Si vous souhaitez remplacer plusieurs caractères dans une chaîne, vous pouvez les fournir tous dans un seul support carré, et ils seront remplacés par la sous-chaîne donnée. Par exemple, si vous souhaitez remplacer trois lettres dans une chaîne et que vous ne voulez pas mettre beaucoup ou «|» Opérateurs dans l'expression régulière, vous pouvez utiliser la syntaxe du support carré, dans lequel vous pouvez donner plusieurs lettres, comme ceci:

Str.remplacer (/ [nia] / g, "u");


Vous pouvez même donner une gamme de lettres, comme ceci:

Str.remplacer (/ [g-l] / g, "u");


Ou, une gamme de nombres:

Str.remplacer (/ [0-5] / g, "9");


Et, si vous souhaitez exclure les caractères fournis entre crochets, vous pouvez utiliser le caractère Caret, comme ceci:

Str.remplacer (/ [^ g-l] / g, "t");


Cela est utile lors de l'obtention des données des utilisateurs et des tests et de la validation de ces données, en particulier dans la validation des e-mails, du téléphone ou de la date.

Conclusion

Cet article vient de gratter la surface de l'expression régulière JavaScript. Il couvre les concepts uniquement du débutant au niveau intermédiaire. Il y a beaucoup plus à en savoir plus sur l'expression régulière, et vous pouvez utiliser cette expression pour faire beaucoup de choses auxquelles vous n'avez même pas pensé. Pour continuer à apprendre, à travailler et à acquérir plus d'expérience en javascript, consultez plus d'articles sur ce sujet à Linuxhint.com.