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

JavaScript JavaScript
スポンサーリンク

String.prototype.replace は、文字列の一部分を別の文字列に置き換えて新しい文字列を返すメソッドです。元の文字列は変わりません(不変性)。以下、用途ごとに分かりやすく説明し、実行例・練習問題もつけます。

1. 基本の使い方(文字列を置換)

構文:

newStr = oldStr.replace(置換対象, 置換後の文字列);
JavaScript

例:

let s = 'red bird and red flower';
let r = s.replace('red', 'Red');
console.log(r); // "Red bird and red flower"
console.log(s); // 元の s は変更されない -> "red bird and red flower"
JavaScript

ポイント:最初に見つかった(先頭から)一致だけが置換されます。文字列を第一引数に渡すと 最初の1件だけ

2. すべて置換したいとき(正規表現の /g フラグ)

文字列で渡すと1件だけなので、複数箇所を置換したい時は正規表現で g(global)を使います。

let s = 'red bird and red flower';
let r = s.replace(/red/g, 'Red');
console.log(r); // "Red bird and Red flower"
JavaScript

大文字・小文字を無視するには i(ignoreCase)を追加:

'Hello hello'.replace(/hello/gi, 'Hi'); // "Hi Hi"
JavaScript

ES2021以降は replaceAll も使えます(ブラウザやNodeのバージョンに注意):

'red red'.replaceAll('red', 'Red'); // "Red Red"
JavaScript

3. キャプチャ(括弧)と , を使った置換

正規表現内で () を使うと「キャプチャ」して、置換文字列内で $1, $2 として参照できます。

例:姓と名を入れ替える

let name = 'Yamada Taro';
let swapped = name.replace(/(\w+)\s+(\w+)/, '$2 $1');
console.log(swapped); // "Taro Yamada"
JavaScript

ここで $1 は最初の (\w+)$2 は2番目の (\w+) を指します。

4. 特殊な $ 記法(置換文字列で使えるもの)

置換文字列内で $ を使うと、以下のような特別な値になります:

  • $& — マッチした部分全体
  • “$“` — マッチの「前」の文字列(マッチ開始位置まで)
  • $' — マッチの「後」の文字列(マッチ終了位置以降)
  • $$ — 文字 $ を出力したいとき
  • $1, $2, ... — キャプチャグループの参照

例:

let text = 'BananaLemonOrange';
console.log(text.replace('Lemon', '[$&]'));   // "Banana[Lemon]Orange"
console.log(text.replace('Lemon', '[$`]'));   // "Banana[Banana]Orange"
console.log(text.replace('Lemon', '[$\']'));  // "Banana[Orange]Orange"
JavaScript

5. 置換に関数を使う(動的な置換)

第二引数に 関数 を渡すと、マッチするごとにその関数が呼ばれ、戻り値で置換されます。関数は (match, p1, p2, ..., offset, string) のような引数を受け取れます(キャプチャがある場合は p1, p2 が入る)。

例:英単語を見つけたら大文字にする

let s = 'apple banana cherry';
let r = s.replace(/\b\w+\b/g, (match) => match.toUpperCase());
console.log(r); // "APPLE BANANA CHERRY"
JavaScript

例:マッチした数値を2倍にする

'Prices: 10, 20, 30'.replace(/\d+/g, (m) => String(Number(m) * 2));
// "Prices: 20, 40, 60"
JavaScript

関数形式は複雑な変換や、置換結果に元の前後の文脈を使いたいときに便利です。

6. 正規表現を動的に作るときの注意(エスケープ)

ユーザー入力をそのまま正規表現パターンに使うと特殊文字で意図しない動作になります。そういう場合は特殊文字をエスケープする関数を作ります。

簡単なエスケープ例:

function escapeRegExp(s) {
  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
let user = 'a+b';
let re = new RegExp(escapeRegExp(user), 'g');
JavaScript

7. 実用例いくつか(すぐ使えるパターン)

a) メールアドレスのマスク(@の前を「***」に)

'foo.bar@example.com'.replace(/(^[^@]{2})[^@]+(@.*$)/, '$1***$2');
// "fo***@example.com"
JavaScript

b) 数値にカンマ区切り(簡易版)

'1234567'.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
// "1,234,567"
JavaScript

c) 複数の単語を入れ替えてフォーマット(姓, 名 → 名 姓)

'Yamada, Taro'.replace(/(\w+),\s*(\w+)/, '$2 $1');
// "Taro Yamada"
JavaScript

8. よくある間違い(注意点)

  • 第一引数を文字列で渡すと、最初に見つかった1つだけしか置換されない。複数を置換したければ正規表現の /g または replaceAll を使う。
  • 正規表現に特殊文字が含まれる入力をそのまま使うとエラーや意図しない一致が発生する(→ エスケープが必要)。
  • replace新しい文字列を返す が、元の文字列は変えない(str はそのまま)。

練習問題

  1. 文字列 "apple, banana, apple, orange" のすべての "apple""APPLE" にするコードを書け。
  2. "(2024) Report (v1)" から年の部分 2024 を抽出して "Year: 2024" に置換する正規表現を書け。
  3. "2020-01-05""05/01/2020"(日/月/年)に変換するコードを書け(キャプチャを使う)。

解答例

1.

'apple, banana, apple, orange'.replace(/apple/g, 'APPLE');
// "APPLE, banana, APPLE, orange"
JavaScript

2.

'(2024) Report (v1)'.replace(/\((\d{4})\)/, 'Year: $1');
// "Year: 2024 Report (v1)"
JavaScript

3.

'2020-01-05'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3/$2/$1');
// "05/01/2020"
JavaScript

まとめ(覚えておくべきポイント)

  • replace は「最初にマッチした箇所を置換」する(文字列を渡した場合)。
  • 全置換は /g フラグか replaceAll を使う。
  • 置換文字列では $&, “$“` , $', $$, $1… が使える。
  • 第二引数に関数を渡すと、動的な置換ができる。
  • 元の文字列は変わらない(戻り値を受け取ること)。
タイトルとURLをコピーしました