JavaScript | 文字列を置換(replace メソッド)

JavaScript JavaScript
スポンサーリンク

主な内容の要点

String.prototype.replace メソッドを使って、文字列中の指定した部分を別の文字列で置換し、新しい文字列を返します。元の文字列自体は変わりません。

基本的な使い方

文字列.replace(置換対象, 新しい文字列)
JavaScript
  • 第一引数(置換対象)は 文字列 または 正規表現オブジェクト を指定可能。
  • 第二引数で指定した文字列に置き換えた結果の 新しい文字列 が返されます。元の文字列は変更されない。
  • 置換対象に合致する箇所が複数あっても、最初にマッチしたものだけ が置換されます(デフォルト動作)。

例:

let str = 'red bird and red flower';
let newstr = str.replace('red', 'Red');
console.log(newstr);  // → "Red bird and red flower"
JavaScript

この例では “red” が2回出てきますが、置換されるのは最初の “red” のみ。

記号を使った特別な値による置換

第二引数(置き換え後の文字列)の中に、ドル記号 $ を用いて「マッチした部分」や「前後の文字列」などを参照できる特殊な記法があります。以下が主なもの。

記号意味
$&マッチした部分全体
$`マッチした部分の「前」の文字列
$'マッチした部分の「後」の文字列
$$"$" の文字として扱う
$1, $2, …正規表現でキャプチャグループを使った場合の参照(第1グループ、第2グループ…)

使用例

let str = 'BananaLemonOrange';

console.log(str.replace('Lemon', '[$&]'));
// → "Banana[Lemon]Orange"

console.log(str.replace('Lemon', '[$`]'));
// → "Banana[Banana]Orange"

console.log(str.replace('Lemon', '[$\']'));
// → "Banana[Orange]Orange"
JavaScript
  • [$&] はマッチした “Lemon” をそのまま挟む → "[Lemon]"
  • [$]` はマッチ前の部分 “Banana” を挿入
  • [$'] はマッチ後の部分 “Orange” を挿入

注意点・補足

  • 第一引数に 正規表現オブジェクト を指定することで、より柔軟な置換(全体マッチ、複数置換、キャプチャグループなど)が可能です。
  • $1, $2, … のような置換表記は、正規表現を用いた場合に有効です。通常の文字列指定の置換では使われないことが多い、との注意も示されています。
タイトルとURLをコピーしました