Como posso executar um str_replace em JavaScript, substituindo texto em JavaScript?


137

Eu quero usar str_replaceou sua alternativa semelhante para substituir algum texto em 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");

deveria dar

this is some sample text that i dont want to replace

Se você deseja regex, quais são as implicações de desempenho em comparação com os métodos de substituição integrados.


3
Estranho, ninguém percebeu que o PHP str_replacetambém aceita duas matrizes do mesmo comprimento, onde cada sequência na primeira matriz é substituída pela sequência na segunda matriz no mesmo índice. Consulte stackoverflow.com/a/5069776/296430 para a única função correta que encontrei até agora que imita esse comportamento exato em javascript.
Jules Colle

2
@JulesColle essa resposta falhar muitas vezes - ver por que / quando ele falhar e uma melhor solução aqui: stackoverflow.com/a/37949642/445295
Stephen M. Harris

1
Se você quer alta compatibilidade - incluindo peculiaridades - com a versão php ... dar uma olhada em github.com/kvz/locutus/blob/master/src/php/strings/...
Doug Coburn

Respostas:


12

O uso de regex para substituição de string é significativamente mais lento que o uso de uma substituição de string.
Conforme demonstrado no JSPerf , é possível ter diferentes níveis de eficiência para criar uma regex, mas todos eles são significativamente mais lentos que uma simples substituição de cadeia. A regex é mais lenta porque :

As correspondências de cadeia fixa não têm retorno, etapas de compilação, intervalos, classes de caracteres ou uma série de outros recursos que diminuem a velocidade do mecanismo de expressão regular. Certamente, existem maneiras de otimizar as correspondências de regex, mas acho que é improvável que a indexação em uma sequência seja comum.

Para uma execução simples de teste na página JS perf, documentei alguns dos 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>

Os resultados para o Chrome 68 são os seguintes:

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

A fim de completar esta resposta (emprestando dos comentários), vale ressaltar que .replaceapenas substitui a primeira instância do caractere correspondente. Só é possível substituir todas as instâncias por //g. O trade-off de desempenho e a elegância do código podem ser considerados piores se a substituição de várias instâncias name.replace(' ', '_').replace(' ', '_').replace(' ', '_');ou piorwhile (name.includes(' ')) { name = name.replace(' ', '_') }


Isso é interessante e faz sentido que a substituição pura de strings seja mais rápida que o regex. Provavelmente vale a pena mencionar (como em algumas respostas) que .replaceapenas substitui a primeira instância do caractere correspondente. Só é possível substituir todas as instâncias por //g. O off trade desempenho poderia ser argumentado ser pior se substituindo várias instâncias name.replace(' ', '_').replace(' ', '_').replace(' ', '_');ou piorwhile (name.includes(' ')) { name = name.replace(' ', '_') }
Lex

201

Você usaria o replacemétodo:

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

O primeiro argumento é o que você está procurando, obviamente. Também pode aceitar expressões regulares.

Lembre-se de que ele não altera a string original. Ele retorna apenas o novo valor.


4
Muito obrigado pelo 'só retorna e não muda'! Era por isso que eu estava arrancando os cabelos por um longo tempo, até me deparar com o seu comentário ...
Aditya MP

70
string.replace ('old', 'new') substituirá apenas a primeira instância de 'old' na string. o uso de uma expressão regular com o sinalizador 'g' como na resposta de realmag777 substituirá todas as instâncias da string. text = text.replace (/ old / g, 'new') substituirá todas as instâncias de 'old'
WNRosenberg

1
que tal não diferencia maiúsculas de minúsculas?
Netorica

7
^ text.replace (/ old / gi, 'new') substituirá todas as instâncias de 'old' por 'new' que não diferencia maiúsculas de minúsculas (por exemplo, 'OLD' e 'oLd' também serão substituídas)
arnoudhgz


84

Mais simplesmente:

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

Substitui todos os espaços por '_'!


10
Esta é uma tradução mais precisa do que "str_replace" faz (global). A resposta escolhida substituirá apenas a primeira instância.
rico

1
Não se esqueça de caracteres de escape, especialmente se você estiver substituindo hex escapou: \ x27, por exemplo, seria.replace(/\\x3B/g,';')
dmayo

18

Todos esses métodos não modificam o valor original, retornam novas strings.

var city_name = 'Some text with spaces';

Substitui o 1º espaço por _

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

Substitui todos os espaços por _ usando regex. Se você precisar usar o regex, recomendo testá-lo com https://regex101.com/

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

Substitui todos os espaços por _ sem regex . Maneira funcional.

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

16

Você deve escrever algo assim:

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

O código fornecido por outras pessoas substitui apenas uma ocorrência, enquanto o uso de expressões regulares substitui todas (como o @sorgit disse). Para substituir todo o "querer" por "não 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);

A variável "new_text" resultará em "este é um texto de exemplo que eu não quero substituir".

Para obter um guia rápido sobre expressões regulares, acesse aqui:
http://www.cheatography.com/davechild/cheat-sheets/regular-expressions/
Para saber mais str.replace(), acesse aqui:
https://developer.mozilla.org/ pt-br / docs / JavaScript / Reference / Global_Objects / String / replace
Boa sorte!


14

essa função substitui apenas uma ocorrência. Se você precisar substituir várias ocorrências, tente esta função: http://phpjs.org/functions/str_replace:527

Não necessariamente. veja a resposta de Hans Kesting:

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

8

hm .. Você verificou replace ()?

Seu código ficará assim

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

Em JavaScript, você chama o replacemétodo no objeto String, por exemplo "this is some sample text that i want to replace".replace("want", "dont want"), que retornará a string substituída.

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 possui o replace()método String objeto para substituir substrings. Este método pode ter dois argumentos. O primeiro argumento pode ser uma sequência de caracteres ou um padrão de expressão regular (objeto regExp) e o segundo argumento pode ser uma sequência de caracteres ou uma função. Um exemplo de replace()método com os dois argumentos de sequência é mostrado abaixo.

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

Observe que, se o primeiro argumento for a cadeia, apenas a primeira ocorrência da substring será substituída como no exemplo acima. Para substituir todas as ocorrências da substring, é necessário fornecer uma expressão regular com um gsinalizador (global). Se você não fornecer o sinalizador global, apenas a primeira ocorrência da substring será substituída, mesmo se você fornecer a expressão regular como o primeiro argumento. Então, vamos substituir todas as ocorrências oneno exemplo acima.

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

Observe que você não quebra o padrão de expressão regular entre aspas, o que tornará uma sequência não um objeto regExp. Para fazer uma substituição sem distinção entre maiúsculas e minúsculas, é necessário fornecer sinalizador adicional ique torne o padrão sem distinção entre maiúsculas e minúsculas. Nesse caso, a expressão regular acima será /one/gi. Observe a ibandeira adicionada aqui.

Se o segundo argumento tiver uma função e se houver uma correspondência, a função será passada com três argumentos. Os argumentos que a função obtém são a correspondência, a posição da correspondência e o texto original. Você precisa retornar com o que essa correspondência deve ser substituída. Por exemplo,

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

Você pode ter mais controle sobre o texto de substituição usando uma função como o segundo argumento.


2
Você é o único que menciona a função dentro substituir capacidade
Emeeus

4

Você pode usar

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

E para alterar vários valores em uma sequência de uma vez, por exemplo, altere # para a sequência ve _ para a sequência w:

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

3

Se você realmente quer um equivalente ao PHP, str_replacepode usar o Locutus . A versão do PHP str_replacemais String.prototype.replacesuportada do que o JavaScript suporta. Por exemplo, tags:

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

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

Além disso, isso não usa regex, mas sim para loops. Se você não deseja usar regex, mas deseja substituir uma string simples, pode usar algo parecido com isto (baseado no 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 obter mais informações, consulte o código-fonte https://github.com/kvz/locutus/blob/master/src/php/strings/str_replace.js


2

Já existem várias respostas usando str.replace () (o que é justo o suficiente para esta pergunta), regexmas você pode usar a combinação de str.split () e join () juntos, o que é mais rápido que str.replace()e regex.

Abaixo está um exemplo de trabalho:

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

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


2

Você tem as seguintes opções:

  1. Substitua a primeira ocorrência

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. Substituir todas as ocorrências - diferencia maiúsculas de 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. Substituir todas as ocorrências - não diferencia maiúsculas de 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)

Mais informações -> aqui


2

Em Javascript, substitua a função disponível para substituir a sub-string de uma determinada string por uma nova. Usar:

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

Você pode até usar expressão regular com esta função. Por exemplo, se desejar substituir todas as ocorrências de ,por ..

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

Aqui, o gmodificador usado para corresponder globalmente a todas as correspondências disponíveis.


2

Método para replace substring in a sentenceusar o 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

Se você não quiser usar regex, poderá usar esta função que substituirá tudo em uma string

Código fonte:

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

    return mystring;  
}

Como usar:

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

2

O uso do String.prototype.replaceprimeiro argumento JS deve ser o padrão Regex ou String e o segundo argumento deve ser uma String ou função.

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

Você não precisa de bibliotecas adicionais.


-1

Adicionado um método replace_in_javascriptque atenda às suas necessidades. Também descobriu que você está escrevendo uma string "new_text"na document.write()qual deveria se referir a uma variável 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);

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.