正規表現の置換パターン — キャプチャグループを置換で使用する
正規表現のキャプチャグループを $1、$2、名前付き参照で置換文字列に使用する方法を学びましょう。JavaScriptの replace()、replaceAll() と一般的な変換をカバー。
Groups
詳細な説明
正規表現の置換パターン
キャプチャグループの真の力は置換操作で発揮されます。JavaScriptの String.prototype.replace() と replaceAll() はグループ参照付きの正規表現パターンを受け付けます。
基本的なグループ参照
置換文字列で $1、$2 などがキャプチャされたグループを参照します：
"2024-01-15".replace(
/(\d{4})-(\d{2})-(\d{2})/,
"$2/$3/$1"
)
// 結果: "01/15/2024"
名前付きグループ参照
名前付きグループでは、置換に $<name> を使います：
"John Smith".replace(
/(?<first>\w+) (?<last>\w+)/,
"$<last>, $<first>"
)
// 結果: "Smith, John"
特殊な置換トークン
| トークン | 挿入内容 |
|---|---|
$$ |
リテラルの "$" |
$& |
マッチした部分文字列全体 |
$\x60 |
マッチの前のテキスト |
$' |
マッチの後のテキスト |
$1...$9 |
番号によるキャプチャグループ |
$<name> |
名前付きキャプチャグループ |
関数による置換
複雑な変換には関数を渡します：
"hello world".replace(/\b\w/g, (char) => char.toUpperCase())
// 結果: "Hello World"
一般的な置換操作
- 空白の除去：
str.replace(/\s+/g, "") - スペースの正規化：
str.replace(/\s+/g, " ") - camelCase を kebab-case に変換：
str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase() - 単語をタグで囲む：
str.replace(/\b(\w+)\b/g, "<span>$1</span>") - HTMLタグの除去：
str.replace(/<[^>]+>/g, "")
ユースケース
日付形式の変換、名前フィールドの並び替え、空白の正規化、命名規則間の変換（camelCaseからkebab-case）、またはユーザー入力のサニタイズなど、テキスト形式を変換する場合。