JavaScript 正規表現チュートリアル (完全な構文 + 一般的な例)

> この記事は、JavaScript の正規表現（RegExp）の入門から応用までの完全なチュートリアルです。構文ルール、よく使われるメタ文字、フラグ、アサーション、グループ化、欲張りマッチと怠惰マッチなどの内容を含み、フロントエンド開発、スクレイピング、フォーム検証などの用途に適用可能です。初心者から上級者まで、学習や参照に適しています。

正規表現の基本構文

正規表現を作成する2つの方法

const regex1 = /abc/;             // リテラル方式
const regex2 = new RegExp('abc'); // コンストラクタ方式

よく使われるフラグ（Flags）

フラグ	説明
`g`	グローバルマッチ
`i`	大文字/小文字を区別しないマッチ
`m`	複数行マッチ
`s`	`.` が改行にもマッチすることを許可 (ES2018)
`u`	Unicodeをサポート（ES6）
`y`	スティッキーマッチ（ES6）

例：

const re = /hello/gi;
const str = 'Hello hello';
console.log(str.match(re)); // ["Hello", "hello"]

メタ文字と文字集合

よく使われるメタ文字

文字	意味
`.`	任意の一文字にマッチ（改行を除く）
`\d`	数字にマッチ [0-9]
`\D`	数字以外の文字にマッチ
`\w`	英数字またはアンダースコアにマッチ
`\W`	英数字またはアンダースコア以外の文字にマッチ
`\s`	空白文字にマッチ
`\S`	空白文字以外の文字にマッチ
`\b`	単語の境界にマッチ
`\B`	単語の境界以外にマッチ
`\\`	バックスラッシュにマッチ

文字集合と範囲

/[abc]/     // 'a' または 'b' または 'c' にマッチ
/[a-z]/     // 小文字のアルファベットにマッチ
/[A-Z]/     // 大文字のアルファベットにマッチ
/[0-9]/     // 数字にマッチ
/[^abc]/    // a b c 以外の任意の文字にマッチ

量指定子（繰り返しマッチ）

量指定子	意味
`*`	直前の要素に 0 回以上マッチ
`+`	直前の要素に 1 回以上マッチ
`?`	直前の要素に 0 回または 1 回マッチ
`{n}`	ちょうど n 回マッチ
`{n,}`	n 回以上マッチ
`{n,m}`	n 回以上 m 回以下マッチ

例：

/\d{4}/.test("2025");       // true
/ab{2,4}c/.test("abbbc");   // true

グループ化とキャプチャ

/(abc)/         // キャプチャグループ
/(abc){2}/      // 繰り返しキャプチャグループ
/(?:abc)/       // 非キャプチャグループ
/(a)(b)(c)/     // 複数のキャプチャグループ

マッチ内容の抽出：

const match = /(hello) (\w+)/.exec("hello world");
console.log(match[1]); // hello
console.log(match[2]); // world

アサーション（ゼロ幅アサーション）

先読み（Positive Lookahead）

/\d+(?=px)/     // 後ろに px が続く数字にマッチ

否定先読み（Negative Lookahead）

/\d+(?!px)/     // 後ろに px が続かない数字にマッチ

後読み（ES2018+）

/(?<=\$)\d+/    // 前に $ が続く数字にマッチ
/(?<!$)\d+/    // 前に $ が続かない数字にマッチ

欲張りマッチ vs 怠惰マッチ

式	マッチ動作
`.*`	欲張り（可能な限り多く）
`.*?`	怠惰（可能な限り少なく）

例：

const str = '<p>text</p><p>more</p>';
const greedy = /<p>.*<\/p>/;
const lazy = /<p>.*?<\/p>/g;

console.log(str.match(greedy)); // ['<p>text</p><p>more</p>']
console.log(str.match(lazy));   // ['<p>text</p>', '<p>more</p>']

よく使われる利用例

メールアドレス検証

/^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/.test("[email protected]");

携帯電話番号検証（中国大陸）

/^1[3-9]\d{9}$/.test("13888888888");

すべての空白文字を除去

const cleaned = str.replace(/\s+/g, '');

URLからドメインを抽出

const domain = url.match(/https?:\/\/([^\/]+)/)[1];

正規表現メソッドのまとめ

メソッド	説明
`test(str)`	文字列がマッチするかテスト
`exec(str)`	マッチ結果オブジェクトを返す（グループ付き）
`str.match(re)`	全てのマッチ項を返す（グローバルフラグ含む）
`str.replace()`	マッチ内容を置換
`str.split(re)`	正規表現で文字列を分割
`str.search(re)`	最初に見つかったマッチ位置を返す

まとめ

このチュートリアルでは、JavaScript 正規表現の完全な構文と実用的な応用例を体系的に整理しました。フロントエンド開発、バックエンド開発、テキスト処理など、様々な用途に適しています。正規表現をマスターすることで、文字列処理の効率を大幅に向上させることができます。

正規表現ジェネレーター

他の無料AIツールを試してみてください

Excel数式ジェネレーター

AI Excelアシスタント

SQLクエリジェネレーター

Excel VBAコードジェネレーター

Excelチャートジェネレーター

マインドマップジェネレーター