Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

EXPRESSIONS REGULIERES, RECHERCHES ET REMPLACEMENTS

Expressions régulières et méthodes

Les expressions régulières, comme on a pu le constater dans la partie précédente, correspondent à des séquences de caractères.

Nous allons pouvoir utiliser certaines méthodes des objets String et regExp sur nos expressions régulières, afin justement par exemple d’effectuer de puissantes recherches ou des remplacement.

L’intérêt des expressions régulières, une nouvelle fois, va consister dans leur puissance et dans leur précision.

En effet, nous allons pouvoir rechercher des types d’expression précis (comme par exemple un enchaînement de 10 chiffres, ou la présence d’un « @ » et d’un « .com » dans une expression, etc.

Dans cette partie, nous allons utiliser nos expressions régulières conjointement avec cinq méthodes :

  • La méthode match() de l’objet String ;
  • La méthode search() de l’objet String ;
  • La méthode replace() de l’objet String ;
  • La méthode exec() de l’objet regExp ;
  • La méthode test() de l’objet regExp.

La méthode match() de l’objet String

La méthode match() de l'objet String va nous permettre de rechercher des caractères dans une séquence de caractères.

Cette méthode va prendre en argument la séquence de caractères à rechercher.

En précisant une regex en argument, nous allons pouvoir effectuer des recherches beaucoup plus poussées (sans tenir compte de la casse par exemple).

Cette méthode va renvoyer sous forme de tableau l’expression recherchée autant de fois qu’elle a été trouvée.

En l’utilisant avec une regex, cependant, elle ne renverra que la première occurrence trouvée sauf si nous ajoutons l’option g (pour effectuer une recherche globale) à notre regex.

Voyons immédiatement un exemple ensemble :

On utilise match() avec nos expressions regulieres

La méthode match() peut effectuer de puissantes recherches grâce à nos expressions régulières

Essayer ce code !

Ici, nous mêlons ce que nous connaissons déjà sur le DOM avec nos regex (c’est comme cela que l’on s’assure d’avoir bien compris et qu’on progresse le mieux !).

On commence par accéder à notre paragraphe puis on crée deux regex, une première avec l’option i et une seconde avec les deux options i et g.

Ensuite, on utilise notre méthode match() avec nos deux regex sur le contenu textuel de notre paragraphe bien évidemment (rappelez-vous que match() est une méthode de l’objet String).

Pour accéder à ce contenu textuel, on utilise donc la propriété textContent.

Ainsi, on va rechercher à chaque fois la séquence « engagez » mais avec des options différentes.

Finalement, on affiche les résultats à l’intérieur du deuxième paragraphe que nous avons créé spécifiquement pour cela en HTML.

Notre première regex renvoie Engagez. En effet, match() a trouvé pour la première fois la séquence « engagez » en début de paragraphe puisque nous avons décidé de négliger la casse avec l’option i.

La deuxième regex renvoie deux occurrences : Engagez trouvé en début de paragraphe et engagez trouvé dans le mot « rengagez » plus loin dans notre paragraphe.

Les deux occurrences ont été renvoyées grâce à l’option g qui nous permet d’effectuer une recherche « globale ». Nous reviendrons sur les options plus tard.

Notez que si match() ne trouve aucun résultat, elle renverra la valeur null.

La méthode search() de l’objet String

La métthode search() va retourner la position à laquelle à été trouvée la première occurrence de l’expression recherchée dans une chaîne de caractères ou -1 si elle n’a pas été trouvée.

Nous allons une nouvelle fois pouvoir fournir une expression régulière en argument de cette méthode.

Ensuite, l’utilisation va être très similaire à match().

On utilise la méthode search() de string avec nos regex en JavaScript

Nos regex nous permettent de rechercher efficacement une séquence de caractères avec search()

Essayer ce code !

Ici, on effectue notre première recherche sur la séquence « engagez » sans tenir compte de la casse. Notre méthode search() s’arrête donc sur le premier Engagez qui se trouve en position 0.

Cependant, pour notre deuxième recherche, nous enlevons l’option i et décidons donc de tenir compte de la casse. La méthode search() ne va donc trouver la séquence engagez que dans le mot « rengagez ». Cette séquence se trouve en position 31 dans notre chaîne de caractères.

La méthode replace() de l’objet String

La méthode replace() va nous permettre de rechercher une expression et de la remplacer par une autre.

Là encore, pas de surprise : nous allons utiliser cette méthode avec nos regex pour remplacer plus efficacement.

Cette méthode va prendre deux arguments : l’expression à rechercher (qui sera notre regex), et l’expression de remplacement.

Ci-dessous, par exemple, on recherche la séquence vous dans notre chaîne de caractères et si cette séquence est trouvée on la remplace par moi.

Utilisation de la méthode replace() avec les regex en JavaScript

On utilise replace() pour effectuer des remplacements en JavaScript

Essayer ce code !

Dans notre premier résultat, vous pouvez remarquer que seul le premier vous a été remplacé car nous n’avons pas utilisé d’option avec notre regex.

Notre seconde regex, en revanche, possède l’option g, ce qui fait que tous les vous trouvés dans la chaîne de caractères seront remplacés par des moi.

La méthode test() de l’objet regExp

La méthode test() va rechercher une séquence de caractères dans une chaîne de caractères.

Si la séquence est trouvée, cette méthode va renvoyer le booléen true. Dans le cas contraire, elle renverra false.

Notez que cette méthode appartient à l'objet regExp et non plus à String. Ainsi, on va l’utiliser sur un objet de type regExp.

La méthode test() va prendre comme argument la chaîne de caractères dans laquelle faire la recherche.

Utilisation de la méthode test() de l’objet JavaScript regExp

test() renvoie un booléen selon qu’elle ait trouvé la séquence de caractères ou pas

Essayer ce code !

Dans notre premier test, on recherche la séquence ENGAGEZ exactement, qui n’est pas trouvée par test(). La méthode renvoie donc false.

Dans le second test, on cherche cette fois-ci la séquence ENGAGEZ sans se soucier de la casse. La méthode test() trouve donc un résultat, et renvoie true.

La méthode exec() de l’objet regExp

La méthode exec() va également rechercher une séquence de caractères dans une chaîne de caractères, mais va renvoyer le texte trouvé ou null si la recherche n’a pas été fructueuse.

Cette méthode va s’utiliser avec un objet de type regExp et va prendre comme argument la séquence à rechercher.

Notez que si la séquence est trouvée plusieurs fois dans la chaîne de caractères, celle-ci ne sera renvoyée qu’une seule fois.

Utilisation de la méthode exec() de l’objet JavaScript regExp

exec() renvoie la première occurrence du texte trouvé

Essayer ce code !

Chapitre précédent

Chapitre suivant