クイズ: 正規表現マスター

このパターンは g を使用していますが、i は使用していません:

• g はすべての一致を見つけます
• i がないと、大文字小文字が区別されます

i フラグがない場合、小文字の “cat” のみが一致します。

ユーザー入力や HTML など、ケースが変わり得る場面で特に有用です。

RegExp フラグの詳細はこちら

パターン /^[ch]at/ は次の文字列にマッチします:

• 先頭 (^) が ‘c’ または ‘h’ のいずれかであること（[ch] は1文字の文字クラスを意味します）
• その後に文字通り ‘at’ が続くこと

したがって、“cat” と “hat” だけがこのパターンにマッチします。filter() メソッドはマッチした要素だけを残します。

MDNで文字クラスの詳細を見る

パターン /<div>.*?<\/div>/g は *? による非貪欲マッチングを使用しています。意味は次の通りです:

• <div> にマッチ
• 任意の文字列 (.*) をできるだけ少なく (?) マッチ
• </div> が見つかるまで続ける
• g フラグで全ての出現箇所をマッチ

? が無ければ、貪欲な .* は最初の <div> から最後の </div> まで全てをマッチさせ、1つの大きなマッチになります。? を付けると、各ペアを個別にマッチします。

貪欲 vs ラジーマッチングの詳細

\w+ パターンは1つ以上の単語文字にマッチします。文字列に改行が含まれていても、\w は以下にマッチします:

• 文字 (a-z, A-Z)
• 数字 (0-9)
• アンダースコア (_)

つまり、改行は単語境界として扱われ、2つのマッチが得られます。.* を使った場合、デフォルトでは改行にマッチしません（そのためには s フラグが必要です）。

メタ文字の詳細はこちら

このパターンは何もマッチしません。先読みが逆向きだからです！$ または € の前に数字が欲しいなら、先行参照を使ってください: /(?<=[\$€])\d+/g。

先読みは現在位置の後ろに何があるかをチェックします。現在のパターンは以下を探します:

• 1つ以上の数字 (\d+)
• それに続く ((?=...)) $ または € のいずれか ([\$€])

通貨記号の後に数字がない（数字は記号の前にある）ので、マッチは得られません。

Look-ahead アサーションについて詳しく読む

\b は単語境界を表し、次にマッチします：

• 単語文字と非単語文字の間
• 文字列の先頭または末尾で、そこに単語文字がある場合

つまり /\bcat\b/ は「cat」が完全な単語として存在する時だけマッチし、他の単語の一部ではマッチしません。

• ✅ “cat”（スペースで囲まれている）
• ❌ “cats”（“cat” の後に境界がない）
• ❌ “category”（“cat” の後に境界がない）

単語境界の詳細はこちら

g (global) フラグは match() の動作を変えます:

• g がない場合: キャプチャグループ付きで最初の一致を返す
• g がある場合: すべての一致文字列の配列を返す

このケースでは、“banana” 中の “a” のすべての出現を見つけます。

注意: すべての一致とキャプチャグループの両方が必要な場合は、matchAll() またはループ内で exec() メソッドを使用してください。

グローバルフラグの詳細はこちら

否定的後方参照 (?<!abc) は、数字の前に “abc” がないことを保証します:

• ❌ “123” (前に “abc” がある)
• ✅ “23” (前に “abc1” がある)
• ✅ “456” (前に “def” がある)

JavaScript はモダンエンジンで後方参照アサーションをサポートしています。この例は固定長の後方参照を使用しています: abc は常に3文字です。可変長の後方参照はエンジン依存でやや難しいです。

注意: 後方参照のサポートは JavaScript では比較的新しい機能です。古いブラウザをサポートする必要がある場合は、ブラウザ互換性 を確認してください。

このパターンは3つのキャプチャグループを使用します:

1. (\d{4}) は年をキャプチャ
2. (\d{2}) は月をキャプチャ
3. (\d{2}) は日をキャプチャ

g フラグなしの match() は次を返します:

• インデックス0: 完全一致
• インデックス1以降: キャプチャグループ

slice(1) はキャプチャグループだけを取得する一般的なテクニックです。

グループとキャプチャの詳細はこちら

否定的先読み (?![a-z]) は、数字の後に小文字がないことを保証します。“3aBc” の部分は数字の後に小文字があるためマッチしません。したがって、先頭の “12” のみがマッチします。

否定的先読みの詳細はこちら

パターン /(?<=,)/ は、カンマの後にマッチする後方参照です:

• a,（カンマの後）
• b,（カンマの後）
• c（カンマが後ろにない）

後方参照はカンマを消費しないため、分割結果ではカンマが前のセグメントに残ります。

文字列を前にある文字で分割したいが、分割文字を失わずにしたい場合に便利です。

後方参照アサーションについて詳しく読む

特殊文字は文字通りマッチさせるために \\ でエスケープする必要があります:

• $ は特殊文字（文字列の終端）です
• リテラルのドル記号にマッチさせるにはエスケープします: \\$

エスケープが必要な一般的な文字:

. * + ? ^ $ [ ] \ ( ) { } |

エスケープしないと、多くの特殊文字は正規表現上の意味を持ち、期待通りに動かないことがあります。

特殊文字のエスケープについて詳しく読む

正の後読み (?<=\$) は、数字の前にドル記号があることを保証します:

• (?<=\$): ドル記号の後読み
• \d+: 1つ以上の数字にマッチ

後読みアサーションは文字を消費せず、前方の文字だけをチェックします。 前の部分を含めずに、直前の文字に基づいて何かをマッチさせたいときに便利です。

後読みアサーションの詳細はこちら

パターンは *? を使った遅延マッチングです:

• <b>: 開始タグにマッチ
• (.*?): 任意の文字をキャプチャ（遅延）
• </b>: 終了タグにマッチ

* の後の ? が遅延にし、できるだけ少ない文字にマッチします。 ? がなければ貪欲になり、可能な限り多くの文字にマッチします。

slice(1) はキャプチャされたグループだけを返します。

貪欲と遅延マッチングの詳細

u フラグは以下を有効にします：

• Unicode プロパティエスケープ（\p{...}）
• サロゲートペアの正しい処理

u がないと、絵文字やその他の Unicode 文字が正しくマッチしない可能性があります。 パターン \p{Emoji} は Unicode の Emoji プロパティを持つ文字にマッチします。この文字列では、2つの絵文字ピクトグラムを指します。

注意: Unicode プロパティエスケープは u フラグが必要です。

Unicode モードの詳細はこちら

本番環境でこんなことは絶対書かないでね！ 😅

このパターンは複数のポジティブ・ルックアヘッドを使って以下を強制します:

• 少なくとも1つの大文字: (?=.*[A-Z])
• 少なくとも1つの小文字: (?=.*[a-z])
• 少なくとも1つの数字: (?=.*\d)
• 少なくとも1つの特殊文字: (?=.*[!@#$%^&*])
• 最低8文字: .{8,}

ルックアヘッドは文字を消費せずに複数条件をチェックできるので、パスワード検証に最適です。

パスワード検証パターンの詳細はこちら