JavaScript | 文字列を置換（replace メソッド）

「複数の置換パターンを一度に適用」＋「入力フォームで検証・変換」＋「関数を使った動的置換」 をまとめて体験できる、初心者向けながら実践的な HTML + CSS + JavaScript サンプルを作ります。

サンプル概要

このUIでは以下のことができます。

1. テキスト入力欄に文字列を入れる
2. 複数の「置換ルール」を追加（例：「foo → bar」「2025 → 年号」など）
3. 「すべて置換」ボタンで一括変換
4. オプション機能：
   • 正規表現モード切り替え（/pattern/flags を使用可能）
   • 入力検証（空欄・エラー表示）
   • 関数モード（動的置換：例：数字を2倍にする など）

See the Pen replace() Method Practice UI by MONO365 -Color your days- (@monoqlo365) on CodePen.

実際にできること

モード	内容	例
通常置換	単純な文字列の置換	"red" → "blue"
正規表現モード	/\d+/g のように柔軟な検索	数字だけ変換
関数モード	match内容を使って動的に変換	数字なら×2、大文字化など

試してみよう

入力：

price: 10, red apple, red orange

ルール：

置換対象	置換後
red	blue
\d+	$&円

「正規表現モード」をオンにして「すべて置換」すると：

price: 10円, blue apple, blue orange

関数モードをONにすると：

price: 20, RED APPLE, RED ORANGE

---

See the Pen replace() Method Practice UI #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.

使い方

1. 上記3ファイルを同じフォルダに置いてブラウザで index.html を開く
2. 入力欄に文字列を入力
3. 「ルールを追加」で複数の置換条件を設定
4. チェックを付けることでモードを切り替え
5. 結果が自動的にプレビューに反映（または「すべて置換」で実行）
6. 「ルールをCSVで保存」ボタンで現在の置換設定を保存

例：キャプチャ置換を使った氏名入れ替え

入力：

Yamada Taro
Suzuki Hanako

ルール：

パターン: (\w+)\s+(\w+)
置換後: $2 $1

✅ 正規表現モードをON
→ 結果：

Taro Yamada
Hanako Suzuki

See the Pen JavaScript replace() Extension Tool by MONO365 -Color your days- (@monoqlo365) on CodePen.