Regex en javascript | Expliqué avec des exemples

Lorsqu'un développeur pose les yeux sur des expressions régulières ou l'expulsion, il semble fou. Quoi qu'ils puissent regarder, les expressions régulières sont extrêmement utiles et font de vous un programmeur efficace. Le concept Regex est un peu compliqué, mais dans ce post, nous vous guiderons à travers des étapes simples avec des exemples pour vous aider à maîtriser le regex en javascript.

Qu'est-ce que Regex dans JavaScript?

Regex ou l'expression régulière est simplement une chaîne qui définit un motif et est très utile pour trouver un motif dans une chaîne ou remplacer une chaîne par un motif assorti. Pour le dire simplement, supposons que vous souhaitiez valider une adresse e-mail ou un numéro de téléphone avec un modèle spécifié, puis Regex est utile.

Syntaxe regex:

var myRegex = / ABC /;

Nous enfermons un motif dans la barre oblique "/" Comme montré ci-dessus. Nous pouvons également utiliser le Regexp Constructeur pour définir un motif regex:

var myRegex = new regexp ('ABC');

Maintenant que nous savons ce qu'est Regex et quelle est sa syntaxe, voyons maintenant comment spécifier un modèle à l'aide de regex en javascript.

Spécifiez le modèle à l'aide de regex

Pour spécifier des modèles à l'aide de regex, nous utilisons des métacharacteurs qui sont des caractères qui ont une signification particulière. Metacharacters et ce qu'ils représentent dans Regex sont donnés dans le tableau ci-dessous:

Meta Caractor	Qu'est ce que ça fait?
[] (Crochets)	Tout ce que nous écrivons sur les crochets sera égalé à une chaîne donnée. Par exemple [abc] correspond à la un B, et c caractères avec une chaîne spécifiée. Nous pouvons également spécifier une plage par exemple [un F] est le même que [a B c d e F] ou [1-5] est le même que [12345].
^ (Symbole de la gare)	Le symbole de caret est utilisé pour vérifier si un texte ou une chaîne spécifiée commence par un certain caractère ou non E.g. ^ a correspond cependant à ABC ^ a ne correspond pas à bac. Le symbole du caret entre crochets est utilisé pour prendre le complément de caractères spécifiés. Par exemple [^ ABC] Spécifie que sauf A, B ou C Tout caractère présent sera apparié.
$ (Symbole Dollar)	Le $ le symbole est utilisé partout où nous voulons vérifier si une chaîne se termine par un certain caractère ou non. Par exemple, un $ signifie que la chaîne avec laquelle nous assortissons devrait avoir à la fin, c'est-à-dire amnésie sera jumelé avec un $ Cependant le cœur ne le fera pas.
* (Symbole d'étoile)	Le symbole d'étoile correspond à 0 ou plusieurs occurrences du motif ou du caractère spécifié présent à gauche du symbole d'étoile dans une chaîne. Par exemple, homme signifie que la recherche m et un caractère dans une chaîne. Ainsi MN aura 1 match. Principal n'aura aucun match car un n'est pas suivi de n et voici je entre.
+ (plus symbole)	Le symbole plus est comme un symbole d'étoile à l'exception qu'il correspond à 1 ou plusieurs occurrences du motif ou du caractère spécifié. Par exemple, quand MN La chaîne est recherchée pour l'expression MA + N Il n'y a cependant pas de correspondance lorsque l'expression est recherchée pour l'homme, il y a une correspondance.
(Croisillons)	Pour avoir une compréhension claire des accolades, voyons d'abord le code suivant I-E 2,3 ce qui signifie au moins 2 et au plus 3 répétitions est possible du modèle qui lui est laissé. Par exemple, l'expression A 2,3 Lorsqu'il est assorti avec la chaîne «ABC DAT» n'aura cependant aucune correspondance lorsque l'expression est appariée avec le "ABC Daat" il aura un match i-e dAAt.
| (Altération)	La modification ou le symbole de barre vertical est utilisé pour l'opérateur OR. Par exemple, l'expression a | b indique que un ou b devrait être présent dans une chaîne spécifiée. Ainsi FGH n'a pas de correspondance et abc a 2 matchs qui sont un B.
\ (Arrière)	Le but de la barre oblique inverse est d'échapper aux personnages ainsi que d'échapper à tous les métacharacteurs. En termes simples, si vous ne savez pas si un personnage contient une signification particulière ou non, placez une barre oblique inverse devant le personnage. Par conséquent, ce personnage ne sera pas traité de manière spéciale, par exemple, \ $ a L'expression correspondra à tout texte ou chaîne qui a un $ suivie par un.

Maintenant que nous savons comment spécifier des modèles à l'aide de regex, passons maintenant à quelques méthodes regex pour correspondre à un regex avec une chaîne spécifiée.

Modèles de test pour la correspondance

Plus tôt, nous avons expliqué comment nous pouvons utiliser le constructeur regexp pour initialiser l'objet regexp avec un motif spécifié. Cet objet regexp nous donne de nombreuses méthodes intégrées et l'une d'entre elles est la test() méthode. Le test() La méthode est très utile car elle vérifie une chaîne pour un modèle spécifié dans l'expression régulière. Le test() La méthode renvoie une valeur booléenne, c'est-à-dire si le modèle spécifié correspond à la chaîne, alors vrai est renvoyé, sinon false est renvoyé. Pour mieux comprendre le test() Méthode Voyons un exemple:

var myRegex = / Hello /;
output var = myRegex.Tester ('Hello World!');
console.journal (sortie); // vrai

Dans le code ci-dessus d'abord, nous avons défini un modèle qui est Bonjour puis utilisé le test de méthode intégrée () sur le modèle spécifié pour vérifier si la chaîne Bonjour le monde! contient bonjour ou pas. Le résultat est donné ci-dessous:

Au lieu de la valeur booléenne, la correspondance de chaîne peut également être renvoyée avec une autre méthode intégrée qui est la méthode Match (). Le code ci-dessous est l'implémentation de la méthode Match ():

var mystring = "Hello World!"
// modèle
var myRegex = / Hello /;
console.journal (MyString.match (myRegex)); // Bonjour

Un tableau sera retourné qui contiendra la chaîne d'entrée sur la méthode Match (), l'index sur lequel le match est trouvé ainsi que le match lui-même.

Si un match n'est pas trouvé, alors nul sera retourné:

var mystring = "Hello World!"
// modèle
var myRegex = / hi /;
console.journal (MyString.match (myRegex)); // nul

Drapeaux de motif

Nous avons vu que l'objet regexp accepte un modèle; Cependant, il convient également de noter que le regexp peut également prendre un paramètre Flag en option. Les drapeaux sont juste un peu de garniture supplémentaire qui modifie le comportement de recherche.

Le premier drapeau dont nous discuterons est le Ignorer le drapeau indiqué par i. Par défaut, la recherche de motifs en regex est sensible à la caisse, donc pour ignorer les cas, nous utilisons l'indicateur ignoré (i) lors de la recherche d'un motif. Par exemple:

var myRegex = / Hello / i;
console.journal (myRegex.Tester ("Hello World!")); // vrai

Bien que le modèle ait Bonjour Et la chaîne dans la méthode de test a le premier capital de lettre, c'est toujours une correspondance car nous avons utilisé le drapeau ignoré (i), donc le résultat sera vrai:

Pour utiliser l'indicateur Ignore avec l'objet regexp Copiez le code suivant:

var myRegex = new regexp ('bonjour', 'i');
console.journal (myRegex.Tester ("Hello World!")); // vrai

De même, nous pouvons utiliser le drapeau mondial indiqué par g dont la fonction consiste à renvoyer toutes les correspondances de la chaîne. Sans le drapeau mondial, seul le premier match est retourné. Le code ci-dessous utilise le drapeau global:

var myString = 'Hello World! Et bonjour univers!';;
var myRegex = / Hello / gi;
var correspond = [];
Var Match;
faire
match = myRegex.exec (myString);
if (correspond)
allumettes.push (match);

Pendant (faire correspondre != null)
console.journal (correspondance);

Tout d'abord, nous avons initialisé MyString qui contient la chaîne qui sera utilisée pour rechercher un modèle, et après cela, nous avons créé un modèle d'expression régulière qui contient l'indicateur global et l'ignore. Le drapeau global recherchera tous les matchs tandis que le drapeau ignoré ignorera la sensibilité des caisses. Dans le code ci-dessus, une autre méthode intégrée est utilisée qui est l'exec () dont la fonction consiste à renvoyer un tableau qui contient la correspondance. Cependant, s'il n'y avait pas de correspondance entre le motif et la chaîne, alors Null sera retourné. Il convient de noter que la méthode Exec () ne renvoie qu'un seul match en même temps, donc nous utilisons la boucle à faire et poussons tous les matchs vers le tableau des matchs. En fin de compte, nous enregistrons le tableau des matchs qui contient toutes les matchs:

Conclusion

Regex est une chaîne qui définit un motif ou trouve un motif dans une chaîne spécifiée. Nous utilisons l'objet regexp ou le slash vers l'avant / pour définir Regex. Le regexp prend également un indicateur I-E paramètre facultatif qui modifie le comportement de recherche. Pour spécifier des modèles, nous utilisons des métacharacteurs qui sont des caractères spécifiques ayant des significations spéciales. Pour tester s'il correspond à une chaîne ou non, nous utilisons des méthodes intégrées comme Test (), Match () ou Exec ().

Dans cet article, nous avons d'abord défini ce qui est regex en javascript et ce qui est la syntaxe regex en javascript. Ensuite, nous vous avons montré comment spécifier des modèles à l'aide de regex et de modèles de test en javascript. En fin de compte, nous avons discuté des deux drapeaux qui sont mondiaux et ignorés.