JavaScriptでstr_replaceを実行してJavaScriptのテキストを置き換えるにはどうすればよいですか?


137

str_replaceJavaScriptの一部のテキストを置き換えるために、またはその類似の代替手段を使用したいと思います。

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

与えるべき

this is some sample text that i dont want to replace

正規表現を行う場合、組み込みの置換メソッドと比較してパフォーマンスにどのような影響がありますか。


3
奇妙なことに、PHP str_replaceは同じ長さの2つの配列も受け入れることに気付きませんでした。最初の配列の各文字列は、同じインデックスの2番目の配列の文字列に置き換えられます。これまでに見つけた、JavaScriptでのこの正確な動作を模倣する唯一の正しい関数については、stackoverflow.com / a / 5069776/296430を参照してください。
Jules Colle 2013

2
@JulesColleは、その答えは、多くの場合、失敗すること-を参照して、なぜ/それが失敗したときに、ここでよりよい解決策:stackoverflow.com/a/37949642/445295
スティーブンM.ハリス

1
癖を含む- -あなたは高い互換たい場合はPHPのバージョンとを...見てみましょうgithub.com/kvz/locutus/blob/master/src/php/strings/...
ダグ・コバーン

回答:


12

文字列の置換に正規表現を使用すると、文字列の置換を使用するよりも大幅に遅くなります。JSPerf
示されているように、正規表現を作成するにはさまざまなレベルの効率を使用できますが、それらはすべて、単純な文字列置換よりも大幅に遅くなります。正規表現は次の理由で遅くなります

固定文字列の一致には、バックトラッキング、コンパイル手順、範囲、文字クラス、または正規表現エンジンの速度を低下させる他の多くの機能はありません。正規表現の一致を最適化する方法は確かにありますが、一般的なケースでは、文字列へのインデックス付けに勝るものはないと思います。

JS perfページで簡単なテストを実行するために、結果の一部を文書化しました。

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

Chrome 68の結果は次のとおりです。

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

この回答を完全なものにするため(コメントから借用)、.replace一致した文字の最初のインスタンスのみを置き換えることは言及する価値があります。すべてのインスタンスをで置き換えることのみが可能//gです。パフォーマンスのトレードオフとコードエレガンスは、複数のインスタンス置き換える場合は悪化すると主張することができname.replace(' ', '_').replace(' ', '_').replace(' ', '_');、またはより悪いをwhile (name.includes(' ')) { name = name.replace(' ', '_') }


これは興味深いことであり、純粋な文字列の置換は正規表現よりも高速です。(いくつかの回答のように).replace一致したキャラクターの最初のインスタンスのみを置き換えることはおそらく言及する価値があります。すべてのインスタンスをで置き換えることのみが可能//gです。複数のインスタンスを交換する場合name.replace(' ', '_').replace(' ', '_').replace(' ', '_');、パフォーマンスのトレードオフはさらに悪化する可能性があると主張される可能性がありますwhile (name.includes(' ')) { name = name.replace(' ', '_') }
Lex

201

次のreplaceメソッドを使用します。

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

最初の議論は、明らかに、あなたが探しているものです。正規表現を受け入れることもできます。

ただ、それがないことを覚えていない元の文字列を変更します。新しい値を返すだけです。


4
「それだけが戻り、変化しない」ことを感謝します!それが私があなたのコメントに出会うまで長い間髪を引き裂いていたものでした...
Aditya MP

70
string.replace( 'old'、 'new')は、文字列内の 'old'の最初のインスタンスのみを置き換えます。realmag777の回答のように「g」フラグを指定した正規表現を使用すると、文字列のすべてのインスタンスが置き換えられます。text = text.replace(/ old / g、 'new')は、 'old'のすべてのインスタンスを置き換えます
WNRosenberg

1
大文字と小文字を区別しないのはどうですか?
ネトリカ、

7
^ text.replace(/ old / gi、 'new')は、 'old'のすべてのインスタンスを、大文字と小文字を区別しない 'new'で置き換えます(たとえば、 'OLD'と 'oLd'も置き換えられます)
arnoudhgz

2
そしてそれにいくつかのドキュメント:developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
ELADシルバー

84

もっと簡単に:

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

すべてのスペースを「_」に置き換えます!


10
これは、「str_replace」の動作(グローバル)のより正確な翻訳です。選択した回答は、最初のインスタンスのみを置き換えます。
rICh

1
特に16進エスケープを置き換える場合は、文字をエスケープすることを忘れないでください。たとえば、\ x27は.replace(/\\x3B/g,';')
dmayo

18

これらすべてのメソッドは元の値を変更せず、新しい文字列を返します。

var city_name = 'Some text with spaces';

最初のスペースを_に置き換えます

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

正規表現を使用して、すべてのスペースを_に置き換えます。正規表現を使用する必要がある場合は、https://regex101.com/でテストすることをお勧めします

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

正規表現なしですべてのスペースを_に置き換えます。機能的な方法。

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

16

あなたはそのようなものを書くべきです:

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

正規表現を使用すると、すべてが置き換えられます(@sorgitが言ったように)。すべての「欲しい」を「望まない」に置き換えるには、次のコードを使用します。

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

変数「new_text」は、「これは置き換えたくないサンプルテキストです」になります。

正規表現へのクイックガイドを取得するには、ここに行く:
http://www.cheatography.com/davechild/cheat-sheets/regular-expressions/は
もっとについて学ぶためにstr.replace()、ここに行く:
https://developer.mozilla.org/ en-US / docs / JavaScript / Reference / Global_Objects / String / replace
頑張ってください!


14

その関数は1つのオカレンスのみを置き換えます。複数のオカレンスを置き換える必要がある場合は、この関数を試してください:http : //phpjs.org/functions/str_replace : 527

必ずしも。ハンス・ケスティングの答えを見てください:

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

8

hm .. replace()をチェックしましたか?

あなたのコードはこのようになります

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

JavaScriptではreplace、Stringオブジェクトのメソッドを呼び出します。たとえば"this is some sample text that i want to replace".replace("want", "dont want")、置換された文字列を返します。

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にはreplace()、部分文字列を置き換えるためのStringオブジェクトのメソッドがあります。このメソッドは2つの引数を持つことができます。最初の引数は文字列または正規表現パターン(regExpオブジェクト)で、2番目の引数は文字列または関数です。replace()両方の文字列引数を持つメソッドの例を以下に示します。

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

最初の引数が文字列の場合、上記の例のように最初に出現した部分文字列のみが置き換えられることに注意してください。サブストリングのすべての出現を置き換えるには、g(グローバル)フラグを使用して正規表現を提供する必要があります。グローバルフラグを指定しない場合、最初の引数として正規表現を指定しても、部分文字列の最初の出現のみが置き換えられます。one上記の例のすべてのを置き換えましょう。

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

正規表現パターンを引用符で囲まないでください。これにより、regExpオブジェクトではなく文字列になります。大文字と小文字を区別しない置換iを行うには、パターンで大文字と小文字を区別しないようにする追加のフラグを提供する必要があります。その場合、上記の正規表現はになります/one/giiここにフラグが追加されていることに注意してください。

2番目の引数に関数があり、一致する場合、関数は3つの引数で渡されます。関数が取得する引数は、一致、一致の位置、および元のテキストです。その一致を置き換える必要があるものを返す必要があります。例えば、

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

2番目の引数として関数を使用して、置換テキストをより詳細に制御できます。


2
置換機能の内部の機能について言及しているのはあなただけです
Emeeus

4

使用できます

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

また、1つの文字列の複数の値を一度に変更するには、たとえば、#を文字列vに、_を文字列wに変更します。

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

3

PHPに相当するものが本当に必要なstr_replace場合は、Locutusを使用できます。PHPのバージョンはstr_replace、JavaScriptがString.prototype.replaceサポートするよりも多くのオプションをサポートしています。タグの例:

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

または配列

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

また、これは正規表現を使用せず、forループを使用します。正規表現を使用したくないが単純な文字列置換が必要な場合は、次のようなものを使用できます(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)

詳細については、ソースコードを参照してくださいhttps://github.com/kvz/locutus/blob/master/src/php/strings/str_replace.js


2

そこ使用して複数回答すでにstr.replaceを() (この質問の公正十分です)とregexがありますが、組み合わせ使用することができますstr.splitを()参加()より高速で一緒にstr.replace()regex

以下は実際の例です:

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

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


2

次のオプションがあります。

  1. 最初の出現箇所を置き換える

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. すべての出現箇所を置換-大文字と小文字を区別

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. すべての出現箇所を置換-大文字と小文字を区別しません

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)

詳細-> こちら


2

JavaScriptでは、代わる新しいものに与えられた文字列から部分文字列を置き換えることが可能な機能を。 使用する:

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

この関数で正規表現を使用することもできます。例えば、必要な場合のすべての出現交換する,とし.

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

ここでは、g使用可能なすべての一致をグローバルに一致させるために使用される修飾子。


2

replace substring in a sentenceReact を使用する方法:

 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

正規表現を使用したくない場合は、この関数を使用して、文字列内のすべてを置き換えることができます

ソースコード:

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

    return mystring;  
}

使い方:

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

2

JSを使用String.prototype.replace最初の引数は正規表現パターンまたは文字列で、2番目の引数は文字列または関数である必要があります。

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

例:

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

追加のライブラリは必要ありません。


-1

replace_in_javascript要件を満たすメソッドを追加しました。また、変数を参照するはずの文字列"new_text"を書き込んでいることもわかりました。document.write()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);

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.