JavaScript で文字列のすべてのインスタンスを置き換える
-
String.prototype.replaceAll()組み込みの JavaScript 関数を使用して、文字列のすべてのオカレンスを置き換える -
JavaScript で
gフラグの付いた正規表現を使用して文字列のすべての出現箇所を置換する -
古いブラウザや互換性のために
split()とjoin()を使用して
JavaScript を使用すると、いくつかのメソッドを使用して、文字列内の文字または部分文字列のすべての出現箇所を置き換えることができます。
速度とリソース使用率の点ですべての方法が同じというわけではないため、最適な方法を決定する前に、ユースケースを明確に定義することが重要です。さらに、最適なソリューションは、ターゲットとするブラウザー、より正確にはブラウザーのバージョンによって異なります。
したがって、古いブラウザでは、新しく導入された JavaScript 機能を理解できない場合があります。たとえば、replaceAll メソッドは最も簡単で最も推奨されるオプションですが、Internet Explorer のどのバージョンでも機能しません。ありがたいことに、以下に詳述するように、古いブラウザで同じ結果を達成できる他の方法があります。
String.prototype.replaceAll() 組み込みの JavaScript 関数を使用して、文字列のすべてのオカレンスを置き換える
これは、特に標準ライブラリの一部であるため、JavaScript で利用できる最も簡単なソリューションです。独自の関数を最初から作成する必要はありません。また、この方法は他のほとんどの実装よりもかなり高速です。
const my_string = 'abc 123 abc 456 abc 789 abc';
console.log(my_string.replaceAll('abc', 'xyz'));
出力：
"xyz 123 xyz 456 xyz 789 xyz"
String.prototype.replaceAll() メソッドを使用して、置換文字列を変数として渡する
上記の例では、元の文字列と置換の両方を関数の引数として手動で入力する必要があります。置換文字列を変数として渡したい場合は、代わりに次のメソッドを使用できます。
const my_string = 'abc 123 abc 456 abc 789 abc';
let rep_string = 'xyz';
console.log(my_string.replaceAll('abc', rep_string));
出力：
"xyz 123 xyz 456 xyz 789 xyz"
実際、両方の引数を変数として渡すこともできます。ご想像のとおり、必要なのは、置換する部分文字列を格納する別の変数を作成し、それを replaceAll メソッドの最初の引数として渡すことだけです。
const my_string = 'abc 123 abc 456 abc 789 abc';
let substring = 'abc';
let rep_string = 'xyz';
console.log(my_string.replaceAll(substring, rep_string));
出力：
"xyz 123 xyz 456 xyz 789 xyz"
JavaScript で g フラグの付いた正規表現を使用して文字列のすべての出現箇所を置換する
同じ結果を得るもう 1つの方法は、g フラグと replace() メソッドを使用した正規表現を使用することです。この方法を使用することの欠点は、速度が低下する可能性があることです。したがって、アプリケーションで実行速度を優先する場合は、これを回避するようにしてください。
g フラグは global を表し、それがないと、実行しようとするとコードは TypeError をスローします。これは、正規表現オブジェクトと replace() メソッドを操作する場合の要件です。
const my_string = 'abc 123 abc 456 abc 789 abc';
let new_string = my_string.replace(/abc/g, 'xyz');
console.log(new_string)
出力：
"xyz 123 xyz 456 xyz 789 xyz"
古いブラウザや互換性のために split() と join() を使用して
上記のように、replaceAll() メソッドの場合のように、古いブラウザは新しい JavaScript 機能を理解しない場合があります。代わりに文字列を分割して結合することで、これらの場合に同じ結果を得ることができます。
これは最適化の観点からはかなり悪い解決策であることに注意してください。コードが古いソフトウェアと互換性を持たないようにする場合は、この方法の使用を避けてください。
const my_string = 'abc 123 abc 456 abc 789 abc';
let new_string = my_string.split('abc').join('xyz');
console.log(new_string);
出力：
"xyz 123 xyz 456 xyz 789 xyz"
一般的な解決策では、検索する文字列に split() を使用し、置き換える文字列に join() を使用する必要があることは明らかです。さらに明確にするために、元の文字列と置換文字列をハードコーディングする代わりに変数として渡す方法を次に示します。
const my_string = 'abc 123 abc 456 abc 789 abc';
original_string = 'abc';
replacement_string = 'xyz';
let new_string = my_string.split(original_string).join(replacement_string);
console.log(new_string);
出力：
"xyz 123 xyz 456 xyz 789 xyz"