Comment remplacer toutes les occurrences d'une chaîne?

J'ai cette chaîne:

"Test abc test test abc test test test abc test test abc"

Faire:

str = str.replace('abc', '');

semble supprimer uniquement la première occurrence de abcdans la chaîne ci-dessus.

Comment puis-je en remplacer toutes les occurrences?

Remarque: Ne l'utilisez pas dans un code critique pour les performances.

Comme alternative aux expressions régulières pour une chaîne littérale simple, vous pouvez utiliser

str = "Test abc test test abc test...".split("abc").join("");

Le schéma général est

str.split(search).join(replacement)

Dans certains cas, cela était plus rapide que l'utilisation replaceAllet une expression régulière, mais cela ne semble plus être le cas dans les navigateurs modernes.

Indice de référence: https://jsperf.com/replace-all-vs-split-join

Conclusion: si vous avez un cas d'utilisation critique pour les performances (par exemple, le traitement de centaines de chaînes), utilisez la méthode Regexp. Mais pour la plupart des cas d'utilisation typiques, cela vaut la peine de ne pas avoir à se soucier des caractères spéciaux.

str = str.replace(/abc/g, '');

En réponse au commentaire:

var find = 'abc';
var re = new RegExp(find, 'g');

str = str.replace(re, '');

En réponse au commentaire de Click Upvote , vous pouvez le simplifier encore plus:

function replaceAll(str, find, replace) {
  return str.replace(new RegExp(find, 'g'), replace);
}

Remarque: Les expressions régulières contiennent des caractères (méta) spéciaux, et en tant que tel, il est dangereux de passer aveuglément un argument dans la findfonction ci-dessus sans le pré-traiter pour échapper à ces caractères. Ceci est couvert dans le Developer Network Mozilla de JavaScript Guide sur les expressions régulières , où ils présentent la fonction d'utilité suivante (qui a changé au moins deux fois depuis cette réponse a été écrit à l' origine, alors assurez - vous de consulter le site MDN pour les mises à jour possibles):

function escapeRegExp(string) {
  return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}

Ainsi, afin de rendre la replaceAll()fonction ci-dessus plus sûre, elle pourrait être modifiée comme suit si vous incluez également escapeRegExp:

function replaceAll(str, find, replace) {
  return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}

Par souci d'exhaustivité, j'ai réfléchi à la méthode à utiliser pour ce faire. Il existe essentiellement deux façons de procéder, comme le suggèrent les autres réponses de cette page.

Remarque: En général, l'extension des prototypes intégrés en JavaScript n'est généralement pas recommandée. Je fournis des extensions sur le prototype String simplement à des fins d'illustration, montrant différentes implémentations d'une méthode standard hypothétique sur le Stringprototype intégré.

Implémentation basée sur l'expression régulière

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.replace(new RegExp(search, 'g'), replacement);
};

Implémentation de Split and Join (fonctionnelle)

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.split(search).join(replacement);
};

Ne sachant pas trop comment les expressions régulières fonctionnent en arrière-plan en termes d'efficacité, j'ai eu tendance à pencher vers la séparation et à rejoindre la mise en œuvre dans le passé sans penser aux performances. Quand je me suis demandé ce qui était le plus efficace et par quelle marge, je l'ai utilisé comme excuse pour le découvrir.

Sur ma machine Chrome Windows 8, l'implémentation basée sur l'expression régulière est la plus rapide , l' implémentation de scission et de jointure étant 53% plus lente . Cela signifie que les expressions régulières sont deux fois plus rapides pour l'entrée lorem ipsum que j'ai utilisée.

Découvrez ce benchmark exécutant ces deux implémentations l'une contre l'autre.

Comme indiqué dans le commentaire ci-dessous par @ThomasLeduc et d'autres, il pourrait y avoir un problème avec l'implémentation basée sur une expression régulière si elle searchcontient certains caractères qui sont réservés en tant que caractères spéciaux dans les expressions régulières . L'implémentation suppose que l'appelant échappera au préalable à la chaîne ou ne transmettra que les chaînes qui ne contiennent pas les caractères du tableau dans les expressions régulières (MDN).

MDN fournit également une implémentation pour échapper à nos chaînes. Ce serait bien si cela était également standardisé car RegExp.escape(str), hélas, cela n'existe pas:

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
}

Nous pourrions appeler escapeRegExpdans notre String.prototype.replaceAllimplémentation, cependant, je ne sais pas dans quelle mesure cela affectera les performances (potentiellement même pour les chaînes pour lesquelles l'échappement n'est pas nécessaire, comme toutes les chaînes alphanumériques).

L'utilisation d'une expression régulière avec le gjeu d'indicateurs remplacera tout:

someString = 'the cat looks like a cat';
anotherString = someString.replace(/cat/g, 'dog');
// anotherString now contains "the dog looks like a dog"

Voir ici aussi

Voici une fonction de prototype de chaîne basée sur la réponse acceptée:

String.prototype.replaceAll = function (find, replace) {
    var str = this;
    return str.replace(new RegExp(find, 'g'), replace);
};

ÉDITER

Si votre findcontient des caractères spéciaux, vous devez les échapper:

String.prototype.replaceAll = function (find, replace) {
    var str = this;
    return str.replace(new RegExp(find.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g'), replace);
};

Violon: http://jsfiddle.net/cdbzL/

Mise à jour:

Il est un peu tard pour une mise à jour, mais comme je suis juste tombé sur cette question et que j'ai remarqué que ma réponse précédente n'est pas celle dont je suis satisfait. Étant donné que la question impliquait de remplacer un seul mot, il est incroyable que personne n'ait pensé à utiliser les limites des mots ( \b)

'a cat is not a caterpillar'.replace(/\bcat\b/gi,'dog');
//"a dog is not a caterpillar"

Il s'agit d'une expression régulière simple qui évite de remplacer des parties de mots dans la plupart des cas. Cependant, un tiret -est toujours considéré comme une limite de mot. Les conditions peuvent donc être utilisées dans ce cas pour éviter de remplacer des chaînes comme cool-cat:

'a cat is not a cool-cat'.replace(/\bcat\b/gi,'dog');//wrong
//"a dog is not a cool-dog" -- nips
'a cat is not a cool-cat'.replace(/(?:\b([^-]))cat(?:\b([^-]))/gi,'$1dog$2');
//"a dog is not a cool-cat"

en gros, cette question est la même que la question ici: Javascript remplace "'" par "' '"

@Mike, vérifiez la réponse que j'ai donnée là-bas ... regexp n'est pas le seul moyen de remplacer plusieurs occurrences d'une souscription, loin de là. Pensez flexible, pensez divisé!

var newText = "the cat looks like a cat".split('cat').join('dog');

Alternativement, pour éviter de remplacer des parties de mots - ce que la réponse approuvée fera aussi! Vous pouvez contourner ce problème en utilisant des expressions régulières qui sont, je l'admets, un peu plus complexes et, en conséquence, un peu plus lentes aussi:

var regText = "the cat looks like a cat".replace(/(?:(^|[^a-z]))(([^a-z]*)(?=cat)cat)(?![a-z])/gi,"$1dog");

La sortie est la même que la réponse acceptée, cependant, en utilisant l'expression / cat / g sur cette chaîne:

var oops = 'the cat looks like a cat, not a caterpillar or coolcat'.replace(/cat/g,'dog');
//returns "the dog looks like a dog, not a dogerpillar or cooldog" ?? 

Oups en effet, ce n'est probablement pas ce que vous voulez. Qu'est-ce donc? À mon humble avis, une expression régulière qui ne remplace que «chat» conditionnellement. (c'est-à-dire ne faisant pas partie d'un mot), comme ceci:

var caterpillar = 'the cat looks like a cat, not a caterpillar or coolcat'.replace(/(?:(^|[^a-z]))(([^a-z]*)(?=cat)cat)(?![a-z])/gi,"$1dog");
//return "the dog looks like a dog, not a caterpillar or coolcat"

Je suppose que cela répond à vos besoins. Ce n'est pas complet, bien sûr, mais cela devrait suffire pour vous aider à démarrer. Je recommanderais de lire un peu plus sur ces pages. Cela s'avérera utile pour perfectionner cette expression pour répondre à vos besoins spécifiques.

http://www.javascriptkit.com/jsref/regexp.shtml

http://www.regular-expressions.info

Ajout final:

Étant donné que cette question obtient toujours beaucoup de vues, j'ai pensé que je pourrais ajouter un exemple d' .replaceutilisation avec une fonction de rappel. Dans ce cas, il simplifie considérablement l'expression et offre encore plus de flexibilité, comme le remplacement par une capitalisation correcte ou le remplacement des deux catet catsen une seule fois:

'Two cats are not 1 Cat! They\'re just cool-cats, you caterpillar'
   .replace(/(^|.\b)(cat)(s?\b.|$)/gi,function(all,char1,cat,char2)
    {
       //check 1st, capitalize if required
       var replacement = (cat.charAt(0) === 'C' ? 'D' : 'd') + 'og';
       if (char1 === ' ' && char2 === 's')
       {//replace plurals, too
           cat = replacement + 's';
       }
       else
       {//do not replace if dashes are matched
           cat = char1 === '-' || char2 === '-' ? cat : replacement;
       }
       return char1 + cat + char2;//return replacement string
    });
//returns:
//Two dogs are not 1 Dog! They're just cool-cats, you caterpillar

Correspondance avec une expression régulière globale:

anotherString = someString.replace(/cat/g, 'dog');

Pour remplacer une utilisation unique:

var res = str.replace('abc', "");

Pour remplacer plusieurs fois, utilisez:

var res = str.replace(/abc/g, "");

Ce sont les méthodes les plus courantes et les plus lisibles.

var str = "Test abc test test abc test test test abc test test abc"

Méthode 1:

str = str.replace(/abc/g, "replaced text");

Méthode 2:

str = str.split("abc").join("replaced text");

Méthode 3:

str = str.replace(new RegExp("abc", "g"), "replaced text");

Méthode 4:

while(str.includes("abc")){
    str = str.replace("abc", "replaced text");
}

Production:

console.log(str);
// Test replaced text test test replaced text test test test replaced text test test replaced text

str = str.replace(/abc/g, '');

Ou essayez la fonction replaceAll à partir d'ici:

Quelles sont les méthodes JavaScript utiles qui étendent les objets intégrés?

str = str.replaceAll('abc', ''); OR

var search = 'abc';
str = str.replaceAll(search, '');

EDIT: Clarification sur le remplacementToute disponibilité

La méthode 'replaceAll' est ajoutée au prototype de String. Cela signifie qu'il sera disponible pour tous les objets chaîne / littéraux.

Par exemple

var output = "test this".replaceAll('this', 'that');  //output is 'test that'.
output = output.replaceAll('that', 'this'); //output is 'test this'

Utiliser RegExpen JavaScript pourrait faire le travail pour vous, faites simplement quelque chose comme le code ci-dessous, n'oubliez pas ce /gqui se démarque pour global :

var str ="Test abc test test abc test test test abc test test abc";
str = str.replace(/abc/g, '');

Si vous pensez à réutiliser, créez une fonction pour le faire pour vous, mais ce n'est pas recommandé car ce n'est qu'une fonction de ligne, mais encore une fois si vous l'utilisez fortement, vous pouvez écrire quelque chose comme ceci:

String.prototype.replaceAll = String.prototype.replaceAll || function(string, replaced) {
  return this.replace(new RegExp(string, 'g'), replaced);
};

et utilisez-le simplement dans votre code encore et encore comme ci-dessous:

var str ="Test abc test test abc test test test abc test test abc";
str = str.replaceAll('abc', '');

Mais comme je l'ai mentionné plus tôt, cela ne fera pas une énorme différence en termes de lignes à écrire ou de performances, seule la mise en cache de la fonction peut affecter des performances plus rapides sur les longues chaînes et également une bonne pratique du code DRY si vous souhaitez réutiliser.

Supposons que vous souhaitiez remplacer tous les 'abc' par 'x':

let some_str = 'abc def def lom abc abc def'.split('abc').join('x')
console.log(some_str) //x def def lom x x def

J'essayais de penser à quelque chose de plus simple que de modifier le prototype de chaîne.

Utilisez une expression régulière:

str.replace(/abc/g, '');

Remplacement des guillemets simples:

function JavaScriptEncode(text){
    text = text.replace(/'/g,''')
    // More encode here if required

    return text;
}

// boucle jusqu'à ce que le nombre d'occurrences atteigne 0. OU simplement copier / coller

    function replaceAll(find, replace, str) 
    {
      while( str.indexOf(find) > -1)
      {
        str = str.replace(find, replace);
      }
      return str;
    }

str = str.replace(new RegExp("abc", 'g'), "");

a mieux fonctionné pour moi que les réponses ci-dessus. new RegExp("abc", 'g')crée donc un RegExp qui correspond à toutes les occurrences ( 'g'flag) du texte ( "abc"). La deuxième partie est ce qui est remplacé, dans votre cas, une chaîne vide ( ""). strest la chaîne, et nous devons la remplacer, car replace(...)renvoie simplement le résultat, mais pas les substitutions. Dans certains cas, vous voudrez peut-être l'utiliser.

Il s'agit de la version la plus rapide qui n'utilise pas d'expressions régulières .

Jsperf révisé

replaceAll = function(string, omit, place, prevstring) {
  if (prevstring && string === prevstring)
    return string;
  prevstring = string.replace(omit, place);
  return replaceAll(prevstring, omit, place, string)
}

Il est presque deux fois plus rapide que la méthode de fractionnement et de jointure.

Comme indiqué dans un commentaire ici, cela ne fonctionnera pas si votre omitvariable contient place, comme dans:, replaceAll("string", "s", "ss")car elle pourra toujours remplacer une autre occurrence du mot.

Il y a un autre jsperf avec des variantes sur mon remplacement récursif qui vont encore plus vite ( http://jsperf.com/replace-all-vs-split-join/12 )!

• Mise à jour du 27 juillet 2017: il semble que RegExp ait désormais les performances les plus rapides du Chrome 59 récemment sorti.

Performance

Aujourd'hui 27.12.2019 j'effectue des tests sur macOS v10.13.6 (High Sierra) pour les solutions choisies.

Conclusions

• Le str.replace(/abc/g, '');( C ) est une bonne solution rapide multi-navigateur pour toutes les chaînes.
• Les solutions basées sur split-join( A, B ) ou replace( C, D ) sont rapides
• Les solutions basées sur while( E, F, G, H ) sont lentes - généralement ~ 4 fois plus lentes pour les petites cordes et environ ~ 3000 fois (!) Plus lentes pour les longues cordes
• Les solutions de récurrence ( RA, RB ) sont lentes et ne fonctionnent pas pour les longues chaînes

Je crée également ma propre solution. Il semble que ce soit actuellement le plus court qui fasse le travail de question:

str.split`abc`.join``

str = "Test abc test test abc test test test abc test test abc";
str = str.split`abc`.join``

console.log(str);

Détails

Les tests ont été effectués sur Chrome 79.0, Safari 13.0.4 et Firefox 71.0 (64 bits). Les tests RAet l' RButilisation de la récursivité. Résultats

Chaîne courte - 55 caractères

Vous pouvez exécuter des tests sur votre machine ICI . Résultats pour Chrome:

Chaîne longue: 275 000 caractères

Les solutions récursives RA et RB donnent

RangeError: dépassement de la taille maximale de la pile d'appels

Pour 1 million de personnages, ils cassent même Chrome

J'essaie d'effectuer des tests pour 1M de caractères pour d'autres solutions, mais E, F, G, H prennent tellement de temps que le navigateur me demande de casser le script, donc je réduit la chaîne de test à 275K caractères. Vous pouvez exécuter des tests sur votre machine ICI . Résultats pour Chrome

Code utilisé dans les tests

var t="Test abc test test abc test test test abc test test abc"; // .repeat(5000)
var log = (version,result) => console.log(`${version}: ${result}`);


function A(str) {
  return str.split('abc').join('');
}

function B(str) {
  return str.split`abc`.join``; // my proposition
}


function C(str) {
  return str.replace(/abc/g, '');
}

function D(str) {
  return str.replace(new RegExp("abc", "g"), '');
}

function E(str) {
  while (str.indexOf('abc') !== -1) { str = str.replace('abc', ''); }
  return str;
}

function F(str) {
  while (str.indexOf('abc') !== -1) { str = str.replace(/abc/, ''); }
  return str;
}

function G(str) {
  while(str.includes("abc")) { str = str.replace('abc', ''); }
  return str;
}

// src: https://stackoverflow.com/a/56989553/860099
function H(str)
{
    let i = -1
    let find = 'abc';
    let newToken = '';

    if (!str)
    {
        if ((str == null) && (find == null)) return newToken;
        return str;
    }

    while ((
        i = str.indexOf(
            find, i >= 0 ? i + newToken.length : 0
        )) !== -1
    )
    {
        str = str.substring(0, i) +
            newToken +
            str.substring(i + find.length);
    }
    return str;
}

// src: https://stackoverflow.com/a/22870785/860099
function RA(string, prevstring) {
  var omit = 'abc';
  var place = '';
  if (prevstring && string === prevstring)
    return string;
  prevstring = string.replace(omit, place);
  return RA(prevstring, string)
}

// src: https://stackoverflow.com/a/26107132/860099
function RB(str) {
  var find = 'abc';
  var replace = '';
  var i = str.indexOf(find);
  if (i > -1){
    str = str.replace(find, replace);
    i = i + replace.length;
    var st2 = str.substring(i);
    if(st2.indexOf(find) > -1){
      str = str.substring(0,i) + RB(st2, find, replace);
    }
  }
  return str;
}




log('A ', A(t));
log('B ', B(t));
log('C ', C(t));
log('D ', D(t));
log('E ', E(t));
log('F ', F(t));
log('G ', G(t));
log('H ', H(t));
log('RA', RA(t)); // use reccurence
log('RB', RB(t)); // use reccurence

<p style="color:red">This snippet only presents codes used in tests. It not perform test itself!<p>

Si ce que vous voulez trouver est déjà dans une chaîne et que vous n'avez pas d'escape regex à portée de main, vous pouvez utiliser join / split:

    function replaceMulti(haystack, needle, replacement)
    {
        return haystack.split(needle).join(replacement);
    }

    someString = 'the cat looks like a cat';
    console.log(replaceMulti(someString, 'cat', 'dog'));

function replaceAll(str, find, replace) {
  var i = str.indexOf(find);
  if (i > -1){
    str = str.replace(find, replace); 
    i = i + replace.length;
    var st2 = str.substring(i);
    if(st2.indexOf(find) > -1){
      str = str.substring(0,i) + replaceAll(st2, find, replace);
    }       
  }
  return str;
}

J'aime cette méthode (elle a l'air un peu plus propre):

text = text.replace(new RegExp("cat","g"), "dog"); 

Le moyen le plus simple de le faire sans utiliser aucune expression régulière est de fractionner et de rejoindre comme le code ici:

var str = "Test abc test test abc test test test abc test test abc";
str.split('abc').join('')

var str = "ff ff f f a de def";
str = str.replace(/f/g,'');
alert(str);

http://jsfiddle.net/ANHR9/

while (str.indexOf('abc') !== -1)
{
    str = str.replace('abc', '');
}

Si la chaîne contient un modèle similaire abccc, vous pouvez utiliser ceci:

str.replace(/abc(\s|$)/g, "")

Les réponses précédentes sont beaucoup trop compliquées. Utilisez simplement la fonction de remplacement comme ceci:

str.replace(/your_regex_pattern/g, replacement_string);

Exemple:

var str = "Test abc test test abc test test test abc test test abc";

var res = str.replace(/[abc]+/g, "");

console.log(res);

Si vous essayez de vous assurer que la chaîne que vous recherchez n'existera pas même après le remplacement, vous devez utiliser une boucle.

Par exemple:

var str = 'test aabcbc';
str = str.replace(/abc/g, '');

Une fois terminé, vous aurez toujours «test abc»!

La boucle la plus simple pour résoudre ce problème serait:

var str = 'test aabcbc';
while (str != str.replace(/abc/g, '')){
   str.replace(/abc/g, '');
}

Mais cela exécute le remplacement deux fois pour chaque cycle. Peut-être (au risque d'être rejeté) qui peut être combiné pour une forme légèrement plus efficace mais moins lisible:

var str = 'test aabcbc';
while (str != (str = str.replace(/abc/g, ''))){}
// alert(str); alerts 'test '!

Cela peut être particulièrement utile lorsque vous recherchez des chaînes en double.
Par exemple, si nous avons «a ,,, b» et que nous souhaitons supprimer toutes les virgules en double.
[Dans ce cas, on pourrait faire .replace (/, + / g, ','), mais à un moment donné, l'expression régulière devient complexe et suffisamment lente pour boucler à la place.]

Bien que les gens aient mentionné l'utilisation de l'expression rationnelle, il existe une meilleure approche si vous souhaitez remplacer le texte indépendamment de la casse du texte. Comme majuscule ou minuscule. Utilisez la syntaxe ci-dessous

//Consider below example
originalString.replace(/stringToBeReplaced/gi, '');

//Output will be all the occurrences removed irrespective of casing.

Vous pouvez vous référer à l'exemple détaillé ici .

Vous pouvez simplement utiliser la méthode ci-dessous

/**
 * Replace all the occerencess of $find by $replace in $originalString
 * @param  {originalString} input - Raw string.
 * @param  {find} input - Target key word or regex that need to be replaced.
 * @param  {replace} input - Replacement key word
 * @return {String}       Output string
 */
function replaceAll(originalString, find, replace) {
  return originalString.replace(new RegExp(find, 'g'), replace);
};

Ajoutez simplement /g

document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');

à

// Replace 'hello' string with /hello/g regular expression.
document.body.innerHTML = document.body.innerHTML.replace(/hello/g, 'hi');

/g signifie global