replace() の動きをブラウザでリアルタイム体験できるツール
入力欄で「文字列」「正規表現」「置換文字列」を自由に入力すると、すぐ下に置換結果が表示されるインタラクティブ版です。$1, $2, $& などの特殊記号にも対応します。
See the Pen JavaScript replace() Replacement Demo by MONO365 -Color your days- (@monoqlo365) on CodePen.
使い方
- 「入力文字列」に対象テキストを入力
- 「置換対象」に正規表現（例：
(\w+)\s+(\w+)）を入力 - 「置換文字列」に
$2 $1などを指定 g/iチェックでフラグを切り替え- 結果が下にリアルタイムで表示されます
試してみる例
| 入力文字列 | 置換対象 | 置換文字列 | 結果 |
|---|---|---|---|
red apple and red flower | red | Blue | Blue apple and Blue flower |
Taro Yamada | (\w+)\s+(\w+) | $2 $1 | Yamada Taro |
<b>Hello</b> | <b>(.*?)<\/b> | **$1** | Hello |
See the Pen JavaScript replace() Replacement Demo #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.
機能まとめ
| 機能 | 内容 |
|---|---|
| 🔁 置換前後比較 | 左に「置換前」、右に「置換後」＋差分ハイライト表示 |
| 🧩 複数パターン一括テスト | ＋パターンを追加 で複数の置換ルールを同時適用 |
| 💾 履歴保存 | 直近10件をローカルストレージに自動保存（ページ再読込後も保持） |
試してみる例
| 入力文字列 | パターン | 置換文字列 | フラグ |
|---|---|---|---|
Taro Yamada | (\w+)\s+(\w+) | $2 $1 | g |
<b>Hello</b> | <b>(.*?)<\/b> | **$1** | g |
100kg 50kg | (\d+)(kg) | $1 $2 | g |
