Javascript (11) - Objet RegExp

Bonjour à tous et bienvenue dans cette nouvelle leçon de JavaScript. Aujourd'hui nous allons voir les expressions régulières ou Regex. Les expressions régulières permettent de vérifier la présence d'une séquence de caractères bien particulière que l'on appelle un motif ou une occurrence au sein d'une chaîne de caractères. Il existe un langage en particulier qui est connu par la puissance de ses expressions régulières qui est le langage Perl. Néanmoins, d'autres langages de programmation supportent bien les expressions régulières comme Python, PHP, JavaScript, etc. En JavaScript, pour créer une expression régulière, on fait appel soit au constructeur RegExp ou bien à une expression littérale. Par exemple, imaginez que l'on a une chaîne de caractères qui s'appelle src et qui contient la valeur suivante: logo.png. Bon, vous avez deviné qu'il s'agit d'une source d'une image que l'on va intégrer par exemple par la suite avec du HTML. Maintenant on va essayer d'appliquer une expression régulière sur cette chaîne, mais avant il faut d'abord définir cette expression-là. Dans un premier temps, nous allons définir une expression littérale de la manière suivante. Par exemple, je vais appeler mon expression régulière exp comme ça, égal, et je mets des délimiteurs, bon, double slash qu'on appelle des délimiteurs, et dedans je mettrai mon expression, par exemple L. Vous avez remarqué que j'ai pas mis de simples quotes, bon, parce que l'expression régulière dans ce cas c'est un objet RegExp. Mais j'ai mis des slashs au début et à la fin. Bon, ces slashs sont appelés des délimiteurs. Bon, ça montre automatiquement à JavaScript que la syntaxe qui est au milieu est une expression régulière. Dans ce cas, l'expression c'est le caractère L. Bon, maintenant j'ai créé deux entités qui sont indépendantes, à savoir la chaîne de caractères sur laquelle je vais appliquer l'expression régulière et l'expression elle-même qui est définie de cette manière. Donc maintenant je vais essayer de vérifier l'exactitude de l'expression régulière sur la chaîne Alors maintenant je vais faire appel à la console.log et je mettrai l'expression exp. et je fais appel à la méthode test. À la méthode test je vais passer comme argument la chaîne de caractères que je veux évaluer, à savoir src. Bon maintenant qu'est-ce que je viens de faire? Je vais écrire dans la console le résultat retourné par la méthode test qui est un résultat booléen, soit vrai ou bien faux. Dans ce cas, le JavaScript va tout simplement vérifier est-ce que la chaîne de caractères que j'ai définie et que j'ai passée en guise d'argument pour la méthode test vérifie bel et bien l'expression régulière que j'ai définie qui s'appelle exp. Voilà qui est ici. Et le résultat sera booléen, soit true ou bien false. Mais comment ça va se passer? En réalité, le JavaScript va vérifier est-ce que le motif ou bien l'occurrence que j'ai définie fait figure bel et bien dans ma chaîne de caractères. Dans ce cas, il va vérifier est-ce que le caractère l figure dans ma chaîne. Maintenant quand j'exécute, je vais voir que ça me retourne true, c'est-à-dire que la chaîne de caractères vérifie bien l'expression régulière que j'ai définie. Voilà, donc maintenant ça c'est la première méthode qui permet de vérifier une expression régulière. Sinon, on peut carrément faire appel à l'objet RegExp de la manière suivante. Alors exp, ça sera mon objet, je vais mettre dans new Regex, et dans ce cas regex est le constructeur auquel je vais passer l'expression souhaitée. De la même manière, je peux mettre soit \\l pour dire que c'est l'expression, ou bien je peux carrément la définir en tant que chaîne de caractères de la manière suivante. Maintenant, c'est la même chose, c'est que je vais vérifier avec la méthode test est-ce que la chaîne de caractères, ou bien est-ce que le caractère l figure dans la chaîne src que j'ai spécifiée en guise d'argument de la méthode test. Maintenant, j'exécute. Et ça me retourne toujours true. Un traitement pareil, on aurait pu le faire simplement avec la méthode indexOf qu'on a vu dans la partie chaînes de caractères. Mais la puissance des expressions régulières, c'est qu'elles peuvent carrément définir des motifs qui sont beaucoup plus compliqués que ça. Par exemple, imaginez que je veux vérifier est-ce que ma chaîne de caractères commence par un L. Parce qu'ici j'ai bien dit est-ce que L figure ou non, que ce soit au début, au milieu ou bien à la fin. Mais si je veux dire que ça doit commencer par le L, donc je vais mettre accent circonflexe au début et dans ce cas l'expression signifie que ma chaîne, c'est-à-dire la chaîne que je vais évaluer, doit impérativement commencer par le l minuscule. Alors quand j'exécute ça me retourne toujours True. Donc maintenant imaginez qu'à la place de l j'ai mis o. On sait bien que o figure de nombreuses fois dans la chaîne de caractères mais pas au début. Alors quand j'exécute ça me retourne dans ce cas False. De la même manière, imaginez que je veux vérifier est-ce que ma chaîne de caractères finit par le caractère g. Bon, si je fais ça, bon, il va vérifier tout simplement est-ce que g figure dans ma chaîne. Mais si je mets un dollar à la fin, dans ce cas ça signifie que ma chaîne doit finir impérativement par le caractère g. Quand j'exécute maintenant, ça me donne true. Bon, autrement dit, imaginez que je veux vérifier est-ce que ma source finit par .png. Alors je mettrai tout simplement PNG comme ça, suivi d'un dollar. Dans ce cas, je vais vérifier est-ce que mon image est une image PNG, c'est-à-dire une image avec l'extension PNG. Et là, ça me retourne encore true. Mais puisque c'est une extension, vaut mieux la préfixer par un point. Le seul problème, c'est que le point, c'est un mot-clé ou bien un caractère spécial des expressions régulières. Ça veut dire il sera évalué en tant qu'expression lui-même. Alors il faut échapper et grâce à l'antislash. Dans ce cas, je vais vérifier est-ce que ma chaîne finit par .png. Bon, j'exécute et ça me retourne toujours True, ça veut dire que ma chaîne de caractères vérifie bien l'expression régulière qui a été établie. Imaginez maintenant que je veux vérifier que ma chaîne de caractères, elle vaut bien la valeur logo.png. Alors je peux faire la chose suivante. Bon, quand je fais ça, je vérifie tout simplement est-ce que la chaîne logo.png figure dans ma chaîne de caractères. Mais il se peut bien qu'il y ait quelque chose avant ou bien quelque chose après. Mais si je veux vérifier si ma chaîne correspond bel et bien à la chaîne exactement comme ceci, alors je mettrai l'accent circonflexe au début et un dollar à la fin, sans oublier d'antislasher le point pour le dés spécialiser. Donc maintenant j'exécute et ça me retourne True. Autrement dit, imaginez que j'ai mis quoi que ce soit, par exemple alogo comme ça. Bon, quand j'exécuterai maintenant, ça me retourne False. Ça veut dire que la chaîne ne correspond plus. Maintenant, on va voir quelques expressions un peu plus spéciales. Bon, imaginez que je veux vérifier que ma chaîne de caractères contient exclusivement des caractères alphabétiques. Alors, ce que je vais faire ici, c'est des crochets et ensuite je mettrai a-z. Bon, ici quand vous mettez des crochets, ça signifie que c'est un intervalle. Ça veut dire que ce sont les caractères soit a, soit b, soit c jusqu'à z, c'est-à-dire les caractères alphabétiques. Puisque j'ai mis ça commence par et ça finit par, alors dans ce cas la chaîne de caractères doit correspondre à un caractère alphabétique et un seul, ce qui n'est pas le cas parce qu'on sait bien que notre chaîne ici contient beaucoup plus de caractères. Alors pour dire que ça peut contenir d'autres caractères alphabétiques, je mettrai tout simplement ici un+. Le+ dans ce cas, ça fait référence à l'occurrence précédente, c'est-à-dire que les caractères alphabétiques, il peut y en avoir une seule, 2, ou bien 3, ou bien indéfiniment de caractères. Dans ce cas, quand j'exécute, ça me retourne false, et c'est tout à fait normal parce que ma chaîne ne contient pas que de l'alphabet minuscule, mais ça contient aussi un point. Alors là, je peux ajouter un point pour dire que l'intervalle de caractères, ça contient des caractères alphabétiques et aussi le caractère point. Maintenant quand j'exécute, ça me donne bien true parce que tous les caractères qui sont là figurent bel et bien dans ma chaîne de caractères. Ici remarquez que je n'ai pas antislashé le point parce que je suis dans l'intervalle, c'est-à-dire dans les crochets. Alors dans les crochets, le seul caractère qu'il faut vraiment déspécialiser, c'est le tiret lui-même. Ça veut dire si vous voulez chercher le tiret en tant que caractère et non pas en tant qu'intervalle. Maintenant nous allons changer la valeur de la chaîne de caractères. On va dire que src c'est logo. .jpg. Maintenant on va essayer de faire le même test, ça veut dire qu'on va vérifier est-ce que l'extension de mon fichier ou bien de ma source finit par .jpg. Alors je mettrai un truc du genre .jpg sans oublier d'antislasher le point pour dire que c'est un caractère ordinaire, donc qui est le point lui-même, et bien sûr je mettrai ici un dollar pour dire que ma chaîne finit par ceci. Maintenant quand j'exécute, ça me retourne bel et bien true. Le problème c'est que des fois il se peut bien qu'il existe des images jpg mais contient aussi le caractère E parce que le nom de la compression elle-même c'est JPEG et on peut bien suffixer notre image JPG avec l'extension .jpeg. Dans ce cas, pour prendre en considération le E, bon, si je fais ça, alors dans ce cas il faut impérativement que l'image finisse par .jpeg. Le problème c'est que c'est possible que ça finisse aussi par .jpg. Alors il faut rendre le caractère E facultatif grâce au symbole point d'interrogation. Donc Dans ce cas, le point d'interrogation fait référence au caractère immédiatement précédent, c'est-à-dire que ce caractère il peut figurer comme il peut pas figurer dans ce cas. Donc quand j'exécute, ça me retourne true et quand j'enlève le e de la chaîne, ça me retourne true aussi. Donc maintenant on va s'intéresser au nom complet de l'image parce que là nous avons vérifié la valeur de l'extension mais on veut aussi vérifier le nom de l'image, c'est-à-dire que vous n'autorisez que des images dont le nom contient des caractères alphabétiques minuscules ou bien majuscules, et aussi le caractère souligné, voire même les caractères numériques. Alors je peux mettre un motif de la manière suivante, c'est-à-dire je vais dire que ma chaîne commence par l'intervalle suivant, et je mets ici az pour dire tous les caractères alphabétiques minuscules, Az pour dire tous les caractères alphabétiques majuscules, Je mettrai aussi 0-9 pour dire tous les caractères numériques et le caractère souligné. Et bien sûr, ça peut figurer plusieurs fois, donc je mettrai ici un plus. Maintenant, j'exécute pour voir le résultat. Ça me retourne bien True. Cette syntaxe est un peu longue, mais heureusement il existe des raccourcis. On peut remplacer toute cette syntaxe-là par le mot-clé antislash w. Antislash w, c'est un mot-clé qui signifie tous les caractères alphabétiques minuscules et majuscules confondus. Tous les caractères numériques et aussi le symbole souligné. Il ne faut pas oublier de dés spécialiser le caractère anti-slash parce que lui-même c'est un caractère spécial. Alors je mettrai double anti-slash comme ça. Maintenant j'exécute et ça me retourne true. Maintenant imaginez que le nom de l'image ne doit pas dépasser 5 caractères, c'est-à-dire vous autorisez entre 2 et 5 caractères. C'est juste un exemple. Au lieu de mettre carrément le+, parce que+ ça veut dire c'est indéfini, je vais mettre ici des crochets, je mettrai 3, 5. L'intervalle que j'ai spécifié ici, il fait référence aux caractères ou bien aux motifs précédents. Ça veut dire que les caractères qui seront ici doivent figurer entre 3 et 5 fois. Ici, bon, j'ai 4 caractères, alors quand j'exécute, ça me retourne true. Bon, imaginez que, bon, j'ai mis juste log.jpg, ça fait 3 caractères. C'est toujours True. Quand je mets juste LO, donc ça fait 2 caractères, maintenant ça me retourne False. Même chose si je mets logo par exemple A, donc ça fait 5 caractères, alors je suis toujours dans l'intervalle, alors c'est True. Bon, quand je mettrai un B, donc maintenant ça fait 6 caractères, et quand j'exécute ça me donne False. Si vous voulez spécifier la valeur minimale et non pas la valeur maximale, donc il suffit de retirer la valeur maximale dans ce cas. Le minimum c'est 3 et le maximum n'est pas spécifié. Autrement dit, je peux mettre autant de caractères que je souhaite. J'exécute et ça marche à condition de ne pas passer au-dessous de 3 caractères. Voilà, maintenant j'espère que vous avez compris le principe des expressions régulières. On va retourner sur ça dans des prochains exercices d'une manière plus avancée pour en voir l'utilité. Merci pour votre attention et à la vidéo prochaine.