¿Cómo reemplazar todas las apariciones de una cadena en Javascript?

Actualizar: En las últimas versiones de los navegadores más populares, puede utilizar replaceAll como se muestra aquí:

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

Pero revisa Puedo usar u otra tabla de compatibilidad primero para asegurarse de que los navegadores a los que se dirige tengan compatibilidad agregada primero.

Para Node y compatibilidad con navegadores antiguos / no actuales:

Nota: No utilice la siguiente solución en código de rendimiento crítico.

Como alternativa a las expresiones regulares para una cadena literal simple, puede usar

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

El patrón general es

str.split(search).join(replacement)

Esto solía ser más rápido en algunos casos que usar replaceAll y una expresión regular, pero ese ya no parece ser el caso en los navegadores modernos.

Benchmark: https://jsperf.com/replace-all-vs-split-join

Conclusión: si tiene un caso de uso crítico para el rendimiento (por ejemplo, procesar cientos de cadenas), utilice el método Regexp. Pero para la mayoría de los casos de uso típicos, vale la pena no tener que preocuparse por los caracteres especiales.

A partir de agosto 2020, los navegadores totalmente nuevos son compatibles con String.replaceAll() Método definido por la especificación de lenguaje ECMAScript 2021. Para la compatibilidad con navegadores antiguos / heredados, se sigue aplicando lo siguiente.

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

En respuesta al comentario:

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

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

En respuesta a Haga clic en Upvotecomentario, podrías simplificarlo aún más:

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

Nota: Las expresiones regulares contienen caracteres especiales (meta) y, como tal, es peligroso pasar ciegamente un argumento en el find función anterior sin preprocesarlo para escapar de esos caracteres. Esto está cubierto en el Mozilla Developer Network's Guía de JavaScript sobre expresiones regulares, donde presentan la siguiente función de utilidad (que ha cambiado al menos dos veces desde que se escribió originalmente esta respuesta, así que asegúrese de consultar el sitio de MDN para ver si hay actualizaciones potenciales):

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

Entonces, para hacer el replaceAll() función anterior más segura, podría modificarse a lo siguiente si también incluye escapeRegExp:

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

En aras de la integridad, me puse a pensar qué método debería utilizar para hacer esto. Básicamente, hay dos formas de hacer esto, como lo sugieren las otras respuestas en esta página.

Nota: En general, no se recomienda extender los prototipos integrados en JavaScript. Proporciono extensiones del prototipo String simplemente con fines ilustrativos, mostrando diferentes implementaciones de un método estándar hipotético en el String prototipo incorporado.

Implementación basada en expresiones regulares

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

Implementación de división y unión (funcional)

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

Sin saber demasiado sobre cómo funcionan las expresiones regulares detrás de escena en términos de eficiencia, tendía a inclinarme hacia la implementación de split y unirme en el pasado sin pensar en el rendimiento. Cuando me pregunté cuál era más eficiente y con qué margen, lo usé como excusa para averiguarlo.

En mi máquina Chrome con Windows 8, la implementación basada en expresiones regulares es la más rápida, Con el La implementación de split and join es un 53% más lenta. Lo que significa que las expresiones regulares son dos veces más rápidas para la entrada de lorem ipsum que utilicé.

Mire este pequeño punto de referencia ejecutar estas dos implementaciones una contra la otra.

Como se indica en el comentario a continuación de @ThomasLeduc y otros, podría haber un problema con la implementación basada en expresiones regulares si search contiene ciertos caracteres que están reservados como caracteres especiales en expresiones regulares. La implementación asume que la persona que llama escapará de la cadena de antemano o solo pasará cadenas que no tengan los caracteres en la tabla en Expresiones regulares (MDN).

MDN también proporciona una implementación para escapar de nuestras cadenas. Sería bueno si esto también estuviera estandarizado como RegExp.escape(str), pero por desgracia, no existe:

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

Podríamos llamar escapeRegExp dentro de nuestro String.prototype.replaceAll implementación, sin embargo, no estoy seguro de cuánto afectará esto al rendimiento (potencialmente incluso para cadenas para las que no se necesita el escape, como todas las cadenas alfanuméricas).

Usando una expresión regular con el g conjunto de banderas reemplazará todo:

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

Ver aquí también

Aquí hay una función de prototipo de cadena basada en la respuesta aceptada:

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

EDITAR

Si find contendrá caracteres especiales, entonces debe escapar de ellos:

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

Violín: http://jsfiddle.net/cdbzL/

Actualizar:

Es algo tarde para una actualización, pero como me encontré con esta pregunta y noté que mi respuesta anterior no es una con la que estoy contento. Dado que la pregunta implicaba reemplazar una sola palabra, es increíble que nadie haya pensado en usar límites de palabras (\b)

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

Esta es una expresión regular simple que evita reemplazar partes de palabras en la mayoría de los casos. Sin embargo, un guión - todavía se considera un límite de palabras. Entonces, los condicionales se pueden usar en este caso para evitar reemplazar cadenas como 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"

Básicamente, esta pregunta es la misma que la pregunta aquí: Javascript reemplaza "'" por "' '"

@ Mike, verifique la respuesta que di allí ... regexp no es la única forma de reemplazar múltiples apariciones de una subasta, ni mucho menos. ¡Piense flexible, piense dividido!

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

Alternativamente, para evitar reemplazar partes de palabras, ¡lo que también funcionará con la respuesta aprobada! Puede solucionar este problema utilizando expresiones regulares que son, lo admito, algo más complejas y, como resultado, un poco más lentas también:

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

Sin embargo, la salida es la misma que la respuesta aceptada, usando la expresión / cat / g en esta cadena:

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

Vaya de hecho, esto probablemente no sea lo que quieres ¿Que es entonces? En mi humilde opinión, una expresión regular que solo reemplaza a 'gato' condicionalmente. (es decir, no es parte de una palabra), así:

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"

Supongo que esto satisface sus necesidades. Por supuesto, no es una prueba completa, pero debería ser suficiente para comenzar. Recomiendo leer un poco más en estas páginas. Esto resultará útil para perfeccionar esta expresión para satisfacer sus necesidades específicas.

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

http://www.regular-expressions.info

Adición final:

Dado que esta pregunta todavía recibe muchas visitas, pensé que podría agregar un ejemplo de .replace utilizado con una función de devolución de llamada. En este caso, simplifica drásticamente la expresión y proporciona aún más flexibilidad, como reemplazar con las mayúsculas correctas o reemplazar ambas cat y cats en una ida:

'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

Coincidir con una expresión regular global:

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

Para reemplazar un solo uso:

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

Para reemplazar varias veces el uso:

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

Estos son los métodos más comunes y legibles.

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

Método 1:

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

Método 2:

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

Método 3:

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

Método 4:

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

Salida:

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

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

O pruebe la función replaceAll desde aquí:

¿Cuáles son los métodos JavaScript útiles que amplían los objetos integrados?

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

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

EDIT: Aclaración sobre la disponibilidad de replaceAll

El método 'replaceAll' se agrega al prototipo de String. Esto significa que estará disponible para todos los objetos de cadena / literales.

P.ej

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

Usar RegExp in JavaScript podría hacer el trabajo por usted, simplemente haga algo como el siguiente código, no olvide el /g después de lo cual destacan por global:

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

Si piensa en reutilizar, cree una función para que lo haga por usted, pero no se recomienda ya que es solo una función de línea, pero nuevamente, si usa mucho esto, puede escribir algo como esto:

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

y simplemente úselo en su código una y otra vez como se muestra a continuación:

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

Pero como mencioné anteriormente, no hará una gran diferencia en términos de líneas que se escribirán o rendimiento, solo almacenar en caché la función puede afectar un rendimiento más rápido en cadenas largas y también una buena práctica de código DRY si desea reutilizar.

Digamos que desea reemplazar todos los 'abc' con '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

Estaba tratando de pensar en algo más simple que modificar el prototipo de cuerda.

Usa una expresión regular:

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

Reemplazo de comillas simples:

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

    return text;
}

Rendimiento

Hoy 27.12.2019 realizo pruebas en mac OS v10.13.6 (High Sierra) para las soluciones elegidas.

Conclusiones

• EL str.replace(/abc/g, ''); (C) es una buena solución rápida entre navegadores para todas las cadenas.
• Soluciones basadas en split-join (A, B) o replace (DISCOS COMPACTOS) son rápidos
• Soluciones basadas en while (E F G H) son lentos, por lo general ~ 4 veces más lentos para cadenas pequeñas y aproximadamente ~ 3000 veces (!) más lentos para cadenas largas
• Las soluciones de recurrencia (RA, RB) son lentos y no funcionan para cadenas largas

También creo mi propia solución. Parece que actualmente es el más corto el que hace el trabajo de preguntas:

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

Detalles

Las pruebas se realizaron en Chrome 79.0, Safari 13.0.4 y Firefox 71.0 (64 bits). Los exámenes RA y RB utilizar la recursividad. Resultados

Cadena corta: 55 caracteres

Puede ejecutar pruebas en su máquina AQUÍ. Resultados para Chrome:

Cadena larga: 275 000 caracteres

Las soluciones recursivas RA y RB da

RangeError: se excedió el tamaño máximo de la pila de llamadas

Para 1 millón de caracteres, incluso rompen Chrome

Intento realizar pruebas para 1 M de caracteres para otras soluciones, pero E F G H toma tanto tiempo que el navegador me pide que rompa el script, así que reduzco la cadena de prueba a 275K caracteres. Puede ejecutar pruebas en su máquina AQUÍ. Resultados para Chrome

Código utilizado en las pruebas

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>

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

funcionó mejor para mí que las respuestas anteriores. entonces new RegExp("abc", 'g') crea una expresión regular que coincide con todas las ocurrencias ('g' bandera) del texto ("abc"). La segunda parte es lo que se reemplaza, en su caso, cadena vacía (""). str es la cadena, y tenemos que anularla, ya que replace(...) solo devuelve el resultado, pero no anula. En algunos casos, es posible que desee usar eso.

// repítelo hasta que el número de ocurrencias llegue a 0. O simplemente copie / pegue

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

Este es el más rápido versión que no usa expresiones regulares.

Jsperf revisado

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

Es casi dos veces tan rápido como el método split and join.

Como se señaló en un comentario aquí, esto no funcionará si su omit variable contiene place, como en: replaceAll("string", "s", "ss"), porque siempre podrá reemplazar otra aparición de la palabra.

Hay otro jsperf con variantes en mi reemplazo recursivo que van aún más rápido (http://jsperf.com/replace-all-vs-split-join/12)!

• Actualización del 27 de julio de 2017: parece que RegExp ahora tiene el rendimiento más rápido en Chrome 59 recientemente lanzado.

Si lo que desea encontrar ya está en una cadena, y no tiene a mano un escalador de expresiones regulares, puede usar 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;
}

Me gusta este método (parece un poco más limpio):

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

La forma más sencilla de hacerlo sin usar ninguna expresión regular es dividir y unir como el código aquí:

var str = "Test abc test test abc test test test abc test test abc";
console.log(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 cadena contiene un patrón similar como abccc, puedes usar esto:

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

Las respuestas anteriores son demasiado complicadas. Simplemente use la función de reemplazo de esta manera:

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

Ejemplo:

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

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

console.log(res);

A partir de agosto de 2020 hay una Propuesta de la etapa 4 a ECMAScript que agrega el replaceAll método para String.

Ahora es compatible con Chrome 85+, Borde 85+, Firefox 77+, Safari 13.1+.

El uso es el mismo que el replace método:

String.prototype.replaceAll(searchValue, replaceValue)

Aquí hay un ejemplo de uso:

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

Es compatible con la mayoría de los navegadores modernos, pero existen polyfills:

• core-js
• es-calzas

Es compatible con V8 motor detrás de una bandera experimental --harmony-string-replaceall. Leer más en el Sitio web de V8.

Si está tratando de asegurarse de que la cadena que está buscando no exista incluso después del reemplazo, debe usar un bucle.

Por ejemplo:

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

¡Cuando esté completo, todavía tendrá 'prueba abc'!

El ciclo más simple para resolver esto sería:

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

Pero eso ejecuta el reemplazo dos veces por cada ciclo. Quizás (en riesgo de ser rechazado) que se pueda combinar para obtener una forma un poco más eficiente pero menos legible:

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

Esto puede resultar especialmente útil cuando se buscan cadenas duplicadas.
Por ejemplo, si tenemos 'a ,,, b' y deseamos eliminar todas las comas duplicadas.
[En ese caso, se podría hacer .replace (/, + / g, ','), pero en algún momento la expresión regular se vuelve compleja y lo suficientemente lenta como para hacer un bucle].

Aunque la gente ha mencionado el uso de expresiones regulares, hay un mejor enfoque si desea reemplazar el texto independientemente del caso del texto. Como mayúsculas o minúsculas. Utilice la siguiente sintaxis

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

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

Puede consultar el ejemplo detallado aquí.

Solo agrega /g

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

a

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

/g significa global