Le replace() en Javascript | Développement Web

Le replace() en Javascript

La fonction replace() en Javascript correspond à la fonction str_repalce en PHP. Elle permet de remplacer une partie d’une chaîne de caractères par une autre.

Précédemment nous avons vu comment écrire une expression régulière, comment repérer ce motif dans une chaîne de caractère, comment extraire une sous-chaîne de caractères par rapport à un motif. La fonction replace() va cette fois détecter un motif dans un objet de type String puis remplacer ce motif par un autre.

Syntaxe de la fonction replace()

   myString.replace(motif_a_remplacer, motif_de_remplacement);

Cette méthode appliquée sur un objet de type String, retourne une nouvelle chaîne de caractères dans laquelle les caractères recherchés auront été remplacés par la chaîne de remplacement.

Utilisation de la fonction replace()

Dans cet exemple, nous allons remplacer les caractères e et a accentués par leur équivalent sans accent.

   // Ecriture des motifs à rempalcer
   var regAccentA = new RegExp('[àâä]', 'gi');
   var regAccentE = new RegExp('[éèêë]', 'gi');

   var myString = 'Caractères accentués à remplacer';

   // Application de la fonction replace() sur myString

   myString = myString.replace(regAccentA, 'a');
   myString = myString.replace(regAccentE, 'e');

   document.write(myString);

   // Affiche "Caracteres accentues a remplacer"

Exemple d’application avancée utilisant la fonction replace()

Les expressions régulières permettent d’opérer de manière encore plus puissante sur les objets de type String. Dans l’exemple qui suit, nous allons utiliser une expression parenthésée. L’expression parenthésée permet de mémoriser les éléments de la chaîne afin de les réutiliser dans l’opération de remplacement.

Pour illustrer l’utilisation des expressions parenthésées, nous allons rechercher dans un paragraphe les segments représentant la structure d’une URL puis remplacer ces segments par des liens cliquables.


   function transformUrlToLink(myVar){
     // Construction de l'expression régulière pour une URL
     var regUrl = new RegExp('(https?://[a-zA-Z0-9._-]{4,})', 'gi');

     return myVar.replace(regUrl,'< a href="$1">$1< /a>');
   }

   var myText = 'Retrouvez des conseils pour l\'apprentissage' +
                'du développement web sur https://www.analyste-programmeur.com';

   document.write(transformUrlToLink(myText));
   
   // Affiche:
   // Retrouvez des conseils pour l'apprentissage du
   // développement web sur https://www.analyste-programmeur.com
   // où https://www.analyste-programmeur.com est devenu un lien cliquable
   
   
   Ici, le s suivi du ? signifie que l'url peut contenir un s ou non pour les URL sécurisées

   Nous utilisons la notation $1 pour construire la chaîne de retour de la fonction. $1
   correspond au contenu de l'expression parenthésée. Il est permis d'utiliser
   jusqu'à 9 expressions accessibles notées de $1 à $9

   A noter que l'on retrouve également ce principe dans la réécriture d'url
   dans les fichiers .htaccess