【JavaScript】正規表現の使い方を解説｜Webの基礎

記事内には広告が含まれます

2026年9月6日

はじめに

前回の記事では、配列（Array）の操作方法を解説しました。

今回は、文字列が特定のパターン（形式）に合っているかを調べたり、パターンに一致する部分を取り出したり置き換えたりできる正規表現（RegExp）の使い方を解説します。メールアドレスや郵便番号の形式チェックなど、フォーム入力の検証で特に役立つ機能です。

正規表現とは？

正規表現とは、文字列の「パターン（形式）」を表現するための記法です。たとえば「数字3桁＋ハイフン＋数字4桁」のような形式を、\d{3}-\d{4}という短い記法で表せます。

JavaScriptでは、スラッシュで挟んだリテラル記法で正規表現を作成します。

const pattern = /\d{3}-\d{4}/; // 数字3桁-数字4桁というパターン

VBAでも参照設定で「Microsoft VBScript Regular Expressions」を追加すればRegExpオブジェクトが使え、考え方はJavaScriptとほぼ同じです。ただしVBAでは事前の参照設定が必要なのに対し、JavaScriptは特別な準備なしで正規表現をすぐに使えます。

正規表現の基本的な書き方（リテラル記法とフラグ）

正規表現のパターンの後ろに付けるフラグによって、動作が変わります。

const patternPlain = /abc/;  // "abc"という文字列に最初に一致した箇所だけを対象にする
const patternI = /abc/i;     // 大文字・小文字を区別しない
const patternG = /abc/g;     // 文字列内のすべての一致箇所を対象にする

i（ignore case）は大文字小文字を区別しないフラグ、g（global）は一致箇所をすべて対象にするフラグです。この2つが特によく使われます。

パターンの基本要素（文字クラス・量指定子・アンカー）

正規表現でよく使う記法をまとめました。

記法	意味
`\d`	数字1文字（0〜9）
`\w`	英数字またはアンダースコア1文字
`\s`	空白文字1文字
`.`	改行以外の任意の1文字
`+`	直前の要素の1回以上の繰り返し
`*`	直前の要素の0回以上の繰り返し
`?`	直前の要素が0回または1回
`{n,m}`	直前の要素がn回以上m回以下
`^`	文字列の先頭
`$`	文字列の末尾
`[ ]`	角括弧内のいずれか1文字

これらを組み合わせて、「郵便番号は^\d{3}-\d{4}$（先頭から末尾まで数字3桁+ハイフン+数字4桁）」のようなパターンを作ります。^と$を付けないと、文字列の一部にパターンが含まれているだけで一致してしまうため、形式を厳密にチェックしたい場合は忘れずに付けましょう。

文字列が条件に合うか判定する（test）

文字列がパターンに一致するかどうかをtrue・falseで判定するにはtestメソッドを使います。

const zipPattern = /^\d{3}-\d{4}$/;

console.log(zipPattern.test("123-4567")); // true
console.log(zipPattern.test("1234567"));  // false（ハイフンがない）
console.log(zipPattern.test("123-456"));  // false（末尾の桁数が足りない）

フォームの入力チェックなど、「この形式に合っているか」だけを知りたい場面で最もよく使うメソッドです。

パターンに一致する部分を取り出す（match）

文字列の中からパターンに一致する部分そのものを取り出すにはmatchメソッドを使います。

const text = "お問い合わせは info@example.com または support@example.com まで";
const emailPattern = /[\w.-]+@[\w.-]+\.\w+/;

console.log(text.match(emailPattern));
// ["info@example.com", ...]（gフラグなしは最初の一致のみ）

const emailPatternG = /[\w.-]+@[\w.-]+\.\w+/g;
console.log(text.match(emailPatternG));
// ["info@example.com", "support@example.com"]（gフラグありで一致箇所すべてを配列で取得）

gフラグを付けるかどうかで戻り値の中身が変わる点に注意してください。付けない場合は最初の一致箇所の詳細情報（位置なども含む）、付けた場合は一致した文字列だけの配列になります。

パターンで置き換える（replace）

一致した部分を別の文字列に置き換えるには、文字列のreplaceメソッドに正規表現を渡します。

const phone = "090-1234-5678";

console.log(phone.replace(/-/, ""));  // "0901234-5678"（gフラグなしは最初の1件だけ置換）
console.log(phone.replace(/-/g, "")); // "09012345678"（gフラグで一致箇所をすべて置換）

replaceAllメソッドに正規表現を渡す場合は、必ずgフラグを付ける必要があります。付けずに渡すと「replaceAll must be called with a global RegExp」というエラーになります。文字列（例："-"）を渡す場合はこの制限はなく、常にすべての一致箇所が置き換えられます。

よく使う正規表現パターン例

実務でよく使う形式チェックのパターン例です。

用途	パターン例
メールアドレス	`/^[\w.-]+@[\w.-]+\.\w+$/`
郵便番号（ハイフンあり）	`/^\d{3}-\d{4}$/`
電話番号（ハイフンあり）	`/^0\d{1,4}-\d{1,4}-\d{4}$/`
半角数字のみ	`/^[0-9]+$/`
全角ひらがなのみ	`/^[ぁ-んー]+$/`

これらはあくまで簡易的なチェック用のパターンです。特にメールアドレスは仕様上さらに複雑な形式まで許容されるため、正規表現だけで完全に正しいかを判定するのではなく、最終的な形式の確認は送信後のサーバー側チェックと組み合わせるのが安全です。

実務サンプル（メールアドレスの入力チェック）

フォーム（formタグ）の操作を解説で紹介した入力チェックの考え方に、正規表現を組み合わせたサンプルです。メールアドレスの形式に合っていない場合はエラーメッセージを表示し、送信を止めます。

HTML

<form id="contactForm">
    <label for="email">メールアドレス</label>
    <input type="text" id="email" name="email">
    <p id="emailError" style="color: red;"></p>
    <button type="submit">送信</button>
</form>

JavaScript（main.js）

document.addEventListener("DOMContentLoaded", () => {
    const form = document.getElementById("contactForm");
    const emailInput = document.getElementById("email");
    const emailError = document.getElementById("emailError");
    const emailPattern = /^[\w.-]+@[\w.-]+\.\w+$/;

    form.addEventListener("submit", (event) => {
        const email = emailInput.value.trim();

        if (!emailPattern.test(email)) {
            event.preventDefault(); // 形式が不正な場合は送信を止める
            emailError.textContent = "メールアドレスの形式が正しくありません（例：sample@example.com）";
        } else {
            emailError.textContent = "";
        }
    });
});

testメソッドで形式をチェックし、一致しなければpreventDefaultで送信をキャンセルしてエラーメッセージを表示、一致すればそのまま送信する、というシンプルな流れです。