Alle exemplaren van een tekenreeks in JavaScript vervangen

Ik heb deze string in mijn JavaScript-code:

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

Doen:

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

Het lijkt alleen het eerste voorkomen van abcin de bovenstaande string te verwijderen.

Hoe kan ik alleexemplaren ervan vervangen?

Antwoord 1, autoriteit 100%

Update:in de nieuwste versies van de meest populaire browsers kunt u replaceAll
zoals hier getoond:

let result = "1 abc 2 abc 3".replaceAll("abc", "xyz");
// `result` is "1 xyz 2 xyz 3"

Maar controleer eerst Kan ikof een andere compatibiliteitstabel gebruiken om er zeker van te zijn welke browsers u target heb er eerst ondersteuning voor toegevoegd.

Voor Node en compatibiliteit met oudere/niet-huidige browsers:

Opmerking: gebruik de volgende oplossing niet in prestatiekritieke code.

Als alternatief voor reguliere expressies voor een eenvoudige letterlijke tekenreeks, zou je kunnen gebruiken

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

Het algemene patroon is

str.split(search).join(replacement)

Vroeger was dit in sommige gevallen sneller dan het gebruik van replaceAllen een reguliere expressie, maar dat lijkt niet meer het geval te zijn in moderne browsers.

Benchmark: https://jsben.ch/TZYzj

Conclusie: als je een prestatiekritisch gebruiksscenario hebt (bijvoorbeeld het verwerken van honderden strings), gebruik dan de Regexp-methode. Maar voor de meeste typische gebruikssituaties is dit de moeite waard om je geen zorgen te maken over speciale tekens.

Antwoord 2, autoriteit 94%

Vanaf augustus 2020:Moderne browsers hebben ondersteuningvoor de String.replaceAll()methodegedefinieerd door de ECMAScript 2021-taalspecificatie.

Voor oudere/verouderde browsers:

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

In reactie op opmerking:

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

Als reactie op de opmerking van Click Upvotezou je het nog eenvoudiger kunnen maken:

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

Opmerking:Reguliere expressies bevatten speciale (meta-)tekens, en als zodanig is het gevaarlijk om blindelings een argument door te geven in de functie findhierboven zonder het vooraf te verwerken ontsnappen aan die karakters. Dit wordt behandeld in het Mozilla Developer Network‘s JavaScript-handleiding voor reguliere expressies, waar ze de volgende hulpprogrammafunctie presenteren (die ten minste is gewijzigd twee keer sinds dit antwoord oorspronkelijk is geschreven, dus zorg ervoor dat je de MDN-site controleert op mogelijke updates):

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

Dus om de functie replaceAll()hierboven veiliger te maken, kan deze als volgt worden gewijzigd als u ook escapeRegExpopneemt:

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

Antwoord 3, autoriteit 91%

Voor de volledigheid ben ik gaan nadenken over welke methode ik hiervoor moet gebruiken. Er zijn in principe twee manieren om dit te doen, zoals gesuggereerd door de andere antwoorden op deze pagina.

Opmerking:Over het algemeen wordt het uitbreiden van de ingebouwde prototypes in JavaScript over het algemeen niet aanbevolen. Ik bied als uitbreidingen op het String-prototype, alleen ter illustratie, en laat verschillende implementaties zien van een hypothetische standaardmethode op het ingebouwde String-prototype.

Op reguliere expressie gebaseerde implementatie

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

Opsplitsen en deelnemen aan (functionele) implementatie

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

Omdat ik niet al te veel wist over hoe reguliere expressies achter de schermen werken in termen van efficiëntie, had ik de neiging om in het verleden naar de splitsing te neigen en me bij de implementatie aan te sluiten zonder na te denken over de prestaties. Toen ik me afvroeg wat efficiënter was en met welke marge, gebruikte ik het als een excuus om erachter te komen.

Op mijn Chrome Windows 8-computer is de implementatie op basis van reguliere expressies het snelst, waarbij de implementatie voor splitsen en samenvoegen 53% langzamer is. Dit betekent dat de reguliere expressies twee keer zo snel zijn voor de lorem ipsum-invoer die ik heb gebruikt.

Bekijk deze benchmarkwaarin deze twee implementaties tegen elkaar worden uitgevoerd.

Zoals opgemerkt in de opmerking hieronder door @ThomasLeduc en anderen, kan er een probleem zijn met de op reguliere expressies gebaseerde implementatie als searchbepaalde tekens bevat die zijn gereserveerd als speciale tekens in reguliere expressies. De implementatie gaat ervan uit dat de aanroeper vooraf aan de tekenreeks ontsnapt of alleen tekenreeksen doorgeeft zonder de tekens in de tabel in Regular Expressions(MDN).

MDN biedt ook een implementatie om aan onze strings te ontsnappen. Het zou leuk zijn als dit ook gestandaardiseerd was als RegExp.escape(str), maar helaas, het bestaat niet:

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

We zouden escapeRegExpkunnen aanroepen binnen onze String.prototype.replaceAllimplementatie, maar ik weet niet zeker in hoeverre dit de prestaties zal beïnvloeden (mogelijk zelfs voor strings voor waarbij de escape niet nodig is, zoals alle alfanumerieke strings).

Antwoord 4, autoriteit 34%

Het gebruik van een reguliere expressie met de gvlagset zal alles vervangen:

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

Zie hier ook

Antwoord 5, autoriteit 6%

Hier is een string-prototypefunctie gebaseerd op het geaccepteerde antwoord:

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

BEWERKEN

Als uw findspeciale tekens zal bevatten, moet u deze laten ontsnappen:

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

Fiddle: http://jsfiddle.net/cdbzL/

Antwoord 6, autoriteit 4%

Bijwerken:

Het is wat laat voor een update, maar aangezien ik deze vraag net tegenkwam, en merkte dat mijn vorige antwoord niet een is waar ik blij mee ben. Aangezien de vraag betrekking had op het vervangen van een enkel woord, is het ongelooflijk dat niemand heeft gedacht aan het gebruik van woordgrenzen (\b)

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

Dit is een eenvoudige regex die in de meeste gevallen het vervangen van delen van woorden vermijdt. Een streepje -wordt echter nog steeds als een woordgrens beschouwd. Dus conditionals kunnen in dit geval worden gebruikt om te voorkomen dat strings zoals cool-catworden vervangen:

'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"

in principe is deze vraag hetzelfde als de vraag hier:
Javascript vervangt ” ‘ ” door ” ” “

@Mike, kijk eens naar het antwoord dat ik daar gaf… regexp is niet de enige manier om meerdere exemplaren van een subsrting te vervangen, verre van dat. Denk flexibel, denk gesplitst!

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

Als alternatief, om te voorkomen dat woorddelen worden vervangen – wat het goedgekeurde antwoord ook doet! Je kunt dit probleem omzeilen door reguliere expressies te gebruiken die, ik geef het toe, iets complexer zijn en als gevolg daarvan ook een beetje langzamer:

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

De uitvoer is hetzelfde als het geaccepteerde antwoord, maar met de /cat/g-expressie op deze tekenreeks:

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" ?? 

Oeps, dit is waarschijnlijk niet wat je wilt. Wat is dan? IMHO, een regex die ‘kat’ slechts voorwaardelijk vervangt. (dwz geen deel van een woord), zoals zo:

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"

Volgens mij voldoet dit aan uw behoeften. Het is natuurlijk niet volledig bewijs, maar het zou genoeg moeten zijn om je op weg te helpen. Ik zou aanraden om wat meer op deze pagina’s te lezen. Dit zal nuttig zijn bij het perfectioneren van deze uitdrukking om aan uw specifieke behoeften te voldoen.

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

http://www.regular-expressions.info

Laatste toevoeging:

Aangezien deze vraag nog steeds veel views krijgt, dacht ik dat ik een voorbeeld van .replacezou kunnen toevoegen met een callback-functie. In dit geval vereenvoudigt het de uitdrukking ennog meer flexibiliteit, zoals vervangen door correct hoofdlettergebruik of het in één keer vervangen van zowel catals cats:

'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

Antwoord 7, autoriteit 3%

Overeenkomen met een algemene reguliere expressie:

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

Antwoord 8, autoriteit 3%

Voor eenmalig gebruik:

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

Voor meerdere keren vervangen gebruik:

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

Antwoord 9, autoriteit 3%

Dit zijn de meest voorkomende en leesbare methoden.

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

Methode 1:

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

Methode 2:

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

Methode 3:

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

Methode 4:

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

Uitvoer:

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

Antwoord 10, autoriteit 2%

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

Of probeer de replaceAll-methode, zoals aanbevolen in dit antwoord:

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

of:

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

BEWERK:Verduidelijking over de beschikbaarheid van replaceAll

De replaceAllmethode is toegevoegd aan het prototype van String. Dit betekent dat het beschikbaar zal zijn voor alle tekenreeksobjecten/literals.

Voorbeeld:

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

Antwoord 11, autoriteit 2%

Het gebruik van RegExpin JavaScriptkan het werk voor u doen, doe gewoon zoiets als onderstaande code, vergeet de /gniet waarna opvallende voor wereldwijd:

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

Als je aan hergebruik denkt, maak dan een functie om dat voor je te doen, maar het wordt niet aanbevolen omdat het maar één regelfunctie is, maar nogmaals, als je dit intensief gebruikt, kun je zoiets als dit schrijven:

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

en gebruik het gewoon keer op keer in je code, zoals hieronder:

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

Maar zoals ik eerder al zei, het zal geen enorm verschil maken in termen van te schrijven regels of prestaties, alleen het cachen van de functie kan een snellere prestatie op lange strings veroorzaken en ook een goede gewoonte van DRY-code als je wilt om opnieuw te gebruiken.

Antwoord 12, autoriteit 2%

Stel dat je alle ‘abc’ wilt vervangen door ‘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

Ik probeerde iets eenvoudiger te bedenken dan het prototype van de string te wijzigen.

Antwoord 13, autoriteit 2%

Gebruik een reguliere expressie:

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

Antwoord 14

Enkele aanhalingstekens vervangen:

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

Antwoord 15

Prestaties

Vandaag 27.12.2019 voer ik tests uit op macOS v10.13.6(High Sierra) voor de gekozen oplossingen.

Conclusies

• De str.replace(/abc/g, '');(C) is een goede cross-browser snelle oplossing voor alle strings.
• Oplossingen op basis van split-join(A,B) of replace(C,D) zijn snel
• Oplossingen gebaseerd op while(E,F,G,H) zijn traag – meestal ~4 keer langzamer voor kleine strings en ongeveer ~3000 keer (!) langzamer voor lange snaren
• De herhalingsoplossingen (RA,RB) zijn traag en werken niet voor lange strings

Ik maak ook mijn eigen oplossing. Het lijkt erop dat het momenteel de kortste is die de vraag doet:

str.split`abc`.join``

Antwoord 16

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

werkte beter voor mij dan de bovenstaande antwoorden. dus new RegExp("abc", 'g')creëert een RegExp die overeenkomt met alle voorkomende ('g'vlag) van de tekst ("abc"). Het tweede deel wordt vervangen door, in jouw geval een lege string ("").
stris de tekenreeks en we moeten deze overschrijven, omdat replace(...)alleen resultaat retourneert, maar niet overschrijft. In sommige gevallen wil je dat misschien gebruiken.

Antwoord 17

Dit is de snelsteversie die geen reguliere expressies gebruikt.

Herziene jsperf

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

Het is bijna twee keerzo snel als de methode voor splitsen en samenvoegen.

Zoals aangegeven in een opmerking hier, werkt dit niet als uw variabele omitplacebevat, zoals in: replaceAll("string", "s", "ss"), omdat het altijd een andere instantie van het woord kan vervangen.

Er is nog een jsperf met varianten op mijn recursieve vervanging die nog sneller gaan (http ://jsperf.com/replace-all-vs-split-join/12)!

• Update 27 juli 2017: het lijkt erop dat RegExp nu de snelste prestaties levert in de onlangs uitgebrachte Chrome 59.

Antwoord 18

Loop het totdat het aantal keren dat het voorkomt op 0 komt, als volgt:

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

Antwoord 19

Als wat je wilt vinden al in een string staat en je geen regex-escaper bij de hand hebt, kun je join/split gebruiken:

   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;
}

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

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

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

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

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

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

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

String.prototype.replaceAll(searchValue, replaceValue)

'Test abc test test abc test.'.replaceAll('abc', 'foo'); // -> 'Test foo test test foo test.'

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

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

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

//Consider below example
originalString.replace(/stringToBeReplaced/gi, '');
//Output will be all the occurrences removed irrespective of casing.

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');