JavaScript Replace – Comment utiliser la méthode String.prototype.replace() Exemple JS

La méthode String.prototype.replace() recherche la première occurrence d’une chaîne et la remplace par la chaîne spécifiée. Elle effectue cette opération sans modifier la chaîne originale.

Cette méthode fonctionne également pour les expressions régulières, de sorte que l’élément que vous recherchez peut être exprimé sous la forme d’une expression régulière.

La valeur à renvoyer comme valeur remplacée peut être exprimée sous forme de chaîne ou de fonction.

Syntaxe de base de la méthode String.prototype.replace()

const variable = variable.replace("stringToReplace", "expectedString") ;

Vous utilisez la méthode replace() en :

• affectation de la ou des chaînes initiales à une variable
• en déclarant une autre variable
• pour la valeur de la nouvelle variable, en faisant précéder le nom de la nouvelle variable de la méthode replace()
• En séparant par des virgules la chaîne à remplacer et la chaîne attendue entre les parenthèses

Exemples de la méthode String.prototype.replace()

Un exemple de base ressemblerait à ceci :

const coding = "J'ai appris à coder à la télévision" ;
const replacedString = coding.replace("TV", "freeCodeCamp") ;

console.log(replacedString) ; // Résultat : J'ai appris à coder grâce à freeCodeCamp

Dans l’exemple ci-dessus :

• J’ai déclaré une variable nommée codage et je lui ai attribué la chaîne « J'ai appris à coder à la télévision« 
• J’ai déclaré une autre variable appelée replacedString
• Pour la valeur de la variable replacedString, j’ai fait appel à la méthode replace() et spécifié que je voulais remplacer « TV » de la variable initiale par « freeCodeCamp ».

Voici un exemple démontrant que la chaîne initiale n’est jamais mutée (modifiée) par la méthode replace():

const coding = "J'ai appris à coder grâce à la télévision" ;
const replacedString = coding.replace("TV", "freeCodeCamp") ;

console.log(replacedString) ; // Résultat : J'ai appris à coder grâce à freeCodeCamp
console.log(coding) ; // Résultat : J'ai appris à coder grâce à TV

Dans l’exemple ci-dessous, j’ai utilisé des expressions régulières pour rechercher le texte qui correspond à « TV » et je l’ai remplacé par « freeCodeCamp » :

const coding = "J'ai appris à coder à la télévision" ;
const replacedString = coding.replace(/TV/, "freeCodeCamp") ;

console.log(replacedString) ; // Résultat : J'ai appris à coder grâce au freeCodeCamp

Étant donné que la méthode replace() ne fonctionne que pour la première occurrence d’un texte dans une chaîne, que faire si vous voulez remplacer toutes les occurrences d’un mot par un autre mot dans une chaîne ? Vous pouvez utiliser la méthode replaceAll().

Comment utiliser la méthode replaceAll ()

?
Une méthode de chaîne de caractères légèrement similaire à la méthode replace() est la méthode replaceAll().

Cette méthode remplace toutes les occurrences d’un certain mot dans une chaîne de caractères.

Exemple de la méthode replaceAll()

const coding = "J'ai appris à coder à la télévision. La TV reste dans mon cœur pour la vie" ;
const replacedString = coding.replaceAll("TV", "freeCodeCamp") ;

console.log(replacedString) ; // Résultat : J'ai appris à coder grâce à freeCodeCamp. freeCodeCamp reste dans mon coeur pour la vie.

Chaque occurrence de « TV » a été remplacée par « freeCodeCamp » grâce à la méthode replaceAll().

Avec la méthode originale replace(), vous pouvez réaliser ce que replaceAll() fait en utilisant des expressions régulières pour rechercher chaque occurrence d’un certain mot dans une chaîne et le remplacer par un autre mot.

const coding = "J'ai appris à coder grâce à la télévision. TV reste dans mon coeur pour la vie" ;
const replacedString = coding.replace(/TV/g, "freeCodeCamp") ;

console.log(replacedString) ; // Résultat : J'ai appris à coder grâce à freeCodeCamp. freeCodeCamp reste dans mon cœur pour la vie.

J’ai pu rechercher chaque mot correspondant à « TV » avec le drapeau g d’une expression régulière et le remplacer par « freeCodeCamp ».

Comment passer une fonction à la méthode replace()

?
Comme je l’ai dit précédemment, vous pouvez exprimer la valeur que vous souhaitez renvoyer comme valeur remplacée sous forme de fonction.

Dans l’exemple ci-dessous, j’ai converti le titre de cet article en un slug d’URL avec la méthode replace :

const articleTitle = "JavaScript Replace - How to Use the String.prototype.replace() Method" ;
const slugifyArticleTitle = articleTitle.toLowerCase().replace(/ /g, function (article) {
    return article.split(" ").join("-") ;
  }) ;

console.log(slugifyArticleTitle) ; //Résultat : javascript-replace---how-to-use-the-string.prototype.replace()-method

Dans le script ci-dessus :

• J’ai déclaré une variable nommée articleTitle et j’ai attribué le titre de cet article
• J’ai déclaré une autre variable nommée slugifyArticleTitle et converti le titre de l’article en lettres minuscules avec la méthode toLowerCase()
• J’ai fait appel à la méthode replace() et j’ai recherché tous les espaces blancs avec / /g
• J’ai ensuite passé une fonction à la méthode replace(), et lui ai attribué le paramètre article. Ce paramètre fait référence à la chaîne de caractères (titre de l’article) convertie en lettres minuscules
• À l’intérieur de la fonction, j’ai retourné que je divise le titre de l’article partout où il y a un espace blanc. Ceci a été fait avec la méthode split().
• Après avoir divisé le titre de l’article partout où il y a un espace, j’ai utilisé la méthode join() pour joindre les lettres individuelles dans la chaîne avec un trait d’union.

Conclusion

La méthode String.prototype.replace() est une méthode de chaîne de caractères puissante avec laquelle vous pouvez faire beaucoup de choses en travaillant avec des chaînes de caractères en JavaScript.

Outre la méthode String.prototype.replace(), je vous ai également montré comment utiliser la méthode String.prototype.replaceAll() – un hybride de la méthode String.prototype.replace().

Vous devez faire attention avec la méthode String.prototype.replaceAll() car elle n’est pas encore supportée par certains navigateurs. Au lieu d’utiliser la méthode replaceAll(), je vous ai également montré comment vous pouvez obtenir la même chose en utilisant des expressions régulières pour rechercher toutes les valeurs d’une chaîne particulière.

Si vous trouvez cet article utile, n’hésitez pas à le partager avec vos amis et votre famille.

Merci de votre lecture.