Exemple de correspondance JavaScript Regex - Comment utiliser JS Replace sur une chaîne

Les développeurs utilisent des éditeurs de texte depuis longtemps. Et comme la plupart des outils, tous les éditeurs de texte ont une fonctionnalité en commun: rechercher et remplacer.

Si vous utilisez la recherche et le remplacement depuis un certain temps, vous savez peut-être à quel point cette fonctionnalité est utile. Mais la plupart d'entre nous ne savent pas que cet outil est encore plus puissant que nous ne le pensons.

Il peut non seulement remplacer des chaînes simples, mais aussi des motifs. Ces modèles sont appelés expressions régulières .

Les expressions régulières existent dans JavaScript et la plupart des autres langages de programmation. Regex (pour faire court) est un outil très puissant pour vous aider à trouver des modèles de recherche simples et complexes.

Les algorithmes de recherche de chaînes sont également une branche importante de l'informatique. Dans cet article, nous allons apprendre à utiliser cet outil incroyable en JavaScript.

Pourquoi des expressions régulières?

Vous ne comprendrez pas l'importance réelle des expressions régulières tant que vous ne recevrez pas un long document et que vous ne serez pas invité à en extraire tous les e-mails.

Vous pouvez le faire manuellement, mais il existe une méthode ultra rapide qui peut le faire pour vous. La plupart des éditeurs de texte modernes autorisent Regex dans leur option Rechercher. Il est généralement désigné par .*.

Et ce n'est pas tout ce que les regex peuvent faire - les e-mails ne sont qu'un exemple. Vous pouvez rechercher n'importe quel type de chaîne qui suit un modèle, par exemple des URL ou du texte entre parenthèses.

Regex peut également être utilisé pour valider certains types de modèles, comme la validation des e-mails. Vous pouvez remplacer une longue logique de validation comme celle-ci:

function IsValidEmail(email) { if (email.length <= 2) { return false; } if (email.indexOf("@") == -1) { return false; } var parts = email.split("@"); var dot = parts[1].indexOf("."); var len = parts[1].length; var dotSplits = parts[1].split("."); var dotCount = dotSplits.length - 1; if (dot == -1 || dot  2) { return false; } for (var i = 0; i < dotSplits.length; i++) { if (dotSplits[i].length == 0) { return false; } } return true; };

Avec une seule ligne comme celle-ci:

function isValidEmail(email) { return /^(([^()\[\]\\.,;:\[email protected]"]+(\.[^()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email); }

Bien que cette expression régulière semble effrayante, ce n'est pas quelque chose dont vous devez vous souvenir. Une fois que vous aurez compris comment cela fonctionne, ce sera super simple à mettre en œuvre.

Correspondance JavaScript Regex

En JavaScript, nous avons une méthode de correspondance pour les chaînes. Cette méthode peut être utilisée pour faire correspondre Regex dans une chaîne.

Cette méthode est la même que la méthode find dans les éditeurs de texte. Il recherche une chaîne donnée avec un Regex et renvoie un tableau de toutes les correspondances. Le prototype de la méthode de correspondance est le suivant:

str.match(regexp)

Cela renverra un tableau de toutes les correspondances lors de la recherche de string ( str) pour l'expression régulière ( regexp).

Une utilisation de base de cette méthode serait de compter tous les mots dans une chaîne. Par exemple:

var str = "This is a test string"; var matchArr = str.match(/\w+/g); console.log(matchArr.length); //prints 5

Nous en apprendrons davantage sur cette \w+expression régulière plus loin dans cet article.

En utilisant de telles expressions régulières, nous pouvons effectuer diverses tâches qui nous obligeraient autrement à écrire une logique fastidieuse. Un exemple était la fonction de validation des e-mails. Nous devons tester tous les critères, mais en utilisant regex, vous pouvez le simplifier.

Les expressions régulières sont valides dans la plupart des fonctions de chaîne, mais vous devez vérifier le prototype de la fonction si vous voulez en être sûr. Une de ces méthodes est la méthode Replace. Apprenons-en plus ci-dessous.

Méthode de remplacement JavaScript

JavaScript a un certain nombre de fonctions utilitaires de chaîne. Remplacer en fait partie. Le prototype de la méthode de remplacement est le suivant:

const newStr = str.replace(regexp|substr, newSubstr|function)

Comme vous pouvez le voir, la méthode replace agit sur une chaîne et renvoie une chaîne. Il faut deux paramètres: la chaîne à remplacer et par quoi elle sera remplacée.

Le premier paramètre peut être une chaîne ou une expression régulière. Ici, nous pouvons utiliser la puissance des expressions régulières pour remplacer des modèles de recherche complexes par une chaîne.

Le deuxième paramètre pourrait également être une fonction. Pour le démontrer, voyons un exemple:

var str = "This is a test string"; var newStr = str.replace(/\w+/g, function(match) { return match.split("").reverse().join(""); }); console.log(newStr); //prints "sihT si a tset gnirts"

Cet exemple inverse chaque mot d'une chaîne. Donc, comme vous pouvez le voir, remplacer combiné avec regex est un outil très puissant en JavaScript.

La méthode replace peut être utile si vous souhaitez remplacer un modèle de recherche spécifique par une autre chaîne après un certain traitement de la chaîne d'origine.

Il peut également être utilisé pour corriger une correspondance invalide - par exemple pour valider un e-mail et si possible, pour corriger un e-mail invalide.

Maintenant que nous savons à quel point Regex est utile, apprenons quelques expressions régulières de base et recherchons des chaînes.

Expressions régulières de base

Bien que les expressions régulières soient un vaste sujet, les expressions de base sont très simples à comprendre et à retenir. Essayons de comprendre quelques termes de base associés aux expressions régulières.

Littéraux

Un littéral est tout caractère qui est évalué comme lui-même et non sous une forme générale. Ainsi, wordest également une expression régulière valide qui ne correspondra qu'à "mot" .

Si vous souhaitez remplacer toutes les instances d'un mot donné en JavaScript, vous pouvez le faire:

var str = "JavaScript is a very popular programming language. javascript is used in web developement. javascript is very easy to learn."; var newStr = str.replace(/javascript/gi,"js"); console.log(newStr); /* prints "js is a very popular programming language. js is used in web developement. js is very easy to learn." */

Cela remplace toutes les occurrences de JavaScript par JS. Nous avons accompli cela en utilisant l' gidentifiant, qui signifie recherche globale. Autrement dit, il recherche toutes les occurrences plutôt que la première.

Il existe également un iidentifiant. Il signifie recherche insensible à la casse. Il correspond à la chaîne en ignorant la casse.

Thus a literal can be used to match a specific character or group of characters.

Meta-characters

A meta-character is used for generic search, such as to search any digit, any character, or any alpha-numeric character. These are some common meta-characters:

  • \d matches any digit, that is, digits from 0 to 9
  • \w matches any alpha-numeric character, That is, alphabets a-z, A-Z and digits 0-9.
  • \s matches any whitespace

Similarly, \D , \W and \S match any non-digit, non-alphanumeric, and non-whitespace characters, respectively. For example, \d\d\d would match any three digits in a row.

Quantifiers

A quantifier is used to quantify any literal or meta-character. It can be used to select multiple occurrences of a given character. There are four types of quantifiers defined in regex:

  • * is used to match 0 or more occurrences of a given character.
  • + is used to match 1 or more occurrences of a given character.
  • . is used to match either no occurrence or 1 occurrence of a given character.
  • {min,max} or {n} can be used to match a number of occurrences in a range or a given number of times n

An example would be the one we used above to reverse every word in a string.

  • \w+ matches every word in a string
  • \w matches any alpha-numeric character
  • \w+ matches one or more occurrences of an alpha-numeric character, that is, every word in a string.

We could also use quantifiers to replace multiple whitespaces with a single whitespace. For example:

var str = "This is a string with multiple whitespaces"; var newStr = str.replace(/\s\s+/g, " "); console.log(newStr); //prints "This is a string with multiple whitespaces"

There are plenty of other uses for quantifiers.

Position meta-characters

There are also position meta-characters which represent a position. For example ^ represents the start of a line, $ represents end of a line, and \b represents word boundaries.

Conclusion

In this article, we learned how important regular expressions are. We also saw how they can be used for searching simple as well as complex search patterns.

This has great potential in programming with text. String-matching algorithms are used in DNA matching and form a significant branch of computer science.

Once you master regex you can use it with JavaScript's match and replace methods to simplify long programs and use it for validation of certain patterns. Regex can also help shorten long programs and make them more understandable.

Now you can use your own creativity and make wonderful regex – so good luck with your new skill.

This was a very basic overview of regular expressions. If you want to master the art of regex, I suggest you to check out Daniel Shiffman's tutorial here.

Hey, I hope you loved this article and learned something. You can find me at my internet home, theabbie.github.io  or my Github. Do checkout my other articles. Thank you.