Come posso eseguire uno str_replace in JavaScript, sostituendo il testo in JavaScript?


137

Voglio usare str_replaceo la sua alternativa simile per sostituire del testo in 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");

dovrebbe dare

this is some sample text that i dont want to replace

Se hai intenzione di regex, quali sono le conseguenze sulle prestazioni rispetto ai metodi di sostituzione integrati.


3
Strano nessuno ha notato che i PHP str_replaceaccettano anche due array della stessa lunghezza, in cui ogni stringa nel primo array viene sostituita con la stringa nel secondo array nello stesso indice. Si prega di consultare stackoverflow.com/a/5069776/296430 per l'unica funzione corretta che ho trovato finora che imita questo comportamento esatto in javascript.
Jules Colle,

2
@JulesColle che la risposta fallisce spesso - vedi perché / quando fallisce e una soluzione migliore qui: stackoverflow.com/a/37949642/445295
Stephen M. Harris,

1
Se vuoi un'alta compatibilità - comprese le stranezze - con la versione php ... dai un'occhiata a github.com/kvz/locutus/blob/master/src/php/strings/…
Doug Coburn

Risposte:


12

L'uso di regex per la sostituzione di stringhe è significativamente più lento rispetto all'uso di una sostituzione di stringhe.
Come dimostrato su JSPerf , è possibile avere diversi livelli di efficienza per la creazione di una regex, ma tutti sono significativamente più lenti di una semplice sostituzione di stringhe. La regex è più lenta perché :

Le corrispondenze a stringa fissa non hanno backtracking, passaggi di compilazione, intervalli, classi di caratteri o una miriade di altre funzionalità che rallentano il motore delle espressioni regolari. Esistono certamente modi per ottimizzare le corrispondenze di regex, ma penso che sia improbabile battere l'indicizzazione in una stringa nel caso comune.

Per un semplice test eseguito sulla pagina perf di JS, ho documentato alcuni dei risultati:

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

I risultati per Chrome 68 sono i seguenti:

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

Per completezza di questa risposta (prendendo in prestito dai commenti), vale la pena ricordare che .replacesostituisce solo la prima istanza del personaggio abbinato. È possibile sostituire solo tutte le istanze con //g. Il compromesso delle prestazioni e l'eleganza del codice potrebbero essere considerati peggiori se si sostituiscono più istanze name.replace(' ', '_').replace(' ', '_').replace(' ', '_');o peggiowhile (name.includes(' ')) { name = name.replace(' ', '_') }


È interessante e ha senso che la sostituzione della stringa pura sia più veloce di regex. Probabilmente vale la pena menzionare (come in alcune risposte) che .replacesostituisce solo la prima istanza del personaggio abbinato. È possibile sostituire solo tutte le istanze con //g. Il compromesso sulle prestazioni potrebbe essere considerato peggiore se si sostituiscono più istanze name.replace(' ', '_').replace(' ', '_').replace(' ', '_');o peggiowhile (name.includes(' ')) { name = name.replace(' ', '_') }
Lex

201

Utilizzeresti il replacemetodo:

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

Il primo argomento è quello che stai cercando, ovviamente. Può anche accettare espressioni regolari.

Ricorda solo che non cambia la stringa originale. Restituisce solo il nuovo valore.


4
Grazie mille per il 'ritorna solo e non cambia'! Questo è ciò di cui mi sono strappato i capelli per molto tempo fino a quando mi sono imbattuto nel tuo commento ...
Aditya MP

70
string.replace ('old', 'new') sostituirà solo la prima istanza di 'old' nella stringa. l'uso di un'espressione regolare con il flag 'g' come nella risposta di realmag777 sostituirà tutte le istanze della stringa. text = text.replace (/ old / g, 'new') sostituirà tutte le istanze di 'old'
WNRosenberg

1
che ne dici di non distingue tra maiuscole e minuscole?
Netorica

7
^ text.replace (/ old / gi, 'new') sostituirà tutte le istanze di 'old' per 'new' non sensibile al maiuscolo / minuscolo (es. anche 'OLD' e 'oLd' saranno sostituiti)
arnoudhgz


84

Più semplicemente:

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

Sostituisce tutti gli spazi con '_'!


10
questa è una traduzione più accurata di ciò che fa "str_replace" (globale). La risposta scelta sostituirà solo la prima istanza.
rICh,

1
Non dimenticare di sfuggire ai personaggi, specialmente se stai sostituendo hex sfuggito: \ x27 per esempio sarebbe.replace(/\\x3B/g,';')
dmayo

18

Tutti questi metodi non modificano il valore originale, restituiscono nuove stringhe.

var city_name = 'Some text with spaces';

Sostituisce il primo spazio con _

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

Sostituisce tutti gli spazi con _ usando regex. Se devi usare regex, ti consiglio di testarlo con https://regex101.com/

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

Sostituisce tutti gli spazi con _ senza regex . Modo funzionale.

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

16

Dovresti scrivere qualcosa del genere:

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

Il codice che gli altri ti stanno dando sostituisce una sola occorrenza, mentre l'uso di espressioni regolari le sostituisce tutte (come ha detto @sorgit). Per sostituire tutto "vuoi" con "non vuoi", usa questo codice:

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 variabile "new_text" si tradurrà in "questo è un testo di esempio che non voglio sostituire".

Per una guida rapida alle espressioni regolari, vai qui:
http://www.cheatography.com/davechild/cheat-sheets/regular-expressions/
Per ulteriori informazioni str.replace(), vai qui:
https://developer.mozilla.org/ it-it / docs / JavaScript / Reference / Global_Objects / String / sostituisci
Buona fortuna!


14

tale funzione sostituisce una sola occorrenza. Se devi sostituire più occorrenze dovresti provare questa funzione: http://phpjs.org/functions/str_replace:527

Non necessariamente. vedi la risposta di Hans Kesting:

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

8

hm .. Hai controllato sostituire ()?

Il tuo codice sarà simile a questo

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

In JavaScript, si chiama il replacemetodo sull'oggetto String, ad esempio "this is some sample text that i want to replace".replace("want", "dont want"), che restituirà la stringa sostituita.

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 ha il replace()metodo dell'oggetto String per sostituire le sottostringhe. Questo metodo può avere due argomenti. Il primo argomento può essere una stringa o un modello di espressione regolare (oggetto regExp) e il secondo argomento può essere una stringa o una funzione. Di replace()seguito è mostrato un esempio di metodo con entrambi gli argomenti stringa.

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

Si noti che se il primo argomento è la stringa, viene sostituita solo la prima occorrenza della sottostringa come nell'esempio sopra. Per sostituire tutte le occorrenze della sottostringa è necessario fornire un'espressione regolare con un gflag (globale). Se non si fornisce il flag globale, verrà sostituita solo la prima occorrenza della sottostringa anche se si fornisce l'espressione regolare come primo argomento. Quindi sostituiamo tutte le occorrenze dell'esempio onesopra.

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

Nota che non racchiudi il modello di espressione regolare tra virgolette che lo renderà una stringa e non un oggetto regExp. Per eseguire una sostituzione senza distinzione tra maiuscole e minuscole, è necessario fornire un flag aggiuntivo iche renda la distinzione tra maiuscole e minuscole. In tal caso l'espressione regolare sopra sarà /one/gi. Nota la ibandiera aggiunta qui.

Se il secondo argomento ha una funzione e se esiste una corrispondenza, la funzione viene passata con tre argomenti. Gli argomenti ottenuti dalla funzione sono la corrispondenza, la posizione della corrispondenza e il testo originale. Devi restituire ciò con cui quella partita deve essere sostituita. Per esempio,

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

Puoi avere un maggiore controllo sul testo sostitutivo usando una funzione come secondo argomento.


2
Sei l'unico che menziona la funzione all'interno della funzionalità di sostituzione
Emeeus

4

Puoi usare

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

E per modificare più valori contemporaneamente in una stringa, ad esempio per cambiare # in stringa v e _ in stringa w:

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

3

Se vuoi davvero un equivalente di PHP str_replacepuoi usare Locutus . La versione di PHP str_replacesupporta più opzioni rispetto a ciò che String.prototype.replacesupporta JavaScript . Ad esempio tag:

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

o array

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

Inoltre questo non usa regex invece lo usa per i loop. Se non si desidera utilizzare regex ma si desidera sostituire una stringa semplice, è possibile utilizzare qualcosa del genere (basato su 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)

per maggiori informazioni consultare il codice sorgente https://github.com/kvz/locutus/blob/master/src/php/strings/str_replace.js


2

Esistono già più risposte usando str.replace () (che è abbastanza giusto per questa domanda) e regexma puoi usare la combinazione di str.split () e join () insieme che è più veloce di str.replace()eregex .

Di seguito è riportato un esempio funzionante:

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

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


2

Hai le seguenti opzioni:

  1. Sostituisci la prima occorrenza

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. Sostituisci tutte le occorrenze, con distinzione tra maiuscole e minuscole

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. Sostituisci tutte le occorrenze - senza distinzione tra maiuscole e minuscole

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)

Maggiori informazioni -> qui


2

In Javascript, sostituire la funzione disponibile per sostituire la sottostringa dalla stringa data con una nuova. Uso:

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

Puoi anche usare l'espressione regolare con questa funzione. Ad esempio, se si desidera sostituire tutte le occorrenze di ,con ..

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

Qui gmodificatore utilizzato per abbinare globalmente tutte le partite disponibili.


2

Metodo di replace substring in a sentenceutilizzo di 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 non si desidera utilizzare regex, è possibile utilizzare questa funzione che sostituirà tutto in una stringa

Codice sorgente:

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

    return mystring;  
}

Come usare:

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

2

Utilizzare il String.prototype.replaceprimo argomento JS dovrebbe essere il modello Regex o String e il secondo argomento dovrebbe essere una stringa o una funzione.

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

Non hai bisogno di librerie aggiuntive.


-1

Aggiunto un metodo replace_in_javascriptche soddisferà le tue esigenze. Ho anche scoperto che stai scrivendo una stringa "new_text"in document.write()cui dovrebbe fare riferimento a una variabile 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);

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.