【JavaScript入門】正規表現

　Web ページの開発やデータ処理をしていると、文字列を詳細に検索したり、特定のパターンで置換する機会が多く発生します。その際に非常に便利なのが 正規表現 (RegExp) です。JavaScript には正規表現が組み込まれており、検索や置換を簡単に行えます。ここでは、JavaScript の正規表現リテラルやフラグ、代表的なメタ文字（特殊記号）の意味を解説します。

１．正規表現とは

　文字列の並びを記号を用いてパターン化し、そのパターンに文字列が当てはまるかを調べたり、合致する部分を置換する手法を指します。JavaScript では、正規表現リテラル（/パターン/フラグ）または RegExp オブジェクト（new RegExp('パターン', 'フラグ')）として記述できます。通常はリテラルを使い、動的にパターンを生成したい場合に new RegExp() を選ぶことが多いです。

２．正規表現の記法とフラグ

2.1．代表的なメタ文字（特殊記号）

記号	説明
`^a`	文字列先頭に a。m フラグがあるときは行頭。
`a$`	文字列末尾に a。m フラグがあるときは行末。
`.`	任意の１文字（改行は含まない）。
`a?`	a が 0回 or 1回。
`a+`	a を 1回以上、できるだけ多く一致（最長一致）。
`a*`	a を 0回以上、できるだけ多く一致（最長一致）。
`a+?`	a を 1回以上、できるだけ少なく（最短一致）。
`a*?`	a を 0回以上、できるだけ少なく（最短一致）。
`a{n}`	a をちょうど n回。
`a{n,}`	a を n回以上。
`a{n1,n2}`	a を n1～n2回の範囲で繰り返す。
`[abc]`	a or b or c の任意の1文字。
`[^abc]`	a, b, c 以外の任意の1文字。
`[A-C]`	角括弧内の連続範囲 A ～ C の任意の1文字。
`[^A-C]`	連続範囲 A ～ C 以外の任意の1文字。
`\n`	改行。
`\d`	数字 ([0-9]) と同じ。
`\D`	数字以外 ([^0-9]) と同じ。
`\w`	英数字とアンダースコア ([A-Za-z0-9_]) と同じ。
`\W`	英数字とアンダースコア以外 ([^A-Za-z0-9_]) と同じ。
`abc	def`
`a(bc	de)f`

2.2．フラグ

フラグ	説明
g	global。すべての一致箇所を検索する。
i	ignoreCase。大文字・小文字を区別せずに検索する。
m	multiline。`^` と `$` が行頭・行末にマッチするようになる（複数行テキストの各行を対象）。
s	dotAll。`.` が改行文字にもマッチする（ES2018 で導入）。

３．サンプルコード

　以下を「myRegExpExample.html」というファイル名で保存し、ブラウザで開発者ツールのコンソールをチェックしてください。

【myRegExpExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myRegExpExample.html</title>
</head>
<body>
  <h1>正規表現のサンプル</h1>
  <p>開発者ツールのコンソールで出力を確認してください。</p>

  <script>
    // 1) 正規表現リテラルを使った検索例
    console.log('=== 正規表現リテラル ===');
    const text = 'JavaScriptは、scriptを大文字小文字を区別せず探すことができます。';
    // /script/i : "script" (大文字小文字無視)
    const pattern = /script/i;

    // matchで検索結果を確かめる
    const result = text.match(pattern);
    console.log('検索対象:', text);
    console.log('正規表現:', pattern);
    console.log('マッチ結果:', result);

    // 2) new RegExp() で動的に作成
    console.log('=== new RegExp() ===');
    const dynamicString = 'HELLO';
    // フラグなしで"HELLO"を探すパターンを動的生成
    const dynamicPattern = new RegExp(dynamicString);
    const dynamicResult = 'hello HELLO Hello'.match(dynamicPattern);
    console.log('検索対象: "hello HELLO Hello"');
    console.log('動的正規表現:', dynamicPattern);
    console.log('マッチ結果:', dynamicResult);

    // 3) 複数マッチ (フラグ g) の例
    console.log('=== フラグg (global) ===');
    const text2 = 'Apple apple AAA aPple aPPle';
    // "apple" を大小文字区別しないで探し、全マッチを取得
    const patternG = /apple/gi;
    console.log('検索対象:', text2);
    console.log('マッチ結果:', text2.match(patternG));

    // 4) メタ文字の例: 数字だけにマッチ
    console.log('=== メタ文字 (\\d) の例 ===');
    const numericPattern = /\d+/g; // 1回以上の数字
    const text3 = '商品番号: A123, 値段: 450, 在庫数: 25個';
    const foundNumbers = text3.match(numericPattern);
    console.log('検索対象:', text3);
    console.log('数字の抽出:', foundNumbers);

    // 5) 置換の例: replace() でフラグ g を使うと全て置換
    console.log('=== replace() と正規表現 ===');
    const replacePattern = /[A-Z]/g; // 大文字アルファベットを探す
    const replacedText = text3.replace(replacePattern, '[英字]');
    console.log('置換前:', text3);
    console.log('置換後:', replacedText);
  </script>
</body>
</html>

デバックコンソールの出力

=== 正規表現リテラル ===
検索対象: JavaScriptは、scriptを大文字小文字を区別せず探すことができます。
正規表現: /script/i
マッチ結果: (1) ['Script', index: 4, input: 'JavaScriptは、scriptを大文字小文字を区別せず探すことができます。', groups: undefined]
=== new RegExp() ===
検索対象: "hello HELLO Hello"
動的正規表現: /HELLO/
マッチ結果: (1) ['HELLO', index: 6, input: 'hello HELLO Hello', groups: undefined]
=== フラグg (global) ===
検索対象: Apple apple AAA aPple aPPle
マッチ結果: (4) ['Apple', 'apple', 'aPple', 'aPPle']
=== メタ文字 (\d) の例 ===
検索対象: 商品番号: A123, 値段: 450, 在庫数: 25個
数字の抽出: (3) ['123', '450', '25']
=== replace() と正規表現 ===
置換前: 商品番号: A123, 値段: 450, 在庫数: 25個
置換後: 商品番号: [英字]123, 値段: 450, 在庫数: 25個

まとめ

正規表現は、文字列の検索・置換で強力な機能を提供する。
JavaScript では /正規表現/フラグ のリテラルか、new RegExp('パターン', 'フラグ') で記述。
フラグには g（全て検索）、i（大文字小文字無視）、m（複数行対応）、s（dotAll）などがある。
メタ文字を使うことで、繰り返しや範囲、行頭行末などを表現できる。
.match(), .search(), .replace(), .split() などの String メソッドを正規表現と組み合わせると、より柔軟な文字列処理が可能。

　このように正規表現を覚えておくと、入力のバリデーションやテキスト解析、高度な検索置換などさまざまな場面で役に立つでしょう。