¿Cómo puedo realizar un str_replace en JavaScript, reemplazando el texto en JavaScript?


137

Quiero usar str_replaceo una alternativa similar para reemplazar texto en JavaScript.

var text = "this is some sample text that i want to replace";
var new_text = replace_in_javascript("want", "dont want", text);
document.write("new_text");

debería dar

this is some sample text that i dont want to replace

Si va a regex, cuáles son las implicaciones de rendimiento en comparación con los métodos de reemplazo incorporados.


3
Extraño, nadie notó que PHP str_replacetambién acepta dos matrices de la misma longitud, donde cada cadena en la primera matriz se reemplaza con la cadena en la segunda matriz en el mismo índice. Consulte stackoverflow.com/a/5069776/296430 para conocer la única función correcta que he encontrado hasta ahora que imita este comportamiento exacto en javascript.
Jules Colle

2
@JulesColle esa respuesta falla a menudo: vea por qué / cuándo falla y una mejor solución aquí: stackoverflow.com/a/37949642/445295
Stephen M. Harris

1
Si desea una alta compatibilidad, incluidas peculiaridades, con la versión de php ... eche un vistazo a github.com/kvz/locutus/blob/master/src/php/strings/…
Doug Coburn

Respuestas:


12

El uso de expresiones regulares para el reemplazo de cadenas es significativamente más lento que el uso de un reemplazo de cadenas.
Como se demostró en JSPerf , puede tener diferentes niveles de eficiencia para crear una expresión regular, pero todos ellos son significativamente más lentos que un simple reemplazo de cadena. La expresión regular es más lenta porque :

Las coincidencias de cadena fija no tienen retroceso, pasos de compilación, rangos, clases de caracteres o una serie de otras características que ralentizan el motor de expresión regular. Ciertamente, hay formas de optimizar las coincidencias de expresiones regulares, pero creo que es poco probable que supere la indexación en una cadena en el caso común.

Para una prueba simple ejecutada en la página JS perf, he documentado algunos de los resultados:

<script>
// Setup
  var startString = "xxxxxxxxxabcxxxxxxabcxx";
  var endStringRegEx = undefined;
  var endStringString = undefined;
  var endStringRegExNewStr = undefined;
  var endStringRegExNew = undefined;
  var endStringStoredRegEx = undefined;      
  var re = new RegExp("abc", "g");
</script>

<script>
// Tests
  endStringRegEx = startString.replace(/abc/g, "def") // Regex
  endStringString = startString.replace("abc", "def", "g") // String
  endStringRegExNewStr = startString.replace(new RegExp("abc", "g"), "def"); // New Regex String
  endStringRegExNew = startString.replace(new RegExp(/abc/g), "def"); // New Regexp
  endStringStoredRegEx = startString.replace(re, "def") // saved regex
</script>

Los resultados para Chrome 68 son los siguientes:

String replace:    9,936,093 operations/sec
Saved regex:       5,725,506 operations/sec
Regex:             5,529,504 operations/sec
New Regex String:  3,571,180 operations/sec
New Regex:         3,224,919 operations/sec

En aras de la exhaustividad de esta respuesta (tomando prestado de los comentarios), vale la pena mencionar que .replacesolo reemplaza la primera instancia del personaje coincidente. Solo es posible reemplazar todas las instancias con //g. Se podría argumentar que el rendimiento y la elegancia del código son peores si se reemplazan múltiples instancias name.replace(' ', '_').replace(' ', '_').replace(' ', '_');o peor.while (name.includes(' ')) { name = name.replace(' ', '_') }


Eso es interesante y tiene sentido que el reemplazo de cadenas puro sea más rápido que la expresión regular. Probablemente vale la pena mencionar (como en algunas respuestas) que .replacesolo reemplaza la primera instancia del personaje coincidente. Solo es posible reemplazar todas las instancias con //g. Se podría argumentar que la compensación del rendimiento es peor si se reemplazan varias instancias name.replace(' ', '_').replace(' ', '_').replace(' ', '_');o peorwhile (name.includes(' ')) { name = name.replace(' ', '_') }
Lex

201

Usarías el replacemétodo:

text = text.replace('old', 'new');

El primer argumento es lo que estás buscando, obviamente. También puede aceptar expresiones regulares.

Solo recuerda que no cambia la cadena original. Solo devuelve el nuevo valor.


44
¡Muchas gracias por 'solo regresa y no cambia'! Eso fue lo que me arrancó el pelo durante mucho tiempo hasta que me encontré con tu comentario ...
Aditya MP

70
string.replace ('old', 'new') solo reemplazará la primera instancia de 'old' en la cadena. El uso de una expresión regular con la bandera 'g' como en la respuesta de realmag777 reemplazará todas las instancias de la cadena. text = text.replace (/ old / g, 'new') reemplazará todas las instancias de 'old'
WNRosenberg

1
¿qué tal no distingue entre mayúsculas y minúsculas?
Netorica

77
^ text.replace (/ old / gi, 'new') reemplazará todas las instancias de 'old' por 'new' sin distinción entre mayúsculas y minúsculas (por ejemplo, 'OLD' y 'oLd' también se reemplazarán)
arnoudhgz


84

Más simple:

city_name=city_name.replace(/ /gi,'_');

¡Reemplaza todos los espacios con '_'!


10
Esta es una traducción más precisa de lo que hace "str_replace" (global). La respuesta elegida solo reemplazará a la primera instancia.
RIC

1
No te olvides de escapar de los personajes, especialmente si estás reemplazando un hex escapado: \ x27 por ejemplo sería.replace(/\\x3B/g,';')
dmayo

18

Todos estos métodos no modifican el valor original, devuelve nuevas cadenas.

var city_name = 'Some text with spaces';

Reemplaza el primer espacio con _

city_name.replace(' ', '_'); // Returns: Some_text with spaces

Reemplaza todos los espacios con _ usando regex. Si necesita usar regex, le recomiendo probarlo con https://regex101.com/

city_name.replace(/ /gi,'_');  // Returns: Some_text_with_spaces 

Reemplaza todos los espacios con _ sin regex . Forma funcional.

city_name.split(' ').join('_');  // Returns: Some_text_with_spaces

16

Deberías escribir algo así:

var text = "this is some sample text that i want to replace";
var new_text = text.replace("want", "dont want");
document.write(new_text);

14

El código que otros le están dando solo reemplaza una ocurrencia, mientras que el uso de expresiones regulares los reemplaza a todos (como dijo @sorgit). Para reemplazar todo el "querer" con "no querer", use este código:

var text = "this is some sample text that i want to replace";
var new_text = text.replace(/want/g, "dont want");
document.write(new_text);

La variable "new_text" resultará en "este es un texto de muestra que no quiero reemplazar".

Para obtener una guía rápida de expresiones regulares, vaya aquí:
http://www.cheatography.com/davechild/cheat-sheets/regular-expressions/
Para obtener más información str.replace(), vaya aquí:
https://developer.mozilla.org/ es-ES / docs / JavaScript / Reference / Global_Objects / String / replace ¡
Buena suerte!


14

esa función reemplaza solo una ocurrencia ... si necesita reemplazar múltiples ocurrencias, pruebe esta función: http://phpjs.org/functions/str_replace:527

No necesariamente. ver la respuesta de Hans Kesting:

city_name = city_name.replace(/ /gi,'_');

8

hm .. ¿Marcó usted replace ()?

Tu código se verá así

var text = "this is some sample text that i want to replace";
var new_text = text.replace("want", "dont want");
document.write(new_text);

7
var new_text = text.replace("want", "dont want");

7

En JavaScript, llama al replacemétodo en el objeto String, por ejemplo "this is some sample text that i want to replace".replace("want", "dont want"), que devolverá la cadena reemplazada.

var text = "this is some sample text that i want to replace";
var new_text = text.replace("want", "dont want"); // new_text now stores the replaced string, leaving the original untouched

7

JavaScript tiene un replace()método de objeto String para reemplazar subcadenas. Este método puede tener dos argumentos. El primer argumento puede ser una cadena o un patrón de expresión regular (objeto regExp) y el segundo argumento puede ser una cadena o una función. A continuación se muestra un ejemplo de replace()método que tiene ambos argumentos de cadena.

var text = 'one, two, three, one, five, one';
var new_text = text.replace('one', 'ten');
console.log(new_text)  //ten, two, three, one, five, one

Tenga en cuenta que si el primer argumento es la cadena, solo la primera aparición de la subcadena se reemplaza como en el ejemplo anterior. Para reemplazar todas las apariciones de la subcadena, debe proporcionar una expresión regular con un gindicador (global). Si no proporciona el indicador global, solo se reemplazará la primera aparición de la subcadena incluso si proporciona la expresión regular como primer argumento. Entonces, reemplacemos todas las ocurrencias del oneejemplo anterior.

var text = 'one, two, three, one, five, one';
var new_text = text.replace(/one/g, 'ten');
console.log(new_text)  //ten, two, three, ten, five, ten

Tenga en cuenta que no ajusta el patrón de expresión regular entre comillas, lo que lo convertirá en una cadena, no en un objeto regExp. Para realizar un reemplazo sin distinción entre mayúsculas y minúsculas, debe proporcionar una imarca adicional que haga que el patrón no distinga entre mayúsculas y minúsculas. En ese caso, la expresión regular anterior será /one/gi. Observe la ibandera agregada aquí.

Si el segundo argumento tiene una función y si hay una coincidencia, la función se pasa con tres argumentos. Los argumentos que obtiene la función son la coincidencia, la posición de la coincidencia y el texto original. Debe devolver con qué se debe reemplazar esa coincidencia. Por ejemplo,

var text = 'one, two, three, one, five, one';
var new_text = text.replace(/one/g, function(match, pos, text){
return 'ten';
});
console.log(new_text) //ten, two, three, ten, five, ten

Puede tener más control sobre el texto de reemplazo utilizando una función como segundo argumento.


2
Usted es el único que menciona la función dentro de la capacidad de reemplazo
Emeeus

4

Puedes usar

text.replace('old', 'new')

Y para cambiar varios valores en una cadena a la vez, por ejemplo para cambiar # a la cadena v y _ a la cadena w:

text.replace(/#|_/g,function(match) {return (match=="#")? v: w;});

3

Si realmente quieres un equivalente a PHP, str_replacepuedes usar Locutus . La versión de PHP str_replaceadmite más opciones que las que String.prototype.replaceadmite JavaScript . Por ejemplo etiquetas:

//PHP
$bodytag = str_replace("%body%", "black", "<body text='%body%'>");
//JS with Locutus
var $bodytag = str_replace(['{body}', 'black', '<body text='{body}'>')  

o matriz

//PHP
$vowels = array("a", "e", "i", "o", "u", "A", "E", "I", "O", "U");
$onlyconsonants = str_replace($vowels, "", "Hello World of PHP");
//JS with Locutus
var $vowels = ["a", "e", "i", "o", "u", "A", "E", "I", "O", "U"];
var $onlyconsonants = str_replace($vowels, "", "Hello World of PHP");

Además, esto no usa expresiones regulares, sino que usa para bucles. Si no desea usar expresiones regulares pero desea reemplazar una cadena simple, puede usar algo como esto (basado en Locutus)

function str_replace (search, replace, subject) {

  var i = 0
  var j = 0
  var temp = ''
  var repl = ''
  var sl = 0
  var fl = 0
  var f = [].concat(search)
  var r = [].concat(replace)
  var s = subject
  s = [].concat(s)

  for (i = 0, sl = s.length; i < sl; i++) {
    if (s[i] === '') {
      continue
    }
    for (j = 0, fl = f.length; j < fl; j++) {
      temp = s[i] + ''
      repl = r[0]
      s[i] = (temp).split(f[j]).join(repl)
      if (typeof countObj !== 'undefined') {
        countObj.value += ((temp.split(f[j])).length - 1)
      }
    }
  }
  return s[0]
}
var text = "this is some sample text that i want to replace";

var new_text = str_replace ("want", "dont want", text)
document.write(new_text)

Para obtener más información, consulte el código fuente https://github.com/kvz/locutus/blob/master/src/php/strings/str_replace.js


2

Ya hay múltiples respuestas usando str.replace () (que es lo suficientemente justo para esta pregunta) y regexpuede usar la combinación de str.split () y join (), que es más rápido que str.replace()yregex .

A continuación se muestra un ejemplo de trabajo:

var text = "this is some sample text that i want to replace";

console.log(text.split("want").join("dont want"));


2

Tienes las siguientes opciones:

  1. Reemplazar la primera aparición

var text = "this is some sample text that i want to replace and this i WANT to replace as well.";
var new_text = text.replace('want', 'dont want');
// new_text is "this is some sample text that i dont want to replace and this i WANT to replace as well"
console.log(new_text)

  1. Reemplazar todas las ocurrencias - mayúsculas y minúsculas

var text = "this is some sample text that i want to replace and this i WANT to replace as well.";
var new_text = text.replace(/want/g, 'dont want');
// new_text is "this is some sample text that i dont want to replace and this i WANT to replace as well
console.log(new_text)

  1. Reemplazar todas las ocurrencias - mayúsculas y minúsculas

var text = "this is some sample text that i want to replace and this i WANT to replace as well.";
var new_text = text.replace(/want/gi, 'dont want');
// new_text is "this is some sample text that i dont want to replace and this i dont want to replace as well
console.log(new_text)

Más información -> aquí


2

En Javascript, la función de reemplazo está disponible para reemplazar la subcadena de una cadena dada con una nueva. Utilizar:

var text = "this is some sample text that i want to replace";
var new_text = text.replace("want", "dont want");
console.log(new_text);

Incluso puede usar expresiones regulares con esta función. Por ejemplo, si desea reemplazar todas las apariciones de ,con ..

var text = "123,123,123";
var new_text = text.replace(/,/g, ".");
console.log(new_text);

Aquí el gmodificador solía coincidir globalmente con todas las coincidencias disponibles.


2

Método para replace substring in a sentenceusar React:

 const replace_in_javascript = (oldSubStr, newSubStr, sentence) => {
    let newStr = "";
    let i = 0;
    sentence.split(" ").forEach(obj => {
      if (obj.toUpperCase() === oldSubStr.toUpperCase()) {
        newStr = i === 0 ? newSubStr : newStr + " " + newSubStr;
        i = i + 1;
      } else {
        newStr = i === 0 ? obj : newStr + " " + obj;
        i = i + 1;
      }
    });
    return newStr;
  };

RunMethodHere


2

Si no desea utilizar expresiones regulares, puede utilizar esta función que reemplazará todo en una cadena

Código fuente:

function ReplaceAll(mystring, search_word, replace_with) 
{
    while (mystring.includes(search_word))
    {
        mystring = mystring.replace(search_word, replace_with);
    }

    return mystring;  
}

Cómo utilizar:

var mystring = ReplaceAll("Test Test", "Test", "Hello"); 

2

El String.prototype.replaceprimer argumento de JS debe ser un patrón Regex o String y el segundo argumento debe ser una String o una función.

str.replace(regexp|substr, newSubStr|function);

Ex:

var str = 'this is some sample text that i want to replace'; var newstr = str.replace(/want/i, "dont't want"); document.write(newstr); // this is some sample text that i don't want to replace


0
function str_replace($old, $new, $text)
{
   return ($text+"").split($old).join($new); 
}

No necesita bibliotecas adicionales.


-1

Se agregó un método replace_in_javascriptque satisfará sus requisitos. También descubrió que está escribiendo una cadena "new_text"en la document.write()que se supone que se refiere a una variable new_text.

let replace_in_javascript= (replaceble, replaceTo, text) => {
  return text.replace(replaceble, replaceTo)
}

var text = "this is some sample text that i want to replace";
var new_text = replace_in_javascript("want", "dont want", text);
document.write(new_text);

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.