Jak mogę wykonać str_replace w JavaScript, zastępując tekst w JavaScript?

137

Chcę użyć str_replacelub podobnej alternatywy, aby zamienić tekst w 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");

powinien dać

this is some sample text that i dont want to replace

Jeśli zamierzasz używać wyrażeń regularnych, jakie są implikacje wydajności w porównaniu z wbudowanymi metodami zastępującymi.

Vish
źródło
3
Dziwne, że nikt nie zauważył, że PHP str_replaceakceptuje również dwie tablice o tej samej długości, w których każdy łańcuch w pierwszej tablicy jest zastępowany ciągiem z drugiej tablicy o tym samym indeksie. Zobacz stackoverflow.com/a/5069776/296430, aby zobaczyć jedyną poprawną funkcję, jaką do tej pory znalazłem, która naśladuje dokładnie to zachowanie w javascript.
Jules Colle,
2
@JulesColle, że odpowiedź często zawodzi - zobacz, dlaczego / kiedy zawodzi i lepsze rozwiązanie tutaj: stackoverflow.com/a/37949642/445295
Stephen M. Harris
1
Jeśli chcesz mieć wysoką kompatybilność - w tym dziwactwa - z wersją php ... spójrz na github.com/kvz/locutus/blob/master/src/php/strings/ ...
Doug Coburn

Odpowiedzi:

12

Użycie wyrażenia regularnego do zamiany łańcucha jest znacznie wolniejsze niż użycie zamiany łańcucha.
Jak pokazano w JSPerf , możesz mieć różne poziomy wydajności tworzenia wyrażenia regularnego, ale wszystkie z nich są znacznie wolniejsze niż proste zastępowanie ciągów. Wyrażenie regularne jest wolniejsze, ponieważ :

Dopasowania o ustalonych ciągach nie mają funkcji cofania, kroków kompilacji, zakresów, klas znaków ani wielu innych funkcji, które spowalniają silnik wyrażeń regularnych. Z pewnością istnieją sposoby na optymalizację dopasowań wyrażeń regularnych, ale myślę, że w typowym przypadku jest mało prawdopodobne, aby pobić indeksowanie do ciągu.

Aby przeprowadzić prosty test na stronie perf JS, udokumentowałem niektóre wyniki:

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

Wyniki dla przeglądarki Chrome 68 są następujące:

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

Ze względu na kompletność tej odpowiedzi (zapożyczając z komentarzy) warto wspomnieć, że .replacezastępuje tylko pierwsze wystąpienie dopasowanego znaku. Możliwe jest jedynie zastąpienie wszystkich instancji //g. Można argumentować, że kompromis między wydajnością i elegancją kodu jest gorszy, jeśli zastępuje się wiele wystąpień name.replace(' ', '_').replace(' ', '_').replace(' ', '_');lub gorzejwhile (name.includes(' ')) { name = name.replace(' ', '_') }

TheChetan
źródło
To interesujące i ma sens, że czysta zamiana ciągu znaków jest szybsza niż regex. Prawdopodobnie warto wspomnieć (jak w niektórych odpowiedziach), że .replacezastępuje tylko pierwsze wystąpienie dopasowanego znaku. Możliwe jest jedynie zastąpienie wszystkich instancji //g. Można argumentować, że kompromis wydajnościowy będzie gorszy, jeśli zastąpi się wiele instancji, name.replace(' ', '_').replace(' ', '_').replace(' ', '_');lub gorzejwhile (name.includes(' ')) { name = name.replace(' ', '_') }
Lex,
201

Użyłbyś replacemetody:

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

Oczywiście pierwszy argument dotyczy tego, czego szukasz. Może również akceptować wyrażenia regularne.

Pamiętaj tylko, że nie zmienia to oryginalnego ciągu. Zwraca tylko nową wartość.

sdleihssirhc
źródło
4
Wielkie dzięki za „to tylko wraca i się nie zmienia”! To było to, o czym szarpałem włosy przez długi czas, aż trafiłem na twój komentarz ...
Aditya MP
70
string.replace („stary”, „nowy”) zastąpi tylko pierwsze wystąpienie słowa „stary” w ciągu. użycie wyrażenia regularnego z flagą „g”, jak w odpowiedzi realmag777, spowoduje zastąpienie wszystkich wystąpień łańcucha. text = text.replace (/ old / g, 'new') zastąpi wszystkie wystąpienia 'old'
WNRosenberg
1
co powiesz na brak rozróżniania wielkości liter?
Netorica
7
^ text.replace (/ old / gi, 'new') zamieni wszystkie wystąpienia 'old' na 'new' bez rozróżniania wielkości liter (np. 'OLD' i 'oLd' również zostaną zastąpione)
arnoudhgz
2
i kilka dokumentów z tym: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
elad silver
84

Prościej:

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

Zastępuje wszystkie spacje znakiem „_”!

realmag777
źródło
10
jest to dokładniejsze tłumaczenie tego, co robi „str_replace” (globalne). Wybrana odpowiedź zastąpi tylko pierwszą instancję.
rICh
1
Nie zapomnij o ucieczce znaków, zwłaszcza jeśli zastępujesz znaki ucieczki szesnastkowej: na przykład \ x27 byłoby.replace(/\\x3B/g,';')
dmayo
18

Wszystkie te metody nie modyfikują oryginalnej wartości, zwracają nowe ciągi.

var city_name = 'Some text with spaces';

Zastępuje pierwszą spację _

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

Zamienia wszystkie spacje na _ używając wyrażenia regularnego. Jeśli potrzebujesz użyć wyrażenia regularnego, polecam przetestowanie go na https://regex101.com/

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

Zastępuje wszystkie spacje znakiem _ bez wyrażenia regularnego . Funkcjonalny sposób.

city_name.split(' ').join('_');  // Returns: Some_text_with_spaces
Lukas Liesis
źródło
16

Powinieneś napisać coś takiego:

var text = "this is some sample text that i want to replace";
var new_text = text.replace("want", "dont want");
document.write(new_text);
Timon. Z
źródło
14

Kod, który dają ci inni, zastępuje tylko jedno wystąpienie, podczas gdy użycie wyrażeń regularnych zastępuje je wszystkie (jak powiedział @sorgit). Aby zamienić wszystkie „chcę” na „nie chcę”, użyj tego kodu:

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

Zmienna „nowy_tekst” spowoduje wyświetlenie „to jest przykładowy tekst, którego nie chcę zastępować”.

Aby uzyskać krótki przewodnik po wyrażeniach regularnych, przejdź tutaj:
http://www.cheatography.com/davechild/cheat-sheets/regular-expressions/
Aby dowiedzieć się więcej str.replace(), przejdź tutaj:
https://developer.mozilla.org/ pl-PL / docs / JavaScript / Reference / Global_Objects / String / replace
Powodzenia!

Zoyt
źródło
14

ta funkcja zastępuje tylko jedno wystąpienie .. jeśli chcesz zamienić wiele wystąpień, powinieneś wypróbować tę funkcję: http://phpjs.org/functions/str_replace:527

Niekoniecznie. zobacz odpowiedź Hansa Kestinga:

city_name = city_name.replace(/ /gi,'_');
Pavel
źródło
8

hm .. Czy sprawdziłeś replace ()?

Twój kod będzie wyglądał następująco

var text = "this is some sample text that i want to replace";
var new_text = text.replace("want", "dont want");
document.write(new_text);
arbithero
źródło
7
var new_text = text.replace("want", "dont want");
Miasto
źródło
7

W JavaScript wywołujesz replacemetodę na obiekcie String, np. "this is some sample text that i want to replace".replace("want", "dont want")Który zwróci zastąpiony ciąg.

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

źródło
7

JavaScript ma replace()metodę obiektu String do zastępowania podciągów. Ta metoda może mieć dwa argumenty. Pierwszy argument może być łańcuchem lub wzorcem wyrażenia regularnego (obiekt regExp), a drugi argument może być łańcuchem lub funkcją. Przykład replace()metody mającej oba argumenty łańcuchowe pokazano poniżej.

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

Zwróć uwagę, że jeśli pierwszym argumentem jest łańcuch, tylko pierwsze wystąpienie podciągu jest zastępowane, jak w powyższym przykładzie. Aby zamienić wszystkie wystąpienia podłańcucha, musisz podać wyrażenie regularne z gflagą (globalną). Jeśli nie podasz flagi globalnej, tylko pierwsze wystąpienie podciągu zostanie zastąpione, nawet jeśli jako pierwszy argument podasz wyrażenie regularne. Zastąpmy więc wszystkie wystąpienia onew powyższym przykładzie.

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

Zwróć uwagę, że nie zawijasz wzorca wyrażenia regularnego w cudzysłowy, co spowoduje, że będzie to ciąg znaków, a nie obiekt regExp. Aby dokonać zamiany bez rozróżniania wielkości liter, musisz podać dodatkową flagę, iktóra sprawi, że wzorzec nie będzie rozróżniał wielkości liter. W takim przypadku powyższe wyrażenie regularne będzie /one/gi. Zwróć uwagę na iflagę dodaną tutaj.

Jeśli drugi argument ma funkcję i jeśli istnieje dopasowanie, funkcja jest przekazywana z trzema argumentami. Argumenty, które pobiera funkcja, to dopasowanie, pozycja dopasowania i oryginalny tekst. Musisz zwrócić, czym to dopasowanie powinno zostać zastąpione. Na przykład,

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

Możesz mieć większą kontrolę nad tekstem zastępczym, używając funkcji jako drugiego argumentu.

Saral
źródło
2
Jesteś jedyną osobą, która wspomina o funkcji wewnątrz możliwości zamiany
Emeeus,
4

Możesz użyć

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

I zmienić wiele wartości w jednym ciągu na raz, na przykład zmienić # na ciąg v i _ na ciąg w:

text.replace(/#|_/g,function(match) {return (match=="#")? v: w;});
aabiro
źródło
3

Jeśli naprawdę chcesz mieć odpowiednik PHP, str_replacemożesz użyć Locutus . Wersja PHP str_replaceobsługuje więcej opcji niż ta, którą String.prototype.replaceobsługuje JavaScript . Na przykład tagi:

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

lub tablice

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

Również to nie używa wyrażenia regularnego zamiast pętli. Jeśli nie chcesz używać wyrażenia regularnego, ale chcesz prostego zastąpienia ciągu, możesz użyć czegoś takiego (w oparciu o 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)

aby uzyskać więcej informacji, zobacz kod źródłowy https://github.com/kvz/locutus/blob/master/src/php/strings/str_replace.js

Victor Perez
źródło
2

Istnieje już wiele odpowiedzi za pomocą str.replace () (co jest wystarczające w przypadku tego pytania), regexale możesz użyć kombinacji str.split () i join () razem, co jest szybsze niż str.replace()i regex.

Poniżej działający przykład:

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

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

Vikasdeep Singh
źródło
2

Masz następujące możliwości:

  1. Zastąp pierwsze wystąpienie

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. Zastąp wszystkie wystąpienia - rozróżniana jest wielkość liter

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. Zastąp wszystkie wystąpienia - bez rozróżniania wielkości liter

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)

Więcej informacji -> tutaj

Svetoslav Petrov
źródło
2

W Javascript, funkcja zamień dostępną do zamiany podłańcucha z danego ciągu na nowy. Posługiwać się:

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

Z tą funkcją możesz nawet użyć wyrażenia regularnego. Na przykład, jeśli chcesz zastąpić wszystkie wystąpienia ,z ..

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

Tutaj gmodyfikator używany do globalnego dopasowania wszystkich dostępnych meczów.

Lovepreet Singh
źródło
2

Sposób replace substring in a sentenceużycia Reacta:

 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

bh4r4th
źródło
2

Jeśli nie chcesz używać wyrażenia regularnego, możesz użyć tej funkcji, która zamieni wszystko w ciągu

Kod źródłowy:

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

    return mystring;  
}

Jak używać:

var mystring = ReplaceAll("Test Test", "Test", "Hello"); 
al000y
źródło
2

Użyj String.prototype.replacepierwszego argumentu JS, który powinien być wzorem Regex lub String, a drugi argument powinien być ciągiem lub funkcją.

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

Dawny:

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

oli
źródło
0
function str_replace($old, $new, $text)
{
   return ($text+"").split($old).join($new); 
}

Nie potrzebujesz dodatkowych bibliotek.

18C
źródło
-1

Dodano metodę, replace_in_javascriptktóra spełni Twoje wymagania. Odkryto również, że piszesz łańcuch, "new_text"w document.write()którym ma się odnosić do zmiennej 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);

karthik
źródło