JavaScriptの基礎 - 正規表現のソースを表示

== 概要 ==
正規表現 (Regular Expression) は、文字列のパターンを記述するための特殊な構文であり、テキストの検索、マッチング、置換、検証といった操作を効率的に行うために使用する。<br>
JavaScriptでは、正規表現は組み込みの <code>RegExp</code> オブジェクトとして実装されており、言語に深く統合されている。<br>
<br>
正規表現を生成する方法は2種類ある。<br>
<br>
<center>
{| class="wikitable"
|+ 正規表現の生成方法
! 生成方法 !! 説明 !! 用途
|-
| 正規表現リテラル (<code>/pattern/flags</code>) || スラッシュでパターンを囲む記法であり、<br>スクリプトの読み込み時にコンパイルされる || パターンが固定の場合に適している。
|-
| <code>new RegExp(pattern, flags)</code> コンストラクタ || <code>RegExp</code> コンストラクタに<br>パターンと修飾子を文字列で渡す記法 || パターンを動的に生成する場合や<br>ユーザ入力をパターンに含める場合に使用する。
|}
</center>
<br>
JavaScriptの正規表現は、フラグにより動作を制御できる。<br>
ES2015で <code>u</code> (Unicode) フラグと <code>y</code> (Sticky) フラグが追加され、<br>
ES2018では <code>s</code> (Dot All) フラグ、名前付きキャプチャグループ、後読みアサーションが追加された。<br>
<br>
ES2022では <code>d</code> (hasIndices) フラグ、ES2024では <code>v</code> (unicodeSets) フラグが追加された。<br>
<br>
更にES2025では、任意の文字列を正規表現で安全に使用するための <code>RegExp.escape()</code> 静的メソッドと、正規表現の特定サブ式にのみフラグを適用するパターン修飾子が正式採用された。<br>
<br><br>

== 正規表現の生成 ==
==== 正規表現リテラル ====
正規表現リテラルは、スラッシュ (<code>/</code>) でパターンを囲んで記述する。<br>
スクリプトの読み込み時にコンパイルされるため、パターンが変化しない場合に使用することを推奨する。<br>
<br>
 <syntaxhighlight lang="javascript">
 // 基本的な正規表現リテラル
 const re1 = /hello/;
 const re2 = /hello/gi;                              // フラグ付き (g: 全マッチ, i: 大文字小文字を区別しない)
 
 // テストの実行
 console.log(re1.test("hello world"));               // true
 console.log(re2.test("HELLO WORLD"));               // true
 
 // 特殊文字はバックスラッシュでエスケープ
 const reEscape = /https:\/\/example\.com/;
 console.log(reEscape.test("https://example.com"));  // true
 </syntaxhighlight>
<br>
==== RegExpコンストラクタ ====
<code>RegExp</code> コンストラクタは、パターンを文字列として渡して正規表現オブジェクトを生成する。<br>
パターンを動的に構築する場合や変数の値をパターンに使用する場合に適している。<br>
<br>
コンストラクタを使用する時の注意点として、バックスラッシュを文字列内でエスケープする必要があるため、<code>\d</code> は <code>"\\d"</code> と記述しなければならない。<br>
<br>
 <syntaxhighlight lang="javascript">
 // 基本的な使用方法
 const re1 = new RegExp("hello");
 const re2 = new RegExp("hello", "gi");       // フラグは第2引数に指定
 
 // 動的なパターン生成
 const keyword   = "world";
 const rePattern = new RegExp(keyword, "i");
 console.log(rePattern.test("Hello World"));  // true
 
 // バックスラッシュのエスケープ
 const reDigit = new RegExp("\\d+");          // \d は \\d と記述する
 console.log(reDigit.test("abc123"));         // true
 
 // 既存の正規表現からの生成 (ES2015以降)
 const original = /hello/gi;
 const copy     = new RegExp(original);       // フラグも引き継ぐ
 const modified = new RegExp(original, "i");  // フラグを上書き
 </syntaxhighlight>
<br><br>

== フラグ ==
==== フラグ一覧 ====
正規表現のフラグは、パターンマッチングの動作を制御する。<br>
複数のフラグを組み合わせて使用できる。<br>
<br>
<center>
{| class="wikitable"
|+ 正規表現フラグ一覧
! フラグ !! 名称 !! 説明 !! 導入バージョン
|-
| <code>g</code> || Global || 最初のマッチだけでなく、全てのマッチを対象とする。 || ES1
|-
| <code>i</code> || Case-Insensitive || 大文字と小文字を区別しない。 || ES1
|-
| <code>m</code> || Multiline || <code>^</code> と <code>$</code> を文字列全体の先頭・末尾ではなく、各行の先頭・末尾にマッチさせる。 || ES1
|-
| <code>s</code> || Dot All || ドット (<code>.</code>) が改行文字を含む全ての文字にマッチする。<br>デフォルトでは改行文字にマッチしない。 || ES2018
|-
| <code>u</code> || Unicode || 完全なUnicodeマッチングを有効にする。<br>サロゲートペアを1文字として扱い、<code>\p{...}</code> (Unicodeプロパティエスケープ) が使用可能になる。 || ES2015
|-
| <code>v</code> || Unicode Sets || <code>u</code> フラグの上位互換<br>拡張文字クラスと集合演算 (<code>&&</code> 交差、<code>--</code> 差) が使用可能になる。<br><code>u</code> フラグと同時使用不可。 || ES2024
|-
| <code>d</code> || Has Indices || マッチ結果に <code>indices</code> プロパティを追加する。<br>各マッチおよびキャプチャグループの開始・終了インデックスを含む。 || ES2022
|-
| <code>y</code> || Sticky || 前のマッチが終了した位置 (<code>lastIndex</code>) からのみマッチを開始する。 || ES2015
|}
</center>
<br>
==== フラグの組み合わせ例 ====
フラグは任意の組み合わせで使用できる。<br>
<br>
 <syntaxhighlight lang="javascript">
 // g + i : 大文字小文字を区別せず全マッチを取得
 const str = "Hello hello HELLO";
 const matches = str.match(/hello/gi);
 console.log(matches);                  // ["Hello", "hello", "HELLO"]
 
 // mフラグ : 複数行マッチング
 const multiLine = "first\nsecond\nthird";
 const reM = /^\w+/gm;  // 各行の先頭にマッチ
 console.log(multiLine.match(reM));     // ["first", "second", "third"]
 
 // sフラグ : ドットが改行にもマッチ
 const text = "start\nend";
 console.log(/start.end/.test(text));   // false (sフラグなし)
 console.log(/start.end/s.test(text));  // true  (sフラグあり)
 
 // uフラグ : Unicodeプロパティエスケープ
 const reJapanese = /\p{Script=Hiragana}/u;
 console.log(reJapanese.test("あ"));    // true
 
 // vフラグ : 集合演算 (ES2024)
 const reLower = /[a-z--[a-c]]/v;       // a-z から a, b, c を除外
 console.log(reLower.test("d"));        // true
 console.log(reLower.test("a"));        // false
 
 // dフラグ : マッチインデックスの取得 (ES2022)
 const reDateD = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/d;
 const match = reDateD.exec("2025-02-20");
 console.log(match.indices.groups);
 // { year: [0, 4], month: [5, 7], day: [8, 10] }
 </syntaxhighlight>
<br><br>

== 主要メソッド ==
==== RegExp.prototype.test ====
<code>test(string)</code> は、文字列が正規表現にマッチするかを確認して、<code>true</code> または <code>false</code> を返す。<br>
<br>
マッチの詳細情報は必要なく、存在確認のみを行う場合に使用する。<br>
<br>
 <syntaxhighlight lang="javascript">
 const re = /hello/i;
 
 console.log(re.test("Hello World"));            // true
 console.log(re.test("Goodbye"));                // false
 
 // バリデーションの例
 const emailRe = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 console.log(emailRe.test("user@example.com"));  // true
 console.log(emailRe.test("invalid-email"));     // false
 
 // gフラグとtest()の組み合わせ (lastIndexが更新される)
 const reG = /hello/g;
 console.log(reG.test("hello hello"));           // true  (lastIndex: 5)
 console.log(reG.test("hello hello"));           // true  (lastIndex: 11)
 console.log(reG.test("hello hello"));           // false (lastIndex: 0にリセット)
 </syntaxhighlight>
<br>
==== String.prototype.match ====
<code>match(regexp)</code> は、文字列が正規表現にマッチした結果を返す。<br>
<br>
<code>g</code> フラグ無しの場合は <code>exec()</code> と同等の詳細情報を含む配列を返し、<br>
<code>g</code> フラグありの場合はマッチした文字列の配列のみを返す。<br>
<br>
マッチしない場合は、<code>null</code> を返す。<br>
<br>
 <syntaxhighlight lang="javascript">
 const str = "Hello World 123";
 
 // gフラグなし : 最初のマッチの詳細情報
 const match1 = str.match(/\d+/);
 console.log(match1[0]);     // "123" (マッチした文字列)
 console.log(match1.index);  // 12   (マッチした位置)
 console.log(match1.input);  // "Hello World 123" (元の文字列)
 
 // gフラグあり : 全マッチの配列 (詳細情報なし)
 const str2   = "cat bat sat";
 const match2 = str2.match(/[a-z]at/g);
 console.log(match2);        // ["cat", "bat", "sat"]
 
 // マッチしない場合はnull
 const match3 = str.match(/xyz/);
 console.log(match3);        // null
 </syntaxhighlight>
<br>
==== String.prototype.matchAll ====
<code>matchAll(regexp)</code> は、全マッチの詳細情報を含むイテレータを返す。<br>
<br>
<code>g</code> フラグが必須であり、各マッチにインデックス情報とキャプチャグループが含まれる点が <code>match()</code> との大きな違いである。<br>
<br>
ES2020で導入された。<br>
<br>
 <syntaxhighlight lang="javascript">
 const str = "test1 test2 test3";
 
 // matchAllはイテレータを返す (gフラグ必須)
 const re = /test(\d)/g;
 const iter = str.matchAll(re);
 
 // スプレッド構文で配列に変換
 const allMatches = [...iter];
 console.log(allMatches.length);     // 3
 console.log(allMatches[0][0]);      // "test1" (全体マッチ)
 console.log(allMatches[0][1]);      // "1"     (キャプチャグループ1)
 console.log(allMatches[0].index);   // 0       (マッチ位置)
 
 // for...ofループで逐次処理
 for (const match of str.matchAll(/test(\d)/g)) {
    console.log(`${match[0]} at index ${match.index}`);
 }
 // test1 at index 0
 // test2 at index 6
 // test3 at index 12
 </syntaxhighlight>
<br>
==== String.prototype.replace / replaceAll ====
<code>replace(pattern, replacement)</code> は最初にマッチした部分を置換し、<code>replaceAll(pattern, replacement)</code> は全てのマッチを置換する。<br>
<br>
<code>replaceAll()</code> に正規表現を渡す場合は <code>g</code> フラグが必須である。<br>
<br>
置換文字列には特殊なパターン (<code>$&</code>, <code>$1</code>, <code>$<name></code> 等) を使用でき、置換関数を渡すこともできる。<br>
<br>
 <syntaxhighlight lang="javascript">
 const str = "hello world";
 
 // 文字列パターン : 最初のマッチのみ置換
 console.log(str.replace("l", "L"));     // "heLlo world"
 
 // 正規表現 (gフラグ) : 全マッチを置換
 console.log(str.replace(/l/g, "L"));    // "heLLo worLd"
 
 // replaceAll : 全マッチを置換 (gフラグ必須)
 console.log(str.replaceAll("l", "L"));  // "heLLo worLd"
 
 // 特殊置換パターン
 const str2 = "John Smith";
 // $1, $2: キャプチャグループの参照
 console.log(str2.replace(/(\w+)\s(\w+)/, "$2, $1"));  // "Smith, John"
 
 // 置換関数
 const str3 = "hello world";
 const result = str3.replace(/\b\w/g, (match) => match.toUpperCase());
 console.log(result);  // "Hello World"
 
 // 名前付きキャプチャグループの参照 ($<name>)
 const date = "2025-02-20";
 const formatted = date.replace(
    /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/,
    "$<year>年$<month>月$<day>日"
 );
 console.log(formatted);  // "2025年02月20日"
 </syntaxhighlight>
<br>
==== String.prototype.search ====
<code>search(regexp)</code> は、最初にマッチした部分の開始インデックスを返す。<br>
<br>
マッチしない場合は <code>-1</code> を返す。<br>
<br>
<code>g</code> フラグは無視される。<br>
<br>
 <syntaxhighlight lang="javascript">
 const str = "Hello World 123";
 
 // マッチした位置のインデックスを返す
 console.log(str.search(/\d+/));        // 12
 console.log(str.search(/xyz/));        // -1 (マッチしない場合)
 console.log(str.search(/world/i));     // 6 (iフラグで大文字小文字を区別しない)
 
 // indexOf()との違い : 正規表現が使用可能
 console.log(str.indexOf("World"));     // 6
 // console.log(str.indexOf(/World/));  // 正規表現は使用不可
 </syntaxhighlight>
<br>
==== String.prototype.split ====
<code>split(separator, limit)</code> は、正規表現をデリミタとして文字列を分割し、配列を返す。<br>
<br>
キャプチャグループを含む正規表現を使用すると、デリミタ自体も結果配列に含まれる。<br>
<br>
 <syntaxhighlight lang="javascript">
 // 正規表現による分割
 const str = "one1two2three3four";
 console.log(str.split(/\d/));       // ["one", "two", "three", "four"]
 
 // 複数の区切り文字
 const csv = "a, b ,  c,d";
 console.log(csv.split(/\s*,\s*/));  // ["a", "b", "c", "d"]
 
 // キャプチャグループを含む分割 (デリミタが結果に含まれる)
 const str2 = "Hello 1 World 2 JavaScript";
 console.log(str2.split(/(\d)/));
 // ["Hello ", "1", " World ", "2", " JavaScript"]
 
 // limitパラメータ
 console.log(str.split(/\d/, 2));  // ["one", "two"]
 </syntaxhighlight>
<br>
==== RegExp.prototype.exec ====
<code>exec(string)</code> は、文字列に対してマッチを実行し、最初にマッチした結果の詳細情報を配列として返す。<br>
<br>
マッチしない場合は、<code>null</code> を返す。<br>
<br>
<code>g</code> または <code>y</code> フラグ付きの場合、連続して呼び出すと <code>lastIndex</code> が更新され、次のマッチ位置から検索を継続できる。<br>
<br>
 <syntaxhighlight lang="javascript">
 const re = /(\d{4})-(\d{2})-(\d{2})/;
 const str = "Date: 2025-02-20";
 
 const result = re.exec(str);
 console.log(result[0]);     // "2025-02-20" (全体マッチ)
 console.log(result[1]);     // "2025"       (グループ1)
 console.log(result[2]);     // "02"         (グループ2)
 console.log(result[3]);     // "20"         (グループ3)
 console.log(result.index);  // 6            (マッチ開始位置)
 
 // gフラグ付きで繰り返し呼び出し
 const reG = /test(\d)/g;
 const str2 = "test1 test2 test3";
 let match;
 while ((match = reG.exec(str2)) !== null) {
    console.log(`${match[0]} at index ${match.index}`);
 }
 // test1 at index 0
 // test2 at index 6
 // test3 at index 12
 </syntaxhighlight>
<br><br>

== 基本的なパターン ==
==== 文字クラス ====
文字クラスは、特定の文字または文字の集合にマッチするパターンを表す。<br>
<br>
<center>
{| class="wikitable"
|+ 文字クラス一覧
! パターン !! 説明 !! マッチする例
|-
| <code>.</code> || 任意の1文字にマッチする。<br>改行文字を除く。<br><code>s</code> フラグを付けると改行も含む。 || <u>/a.c/</u> は "abc", "a1c", "a_c" にマッチ
|-
| <code>\d</code> || 数字 <u>[0-9]</u> にマッチする。 || <code>/\d+/</code> は "123" にマッチ
|-
| <code>\D</code> || 数字以外にマッチする。<br><u>[^0-9]</u> と等価 || <u>/\D+/</u> は "abc" にマッチ
|-
| <code>\w</code> || 英数字とアンダースコア <u>[a-zA-Z0-9_]</u> にマッチする。 || <u>/\w+/</u> は "hello_123" にマッチ
|-
| <code>\W</code> || <code>\w</code> 以外にマッチする。 || <u>/\W/</u> は "@", "!" にマッチ
|-
| <code>\s</code> || 空白文字 (スペース、タブ、改行等) にマッチする。 || <u>/\s+/</u> は " " にマッチ
|-
| <code>\S</code> || 空白文字以外にマッチする。 || <u>/\S+/</u> は "hello" にマッチ
|-
| <code>[abc]</code> || a, b, cのいずれか1文字にマッチする。 || <u>/[aeiou]/</u> は "a", "e" にマッチ
|-
| <code>[^abc]</code> || a, b, c以外の1文字にマッチする。 || <u>/[^aeiou]/</u> は "b", "c" にマッチ
|-
| <code>[a-z]</code> || a から zの範囲の1文字にマッチする。 || <u>/[a-z]/</u> は "a", "m", "z" にマッチ
|-
| <code>\p{...}</code> || UNICODEプロパティエスケープ<br><code>u</code> または <code>v</code> フラグが必須 || <u>/\p{Script=Hiragana}/u</u> は "あ" にマッチ
|}
</center>
<br>
==== 量指定子 ====
量指定子は、直前のパターンが何回繰り返されるかを指定する。<br>
<br>
デフォルトは <u>貪欲マッチ (できるだけ多くの文字にマッチ)</u> であり、<code>?</code> を追加すると <u>非貪欲マッチ (できるだけ少ない文字にマッチ)</u> になる。<br>
<br>
<center>
{| class="wikitable"
|+ 量指定子一覧
! パターン !! 説明 !! 例
|-
| <code>*</code> || 0回以上繰り返す。(貪欲) || <u>/a*/</u> は "", "a", "aaa" にマッチ
|-
| <code>+</code> || 1回以上繰り返す。(貪欲) || <u>/a+/</u> は "a", "aaa" にマッチ
|-
| <code>?</code> || 0回または1回 (貪欲) || <u>/a?/</u> は "", "a" にマッチ
|-
| <code>{n}</code> || n回繰り返す。 || <u>/a{3}/</u> は "aaa" にのみマッチ
|-
| <code>{n,}</code> || n回以上繰り返す。(貪欲) || <u>/a{2,}/</u> は "aa", "aaa" にマッチ
|-
| <code>{n,m}</code> || n回以上m回以下繰り返す。(貪欲) || <u>/a{2,4}/</u> は "aa", "aaa", "aaaa" にマッチ
|-
| <code>*?</code> || 0回以上繰り返す。(非貪欲) || <u>/a*?/</u> は最小限の文字にマッチ
|-
| <code>+?</code> || 1回以上繰り返す。(非貪欲) || <u>/a+?/</u> は最小限の文字にマッチ
|-
| <code>??</code> || 0回または1回 (非貪欲) || <u>/a??/</u> は、まず0回を試みる。
|}
</center>
<br>
 <syntaxhighlight lang="javascript">
 // 貪欲マッチ vs 非貪欲マッチ
 const str = "<a>hello</a>";
 
 console.log(str.match(/<.+>/)[0]);   // "<a>hello</a>" (貪欲: 最大限マッチ)
 console.log(str.match(/<.+?>/)[0]);  // "<a>"          (非貪欲: 最小限マッチ)
 
 // 量指定子の例
 const re1 = /\d{4}/;    // ちょうど4桁の数字
 const re2 = /\d{2,4}/;  // 2〜4桁の数字
 
 console.log(re1.test("2025"));       // true
 console.log(re1.test("123"));        // false
 console.log(re2.test("12"));         // true
 console.log(re2.test("12345"));      // true (最初の4桁にマッチ)
 </syntaxhighlight>
<br>
==== アンカー ====
アンカーは、文字列内の特定の位置にマッチするパターンであり、文字自体にはマッチしない。<br>
<br>
* <code>^</code>
*: 文字列の先頭にマッチする。
*: <code>m</code> フラグ使用時は各行の先頭にマッチする。
*: <br>
* <code>$</code>
*: 文字列の末尾にマッチする。
*: <code>m</code> フラグ使用時は各行の末尾にマッチする。
*: <br>
* <code>\b</code>
*: 単語の境界にマッチする。
*: 単語文字 (<code>\w</code>) と非単語文字の間の位置を指す。
*: <br>
* <code>\B</code>
*: 単語の境界以外の位置にマッチする。
<br>
 <syntaxhighlight lang="javascript">
 // ^ と $ による完全一致バリデーション
 const re = /^\d{3}-\d{4}$/;
 console.log(re.test("123-4567"));        // true
 console.log(re.test("X123-4567"));       // false (先頭が数字でない)
 console.log(re.test("123-4567 extra"));  // false (末尾に余分な文字)
 
 // mフラグで複数行対応
 const multiLine = "first line\nsecond line";
 console.log(multiLine.match(/^\w+/gm));  // ["first", "second"]
 
 // \bによる単語境界マッチ
 const str = "cat concatenate cats";
 console.log(str.match(/\bcat\b/g));      // ["cat"] (単独の "cat" のみ)
 console.log(str.match(/cat/g));          // ["cat", "cat", "cat"] (全ての "cat")
 </syntaxhighlight>
<br>
==== 選択とグループ化 ====
選択 (<code>|</code>) は複数のパターンのいずれかにマッチし、グループ化 (<code>(?:...)</code>) は非キャプチャグループを作成する。<br>
<br>
 <syntaxhighlight lang="javascript">
 // 選択 (|): 複数のパターンのいずれかにマッチ
 const re1 = /cat|dog|bird/;
 console.log(re1.test("I have a cat"));         // true
 console.log(re1.test("I have a fish"));        // false
 
 // グループ化で量指定子を適用
 const re2 = /(ha)+/;   // "ha" の繰り返し
 console.log(re2.test("hahaha"));  // true
 
 // 非キャプチャグループ (?:...)
 const re3 = /(?:https?|ftp):\/\//;
 console.log(re3.test("https://example.com"));  // true
 console.log(re3.test("ftp://example.com"));    // true
 
 // 選択とグループ化の組み合わせ
 const re4 = /^(?:Mr|Mrs|Ms)\.?\s+[A-Z][a-z]+/;
 console.log(re4.test("Mr. Smith"));            // true
 console.log(re4.test("Mrs Johnson"));          // true
 </syntaxhighlight>
<br><br>

== キャプチャグループ ==
==== 番号付きキャプチャグループ ====
括弧 <code>(...)</code> で囲んだ部分はキャプチャグループとなり、マッチした文字列を後で参照できる。<br>
<br>
グループは左から順に 1, 2, 3 ... と番号が付けられ、<code>match()</code> や <code>exec()</code> の結果配列のインデックスで参照できる。<br>
<br>
 <syntaxhighlight lang="javascript">
 // 基本的なキャプチャグループ
 const re = /(\d{4})-(\d{2})-(\d{2})/;
 const match = re.exec("2025-02-20");
 
 console.log(match[0]);        // "2025-02-20" (全体マッチ)
 console.log(match[1]);        // "2025"       (グループ1: 年)
 console.log(match[2]);        // "02"         (グループ2: 月)
 console.log(match[3]);        // "20"         (グループ3: 日)
 
 // キャプチャグループを使用した置換
 const date      = "2025-02-20";
 const formatted = date.replace(/(\d{4})-(\d{2})-(\d{2})/, "$3/$2/$1");
 console.log(formatted);       // "20/02/2025"
 
 // ネストしたキャプチャグループ
 const reNested    = /(a(b))(c)/;
 const matchNested = reNested.exec("abc");
 console.log(matchNested[0]);  // "abc"
 console.log(matchNested[1]);  // "ab"  (外側のグループ)
 console.log(matchNested[2]);  // "b"   (内側のグループ)
 console.log(matchNested[3]);  // "c"
 </syntaxhighlight>
<br>
==== 名前付きキャプチャグループ ====
名前付きキャプチャグループ (<code>(?<name>pattern)</code>) は、ES2018で導入された機能である。<br>
<br>
グループに名前を付けることにより、番号ではなく名前で結果にアクセスでき、コードの可読性が向上する。<br>
<br>
マッチ結果の <code>groups</code> プロパティから名前でアクセスできる。<br>
<br>
 <syntaxhighlight lang="javascript">
 // 名前付きキャプチャグループ (ES2018)
 const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
 const match = re.exec("2025-02-20");
 
 // groupsプロパティから名前でアクセス
 console.log(match.groups.year);             // "2025"
 console.log(match.groups.month);            // "02"
 console.log(match.groups.day);              // "20"
 
 // 分割代入と組み合わせる
 const { year, month, day } = match.groups;
 console.log(`${year}年${month}月${day}日`);  // "2025年02月20日"
 
 // 名前付きグループを使用した置換 ($<name>)
 const date      = "2025-02-20";
 const formatted = date.replace(
    /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/,
    "$<year>年$<month>月$<day>日"
 );
 console.log(formatted);                     // "2025年02月20日"
 
 // matchAllでの使用
 const str = "2025-01-01 and 2025-12-31";
 for (const match of str.matchAll(/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g)) {
    console.log(match.groups);
 }
 // { year: "2025", month: "01", day: "01" }
 // { year: "2025", month: "12", day: "31" }
 </syntaxhighlight>
<br>
==== 後方参照 ====
後方参照は、同じ正規表現内で以前にマッチしたキャプチャグループの内容を再度参照する機能である。<br>
<br>
番号付きグループは <code>\1</code>, <code>\2</code> で参照し、名前付きグループは <code>\k&lt;name&gt;</code> で参照する。<br>
<br>
 <syntaxhighlight lang="javascript">
 // 番号付き後方参照
 // 同じ文字の繰り返しを検出
 const reDouble = /(\w)\1/;
 console.log(reDouble.test("aa"));           // true  ("a" が2回)
 console.log(reDouble.test("ab"));           // false (異なる文字)
 console.log(reDouble.test("lool"));         // true  ("o" が2回)
 
 // 開始タグと終了タグが一致するHTMLタグのマッチ
 const reTag = /<(\w+)>.*<\/\1>/;
 console.log(reTag.test("<p>Hello</p>"));    // true
 console.log(reTag.test("<p>Hello</div>"));  // false (タグが不一致)
 
 // 名前付き後方参照 (\k<name>)
 const reNamed = /(?<word>\w+) \k<word>/;
 console.log(reNamed.test("hello hello"));   // true (同じ単語の繰り返し)
 console.log(reNamed.test("hello world"));   // false
 </syntaxhighlight>
<br><br>

== 先読みと後読み ==
==== 肯定先読みと否定先読み ====
先読み (Lookahead) は、特定のパターンの後に何が続くかを条件としてマッチを行う。<br>
<br>
先読み自体は文字を消費しない (ゼロ幅アサーション) ため、マッチした文字列には先読みの内容が含まれない。<br>
<br>
<center>
{| class="wikitable"
|+ 先読みアサーションの種類
! 種類 !! 構文 !! 説明
|-
| 肯定先読み || <code>(?=...)</code> || 指定したパターンが後に続く場合にマッチする。
|-
| 否定先読み || <code>(?!...)</code> || 指定したパターンが後に続かない場合にマッチする。
|}
</center>
<br>
 <syntaxhighlight lang="javascript">
 // 肯定先読み (?=...) : 後に特定のパターンが続く場合にマッチ
 const str = "100px 200em 300px";
 const re1 = /\d+(?=px)/g;                    // px が後に続く数字にマッチ
 console.log(str.match(re1));                 // ["100", "300"]
 
 // 否定先読み (?!...) : 後に特定のパターンが続かない場合にマッチ
 const re2 = /\d+(?!px)/g;   // px が後に続かない数字にマッチ
 console.log(str.match(re2));                 // ["200", "10", "30"] (部分マッチを含む)
 
 // パスワード強度チェック (複数の先読みを組み合わせる)
 const passwordRe = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{8,}$/;
 console.log(passwordRe.test("Password1"));   // true
 console.log(passwordRe.test("password1"));   // false (大文字なし)
 console.log(passwordRe.test("PASSWORD1"));   // false (小文字なし)
 console.log(passwordRe.test("Pass"));        // false (8文字未満)
 
 // 数値のカンマ区切り
 const num       = "1234567890";
 const formatted = num.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 console.log(formatted);                      // "1,234,567,890"
 </syntaxhighlight>
<br>
==== 肯定後読みと否定後読み ====
後読み (Lookbehind) は、特定のパターンの前に何があるかを条件としてマッチを行う。<br>
<br>
ES2018で導入された機能であり、Chrome v62+, Firefox v78+, Safari v16.6+ でサポートされている。<br>
<br>
後読みも先読みと同様にゼロ幅アサーションであり、マッチした文字列に後読みの内容は含まれない。<br>
<br>
<center>
{| class="wikitable"
|+ 後読みアサーションの種類
! 種類 !! 構文 !! 説明
|-
| 肯定後読み || <code>(?&lt;=...)</code> || 指定したパターンが前にある場合にマッチする。
|-
| 否定後読み || <code>(?&lt;!...)</code> || 指定したパターンが前にない場合にマッチする。
|}
</center>
<br>
 <syntaxhighlight lang="javascript">
 // 肯定後読み (?<=...) : 前に特定のパターンがある場合にマッチ
 const str = "$100 £200 $300";
 const re1 = /(?<=\$)\d+/g;        // $ の後に続く数字にマッチ
 console.log(str.match(re1));      // ["100", "300"]
 
 // 否定後読み (?<!...) : 前に特定のパターンがない場合にマッチ
 const re2 = /(?<!\$)\d+/g;        // $ の後でない数字にマッチ
 console.log(str.match(re2));      // ["200"]
 
 // 実用例 : プレフィックスを除いた値の抽出
 const prices  = "Price: $50, Discount: -$10, Total: $40";
 const amounts = prices.match(/(?<=\$)\d+/g);
 console.log(amounts);             // ["50", "10", "40"]
 
 // 先読みと後読みの組み合わせ
 const str2 = "start_content_end";
 const re3  = /(?<=start_).+(?=_end)/;
 console.log(str2.match(re3)[0]);  // "content"
 </syntaxhighlight>
<br><br>

== ES2025の新機能 ==
==== RegExp.escape ====
<code>RegExp.escape(string)</code> は、文字列内の正規表現の特殊文字をエスケープする静的メソッドである。<br>
<br>
ES2025で正式採用された。<br>
<br>
ユーザ入力や動的なデータを正規表現のパターンとして使用する時、<br>
特殊文字 (<code>*</code>, <code>+</code>, <code>?</code>, <code>.</code>, <code>(</code>, <code>)</code> 等) をエスケープしないと意図しないマッチングが発生する場合がある。<br>
<br>
<code>RegExp.escape()</code> を使用することにより、この問題を安全に解決できる。<br>
<br>
Webブラウザの対応状況は、Safari、Firefoxが対応済みであり、Chromeへの実装提案が2025年2月時点で着陸している。<br>
<br>
 <syntaxhighlight lang="javascript">
 // RegExp.escape()の基本的な使用方法
 const userInput = "a*b.c+d";
 const escaped = RegExp.escape(userInput);
 console.log(escaped);                             // "a\*b\.c\+d" (特殊文字がエスケープされる)
 
 // 動的なパターン生成での活用
 const keyword = "price (USD)";
 const re = new RegExp(RegExp.escape(keyword), "i");
 console.log(re.test("Total price (USD): $100"));  // true
 
 // RegExp.escape()を使わない危険な例
 const dangerInput = ".*";
 const dangerRe = new RegExp(dangerInput);
 console.log(dangerRe.test("anything"));           // true (意図しない全マッチ)
 
 // RegExp.escape()を使用した安全な例
 const safeInput = ".*";
 const safeRe = new RegExp(RegExp.escape(safeInput));
 console.log(safeRe.test("anything"));             // false
 console.log(safeRe.test(".*"));                   // true (リテラルとしてマッチ)
 </syntaxhighlight>
<br>
==== 正規表現パターン修飾子 ====
正規表現パターン修飾子は、正規表現全体ではなく特定のサブ式にのみフラグを適用する機能である。<br>
<br>
シンタックスは、<code>(?flags:subexpression)</code> であり、<code>-</code> を使用してフラグを無効化することもできる。<br>
<br>
Stage 4として2024年10月8日に承認され、ES2025に採用された。<br>
<br>
サポートされるフラグは、<code>i</code> (大文字・小文字区別なし)、<code>m</code> (複数行)、<code>s</code> (ドットオール) の3種類である。<br>
<br>
 <syntaxhighlight lang="javascript">
 // 基本的な使用方法 : サブ式にのみ i フラグを適用
 const re1 = /^x(?i:HELLO)x$/;
 console.log(re1.test("xhellox"));  // true  (HELLOが大文字小文字区別なし)
 console.log(re1.test("XhelloX"));  // false (xは大文字小文字を区別する)
 
 // - でフラグを無効化 (正規表現全体にiフラグを付けつつ、部分的に無効化)
 const re2 = /^(?-i:X)hello$/i;     // 全体はiフラグ、Xの部分のみ区別あり
 console.log(re2.test("Xhello"));   // true
 console.log(re2.test("xhello"));   // false (小文字xはマッチしない)
 
 // 複数フラグの組み合わせ
 const re3 = /start(?im:^data)end/;
 // mフラグとiフラグを部分的に適用
 
 // 実用例 : 大文字小文字を部分的に区別するパターン
 const logRe = /\[ERROR\](?i: .+)/;
 console.log(logRe.test("[ERROR] something went wrong"));  // true
 console.log(logRe.test("[ERROR] FATAL ERROR OCCURRED"));  // true
 console.log(logRe.test("[error] something went wrong"));  // false
 </syntaxhighlight>
<br><br>

== パターン例 ==
==== バリデーション ====
正規表現はフォーム入力のバリデーションに広く使用される。<br>
<u>ただし、URLのバリデーションには <code>URL</code> オブジェクトの使用を推奨する。</u><br>
<br>
<center>
{| class="wikitable"
|+ バリデーション用正規表現パターン
! 用途 !! パターン !! 備考
|-
| メールアドレス || <code>/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/</code> || 基本的なメール形式の検証
|-
| 電話番号 (国際形式) || <code>/^\+?[1-9]\d{1,14}$/</code> || E.164形式に準拠
|-
| 郵便番号 (日本) || <code>/^\d{3}-?\d{4}$/</code> || ハイフンあり・なし両対応
|-
| 半角英数字のみ || <code>/^[a-zA-Z0-9]+$/</code> || パスワード文字種の確認
|-
| URLの簡易チェック || <code>/^https?:\/\/.+/</code> || URL オブジェクト使用を推奨
|-
| 日付 (YYYY-MM-DD) || <code>/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/</code> || 月・日の範囲チェック付き
|-
| 16進数カラーコード || <code>/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/</code> || 3桁・6桁に対応
|-
| 日本語文字の検出 || <code>/[\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Han}]/u</code> || u フラグ必須
|}
</center>
<br>
 <syntaxhighlight lang="javascript">
 // メールアドレスのバリデーション
 const emailRe = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 console.log(emailRe.test("user@example.com"));  // true
 console.log(emailRe.test("invalid@"));          // false
 
 // 日本の郵便番号
 const zipRe = /^\d{3}-?\d{4}$/;
 console.log(zipRe.test("123-4567"));            // true
 console.log(zipRe.test("1234567"));             // true
 
 // 日本語文字の検出
 const jpRe = /[\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Han}]/u;
 console.log(jpRe.test("Hello World"));          // false
 console.log(jpRe.test("こんにちは"));           // true
 console.log(jpRe.test("漢字テスト"));           // true
 
 // パスワード強度チェック (大文字・小文字・数字を各1文字以上含む8文字以上)
 const passRe = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{8,}$/;
 console.log(passRe.test("Password1"));          // true
 console.log(passRe.test("weakpass"));           // false
 </syntaxhighlight>
<br>
==== 文字列の加工 ====
正規表現はテキストの変換や抽出にも活用できる。<br>
<br>
 <syntaxhighlight lang="javascript">
 // 数値のカンマ区切りフォーマット
 function formatNumber(num) {
    return String(num).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
 console.log(formatNumber(1234567));  // "1,234,567"
 
 // HTMLのエスケープ
 function escapeHtml(str) {
    return str
       .replace(/&/g, "&amp;")
       .replace(/</g, "&lt;")
       .replace(/>/g, "&gt;")
       .replace(/"/g, "&quot;")
       .replace(/'/g, "&#039;");
 }
 console.log(escapeHtml('<script>alert("XSS")</script>'));
 // &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;
 
 // キャメルケースをスネークケースに変換
 function toSnakeCase(str) {
    return str
       .replace(/([A-Z])/g, "_$1")
       .toLowerCase()
       .replace(/^_/, "");
 }
 console.log(toSnakeCase("helloWorldFoo"));  // "hello_world_foo"
 
 // スネークケースをキャメルケースに変換
 function toCamelCase(str) {
    return str.replace(/_([a-z])/g, (match, char) => char.toUpperCase());
 }
 console.log(toCamelCase("hello_world_foo"));  // "helloWorldFoo"
 
 // 連続する空白を1つにまとめる
 const str = "Hello   World    JavaScript";
 console.log(str.replace(/\s+/g, " "));  // "Hello World JavaScript"
 
 // URLからドメイン名を抽出
 const url    = "https://www.example.co.jp/path?query=value";
 const domain = url.match(/^https?:\/\/([^/]+)/)[1];
 console.log(domain);  // "www.example.co.jp"
 </syntaxhighlight>
<br><br>

== 関連情報 ==
* [[JavaScriptの基礎 - 文字列]]
*: テンプレートリテラル、文字列メソッド、タグ付きテンプレートリテラル
* [[JavaScriptの基礎 - エラーハンドリング]]
*: try / catch、カスタムエラー、エラーの伝播
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Web]]