path: root/files/fr/web/javascript/reference/global_objects/string/replace/index.html

---
title: String.prototype.replace()
slug: Web/JavaScript/Reference/Global_Objects/String/replace
tags:
  - Chaîne
  - Expression
  - JavaScript
  - Méthode
  - Prototype
  - Reference
  - Régulière
translation_of: Web/JavaScript/Reference/Global_Objects/String/replace
original_slug: Web/JavaScript/Reference/Objets_globaux/String/replace
---
<div>{{JSRef}}</div>

<p>La méthode <code><strong>replace()</strong></code> renvoie une nouvelle chaîne de caractères dans laquelle tout ou partie des correspondances à un <code>modèle</code> sont remplacées par un <code>remplacement</code>. Le <code>modèle</code> utilisé peut être une {{jsxref("RegExp")}} et le remplacement peut être une chaîne ou une fonction à appeler pour chaque correspondance. Si <code>modèle</code> est une chaîne de caractères, seule la première correspondance sera remplacée.</p>

<p>La chaîne de caractère originale reste inchangée.</p>

<div>{{EmbedInteractiveExample("pages/js/string-replace.html")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox"><var>chn</var>.replace(<var>regexp</var>|<var>souschn</var>, nouv<var>Souschn</var>|<var>fonction</var>)</pre>

<h3 id="Paramètres">Paramètres</h3>

<dl>
 <dt><code>regexp</code> (modèle)</dt>
 <dd>Un objet ou un littéral {{jsxref("RegExp")}}. La ou les correspondances sont remplacées  par <code>nouvSouschn</code> ou par la valeur retournée par la <code>fonction</code> indiquée.</dd>
 <dt><code>souschn</code> (modèle)</dt>
 <dd>Une {{jsxref("String")}} qui est à remplacer par <code>nouvSouschn</code>. Elle est traitée comme une chaîne de caractères verbatim et elle n'est <em>pas</em> interprétée comme une expression régulière. Seule la première occurrence sera remplacée.</dd>
 <dt><code>nouvSouschn</code> (remplacement)</dt>
 <dd>La {{jsxref("String")}} qui remplace la chaîne de caractères indiquée par le paramètre <code>regexp</code> ou <code>souschn</code>. Un certain nombre de modèles de remplacement spéciaux sont supportés ; voir la section "<a href="#Indiquer_une_chaîne_de_caractère_comme_paramètre">Indiquer une chaîne de caractères comme paramètre</a>" ci-dessous.</dd>
 <dt><code>fonction</code> (remplacement)</dt>
 <dd>Une fonction à appeler pour créer la nouvelle sous-chaîne de caractères à utiliser pour remplacer la <code>regexp</code> ou la <code>souschn</code> donnée. Les arguments passés à cette fonction sont décrits dans la section "<a href="#Indiquer_une_fonction_comme_paramètre">Indiquer une fonction comme paramètre</a>" ci-dessous.</dd>
</dl>

<h3 id="Valeur_retournée">Valeur retournée</h3>

<p>Une nouvelle chaîne de caractères avec tout ou partie des correspondances du modèle remplacées par un remplacement.</p>

<h2 id="Description">Description</h2>

<p>Cette méthode ne change pas l'objet {{jsxref("String")}} auquel elle est appliquée. Elle retourne simplement une nouvelle chaîne de caractères.</p>

<p>Pour réaliser une recherche et remplacement global(e), incluez le commutateur <code>g</code> dans l'expression régulière.</p>

<h3 id="Indiquer_une_chaîne_de_caractère_comme_paramètre">Indiquer une chaîne de caractère comme paramètre</h3>

<p>La chaîne de caractère de remplacement peut inclure les modèles de remplacement spéciaux suivants :</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Modèle</td>
   <td class="header">Insère</td>
  </tr>
  <tr>
   <td><code>$$</code></td>
   <td>Insère un "$".</td>
  </tr>
  <tr>
   <td><code>$&amp;</code></td>
   <td>Insère la chaine de caractère en correspondance.</td>
  </tr>
  <tr>
   <td><code>$`</code></td>
   <td>Insère la partie de la chaîne de caractère qui précède la sous-chaîne en correspondance.</td>
  </tr>
  <tr>
   <td><code>$'</code></td>
   <td>Insère la partie de la chaîne de caractère qui suit la sous-chaîne en correspondance.</td>
  </tr>
  <tr>
   <td><code>$<em>n</em></code></td>
   <td>
    <p>Où <code><em>n</em></code> est un entier positif inférieur à 100. Insère la <em>n</em> ième chaîne de sous-correspondance entre parenthèses, à condition que le premier argument ait été un objet {{jsxref("RegExp")}}. Notez que ceci est réalisé en indices base 1.</p>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="Indiquer_une_fonction_comme_paramètre">Indiquer une fonction comme paramètre</h3>

<p>Vous pouvez indiquer une fonction comme second paramètre. Dans ce cas, cette fonction sera appelée après que la recherche a été effectuée. Le résultat de la fonction (valeur retournée) sera utilisé comme chaîne de remplacement. (Note : les modèles de remplacement spéciaux mentionnés ci-dessus ne s'appliquent <em>pas</em> dans ce cas). Notez que cette fonction sera appelée plusieurs fois, pour chaque correspondance complète à remplacer si l'expression régulière dans le premier paramètre est globale.</p>

<p>Les arguments de cette fonction sont les suivants :</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Nom possible</td>
   <td class="header">Valeur fournie</td>
  </tr>
  <tr>
   <td><code>correspondance</code></td>
   <td>La chaîne de caractère en correspondance. (Correspond au <code>$&amp;</code> défini ci-dessus.)</td>
  </tr>
  <tr>
   <td><code>p1, p2, ...</code></td>
   <td>
    <p>La <em>n</em>-ième chaîne de sous-correspondance entre parenthèses capturantes, à condition que le premier argument de <code>replace()</code> soit un objet <code>RegExp</code>. (Correspond aux <code>$1</code>, <code>$2</code>, etc. ci-dessus.) Par exemple, si <code>/(\a+)(\b+)/</code> a été indiqué, <code>p1</code> correspond à <code>\a+</code>, et <code>p2</code> à <code>\b+</code>.</p>
   </td>
  </tr>
  <tr>
   <td><code>decalage</code></td>
   <td>Le décalage entre la sous-chaîne en correspondance à l'intérieur de la chaîne complète en cours d'analyse. (Par exemple, si la chaîne complète était <code>'abcd'</code>, et que le chaîne en correspondance était <code>'bc'</code>, alors cet argument vaudra 1.)</td>
  </tr>
  <tr>
   <td><code>chaine</code></td>
   <td>La chaîne complète en cours d'analyse.</td>
  </tr>
 </tbody>
</table>

<p>(Le nombre exact d'arguments varie suivant que le premier paramètre est ou non un objet {{jsxref("RegExp")}} et, dans ce cas, du nombre de sous-correspondances entre parenthèses qu'il indique.)</p>

<p>L'exemple suivant affectera <code>'abc - 12345 - #$*%'</code> à la variable <code>nouvelleChaine</code> :</p>

<pre class="brush: js">function remplaceur(correspondance, p1, p2, p3, decalage, chaine) {
  // p1 est non numérique, p2 numérique, et p3 non-alphanumérique
  return [p1, p2, p3].join(' - ');
}
var nouvelleChaine = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, remplaceur);
console.log(nouvelleChaine); // abc - 12345 - #$*%
</pre>

<h2 id="Exemples">Exemples</h2>

<h3 id="Définition_de_lexpression_régulière_dans_replace">Définition de l'expression régulière dans <code>replace()</code></h3>

<p>Dans l'exemple suivant, l'expression régulière est définie dans <code>replace()</code> et inclut l'indicateur d'indifférence à la casse.</p>

<pre class="brush: js">var chn = 'Twas the night before Xmas...';
var nouvChn = chn.replace(/xmas/i, 'Christmas');
console.log(nouvChn); // Twas the night before Christmas...</pre>

<p>Cela affiche 'Twas the night before Christmas...'.</p>

<div class="blockIndicator note">
<p>Note : Voir <a href="/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res">ce guide</a> pour plus d'explications concernant les expressions régulières.</p>
</div>

<h3 id="Utilisation_de_global_et_ignore_avec_replace">Utilisation de <code>global</code> et <code>ignore</code> avec <code>replace()</code></h3>

<p>Le remplacement global ne peut être fait qu'avec une expression régulière. Dans l'exemple suivant, l'expression régulière inclut les indicateurs global et indifférence à la casse, qui permettent à <code>replace()</code> de remplacer chaque occurrence de 'pommes' dans la chaîne par 'oranges'.</p>

<pre class="brush: js">var re = /pommes/gi;
var chn = 'Les pommes sont rondes, et les pommes sont juteuses.';
var nouvChn = chn.replace(re, 'oranges');
console.log(nouvChn); // Les oranges sont rondes, et les oranges sont juteuses.
</pre>

<p>Cela affiche 'Les oranges sont rondes, et les oranges sont juteuses.'.</p>

<h3 id="Inverser_des_mots_dans_une_chaîne_de_caractères">Inverser des mots dans une chaîne de caractères</h3>

<p>Le script suivant intervertit les mots dans la chaîne de caractères. Pour le texte de remplacement, le script utilise les modèles de remplacement <code>$1</code> et <code>$2</code>.</p>

<pre class="brush: js">var re = /(\w+)\s(\w+)/;
var chn = 'Jean Martin';
var nouvChn = chn.replace(re, "$2, $1");
console.log(nouvChn); // Martin, Jean
</pre>

<p>Cela affiche 'Martin, Jean'.</p>

<h3 id="Utilisation_dune_fonction_inline_modifiant_les_caractères_en_correspondance">Utilisation d'une fonction inline modifiant les caractères en correspondance</h3>

<p>Dans cet exemple, toutes les occurrences des lettres majuscules sont converties en minuscules, et un tiret est inséré juste avant l'emplacement de la correspondance. La chose importante ici est que des opérations suppémentaires sont nécessaires sur l'élément en correspondance avant qu'il ne soit retourné comme remplacement.</p>

<p>La fonction de remplacement accepte le fragment en correspondance comme paramètre, et elle l'utilise pour transformer sa casse et y concaténer le tiret avant de le retourner.</p>

<pre class="brush: js">function styleFormatTiret(nomPropriete) {
  function majusculesEnTiretMinuscules(correspondance, decalage, chaine) {
    return (decalage &gt; 0 ? '-' : '') + correspondance.toLowerCase();
  }
  return nomPropriete.replace(/[A-Z]/g, majusculesEnTiretMinuscules);
}
</pre>

<p>Avec <code>styleFormatTiret(</code><code>'borderTop')</code>, cela renvoie 'border-top'.</p>

<p>Du fait que nous voulons transformer davantage le résultat de la correspondance avant la substitution finale, nous devons utiliser une fonction. Cela force l'évaluation de la correspondance avant la méthode {{jsxref ("String.prototype.toLowerCase()", "toLowerCase()")}}. Si nous avions essayé de le faire en utilisant la correspondance sans fonction, le {{jsxref ("String.prototype.toLowerCase()", "toLowerCase()")}} n'aurait eu aucun effet.</p>

<pre class="brush: js">var nouvChn = nomPropriete.replace(/[A-Z]/g, '-' + '$&amp;'.toLowerCase()); // ne fonctionne pas
</pre>

<p>Ceci est dû au fait que <code>'$&amp;'.toLowerCase()</code> serait d'abord évalué comme un littéral de chaîne (résultant en le même <code>'$&amp;'</code>) avant d'utiliser les caractères comme modèle.</p>

<h3 id="Remplacer_un_degré_Fahrenheit_par_son_équivalent_Celsius">Remplacer un degré Fahrenheit par son équivalent Celsius</h3>

<p>L'exemple suivant remplace des degrés Fahrenheit par leur équivalent en degrés Celsius. Les degrés Fahrenheit doivent être un nombre se terminant par F. La fonction renvoie le nombre en Celsius se terminant par C. Par exemple, si le nombre de départ est 212F, la fonction renvoie 100C. Si le nombre de départ est 0F, la fonction retourne -17.77777777777778C.</p>

<p>L'expression régulière <code>test</code> vérifie tout nombre se terminant par F. Le nombre de degrés Fahrenheit est accessible à la fonction via son deuxième paramètre, <code>p1</code>. La fonction définit le nombre Celsius sur la base des degrés Fahrenheit transmis dans une chaîne à la fonction <code>f2c()</code>. <code>f2c()</code> renvoie ensuite le nombre Celsius. Cette fonction se rapproche de l'indicateur <code>s///e</code> de Perl.</p>

<pre class="brush: js">function f2c(x) {
  function convertir(chn, p1, decalage, s) {
    return ((p1-32) * 5/9) + 'C';
  }
  var s = String(x);
  var test = /(-?\d+(?:\.\d*)?)F\b/g;
  return s.replace(test, convertir);
}
</pre>

<h3 id="Utiliser_une_fonction_inline_avec_une_expression_régulière_pour_éviter_des_boucles_for">Utiliser une fonction inline avec une expression régulière pour éviter des boucles <code>for</code></h3>

<p>L'exemple suivant accepte un modèle chaîne et le convertit en un tableau d'objets.</p>

<p><strong>Entrée : </strong></p>

<p>Une chaîne de caractères composée des caractères <code>x</code>, <code>-</code> et <code>_</code></p>

<pre class="brush: js">x-x_
x---x---x---x---
x-xxx-xx-x-
x_x_x___x___x___</pre>

<div><strong>Sortie :</strong></div>

<div></div>

<div>Un tableau d'objets. Un <code>'x'</code> dénote un état <code>'marche'</code>, un <code>'-'</code> symbolise un état '<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">arret</span></font>' et un  <code>'_'</code> (blanc souligné) symbolise la longueur d'un état <code>'<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">marche</span></font>'</code>.</div>

<div></div>

<pre class="brush: json">[
  { marche: true, longueur: 1 },
  { marche: false, longueur: 1 },
  { marche: true, longueur: 2 }
  ...
]</pre>

<div><strong>Fragment :</strong></div>

<div></div>

<div>
<pre class="brush: js">var chn = 'x-x_';
var tabRet = [];
chn.replace(/(x_*)|(-)/g, function(correspondance, $1, $2){
  if($1) tabRet.push({ marche: true, longueur: $1.length });
  if($2) tabRet.push({ marche: false, longueur: 1 });
});

console.log(tabRet);</pre>
</div>

<div>Ce fragment génère un tableau de 3 objets au format désiré sans utiliser de boucle <code>for</code>.</div>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
  <tr>
   <td>{{SpecName('ES3')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td>Définition initiale. Implémentée en JavaScript 1.2</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.5.4.11', 'String.prototype.replace')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, regardez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une pull request.</p>

<p>{{Compat("javascript.builtins.String.replace")}}</p>

<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>

<ul>
 <li><code>flags</code> était un troisième argument non standard disponible uniquement dans Gecko : <var>str</var>.replace(<var>regexp</var>|<var>substr</var>, <var>newSubStr</var>|<var>function, flags</var>)</li>
 <li>À partir de Gecko 27 {{geckoRelease(27)}}, cette méthode a été modifiée pour être conforme à la spécification ECMAScript. Lorsque <code>replace()</code> est appelée avec une expression régulière globale, la propriété {{jsxref("RegExp.lastIndex")}} (si elle est définie) sera remise à <code>0</code> ({{bug(501739)}}).</li>
 <li>À partir de Gecko 39 {{geckoRelease(39)}}, l'argument non-standard <code>flags</code> est désapprouvé et déclenche un avertissement dans la console ({{bug(1142351)}}).</li>
 <li>À partir de Gecko 47 {{geckoRelease(47)}}, l'argument non-standard <code>flags</code> n'est plus supporté dans les versions non distribution et sera bientôt retiré complètement ({{bug(1245801)}}).</li>
 <li>À partir de Gecko 49 {{geckoRelease(49)}}, l'argument non-standard <code>flags</code> n'est plus supporté ({{bug(1108382)}}).</li>
</ul>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{jsxref("String.prototype.match()")}}</li>
 <li>{{jsxref("RegExp.prototype.exec()")}}</li>
 <li>{{jsxref("RegExp.prototype.test()")}}</li>
</ul>