JavaScript | 正規表現オブジェクト

JavaScript

2020.09.072025.11.09

はじめに
1. 正規表現の作り方
  1. リテラル記法（いちばん簡単）
  2. コンストラクタ記法（動的に作る）
よく使うフラグ（オプション）
基本メソッドと使い方
よく使うパターン（最小セット）
例題で身につける
つまずきやすいポイント
ミニ演習（手を動かして覚える）
次に進むためのコツ

はじめに

正規表現は「文字のパターン」を表す小さな言語です。たとえば「メールアドレスっぽいもの」や「数字だけ」など、条件に合う文字列を素早く見つけたりチェックできます。はじめは記号が多くて難しく感じるけれど、少しずつ「型」を覚えれば、一気に手作業が減って楽になります。

正規表現の作り方

リテラル記法（いちばん簡単）

const re = /cat/;  // "cat" に一致

const re = /cat/;  // "cat" に一致

JavaScript

使いどころ: コードに固定のパターンを書きたいとき。
ポイント: スラッシュ / ... / の中に探したい文字をそのまま書く。

コンストラクタ記法（動的に作る）

const word = "cat";
const re = new RegExp(word, "i"); // 大文字小文字を区別しない

const word = "cat";
const re = new RegExp(word, "i"); // 大文字小文字を区別しない

JavaScript

使いどころ: 変数やユーザー入力からパターンを作るとき。
ポイント: 文字列として渡すので、"\\d" のようにバックスラッシュは二重にする必要がある（エスケープ）。

よく使うフラグ（オプション）

i: 大文字小文字を区別しない

/cat/i.test("Cat") // true

/cat/i.test("Cat") // true

JavaScript

g: 全体から繰り返し探す（全部見つける）

"cat, cat, dog".match(/cat/g) // ["cat","cat"]

"cat, cat, dog".match(/cat/g) // ["cat","cat"]

JavaScript

m: 複数行モード（^ と $ が各行の先頭・末尾にも効く）

"a\nb".match(/^b/m) // ["b"]

"a\nb".match(/^b/m) // ["b"]

JavaScript

基本メソッドと使い方

test(): 一致するかどうかを真偽値で確認

const re = /dog/;
re.test("hotdog") // true
re.test("cat")    // false

const re = /dog/;
re.test("hotdog") // true
re.test("cat")    // false

JavaScript

match(): 実際に一致した部分を取り出す（配列や null）

"2020-11-12".match(/\d+/g) // ["2020","11","12"]

"2020-11-12".match(/\d+/g) // ["2020","11","12"]

JavaScript

replace(): 一致した部分を置き換える

"apple, banana".replace(/\w+/g, "[fruit]") // "[fruit], [fruit]"

"apple, banana".replace(/\w+/g, "[fruit]") // "[fruit], [fruit]"

JavaScript

split(): パターンで文字列を分割

"a,b; c".split(/[;,]\s*/) // ["a","b","c"]

"a,b; c".split(/[;,]\s*/) // ["a","b","c"]

JavaScript

よく使うパターン（最小セット）

任意の1文字: .

/c.t/.test("cat") // true（c + 任意1文字 + t）

/c.t/.test("cat") // true（c + 任意1文字 + t）

JavaScript

文字のセット: [abc]（aかbかcのどれか）

/gr[ae]y/.test("gray") // true
/gr[ae]y/.test("grey") // true

/gr[ae]y/.test("gray") // true
/gr[ae]y/.test("grey") // true

JavaScript

否定セット: [^0-9]（数字以外）

/[^0-9]/.test("123a")  // true

/[^0-9]/.test("123a")  // true

JavaScript

繰り返し回数: + 1回以上、* 0回以上、? 0か1回、{n,m} n〜m回

/\d+/.test("123")    // true（数字1回以上）
/a{2,4}/.test("aaa") // true（aが2〜4回）

/\d+/.test("123")    // true（数字1回以上）
/a{2,4}/.test("aaa") // true（aが2〜4回）

JavaScript

行の先頭・末尾: ^ と $

/^hello/.test("hello world") // true（先頭がhello）
/world$/.test("hello world") // true（末尾がworld）

/^hello/.test("hello world") // true（先頭がhello）
/world$/.test("hello world") // true（末尾がworld）

JavaScript

単語境界: \b（単語の切れ目）

/\bcat\b/.test("cat.")  // true
/\bcat\b/.test("concatenate") // false

/\bcat\b/.test("cat.")  // true
/\bcat\b/.test("concatenate") // false

JavaScript

数字や空白などのショートカット:
- \d: 数字、\w: 英数字とアンダースコア、\s: 空白
- 否定は大文字（\D, \W, \S）

例題で身につける

1. 3桁の郵便番号（単純版）

条件: 数字が3つ続く文字列に一致

const re = /^\d{3}$/;
re.test("123") // true
re.test("12a") // false
re.test("1234") // false

const re = /^\d{3}$/;
re.test("123") // true
re.test("12a") // false
re.test("1234") // false

JavaScript

ポイント: 全体が3桁だけにしたいから ^ と $ で両端を固定。

2. 電話番号（ハイフン区切り、数字だけ）

例: 03-1234-5678

const re = /^\d{2,4}-\d{3,4}-\d{3,4}$/;
re.test("03-1234-5678")   // true
re.test("0120-123-456")   // true
re.test("03-1234-5678a")  // false

const re = /^\d{2,4}-\d{3,4}-\d{3,4}$/;
re.test("03-1234-5678")   // true
re.test("0120-123-456")   // true
re.test("03-1234-5678a")  // false

JavaScript

ポイント: 桁数が地域によって少し違うので {2,4} などの範囲で柔軟に。

3. メールアドレス（入門版）

ざっくり: 文字列@文字列.文字列

const re = /^[\w.-]+@[\w.-]+\.[A-Za-z]{2,}$/;
re.test("user.name@mail-example.co") // true
re.test("user@@mail.com")            // false

const re = /^[\w.-]+@[\w.-]+\.[A-Za-z]{2,}$/;
re.test("user.name@mail-example.co") // true
re.test("user@@mail.com")            // false

JavaScript

ポイント: 本格的な完全検証は難しいので、最初は「それっぽい」形でOK。

4. カンマ区切りの数値を全部取り出す

const text = "Price: 1,200 and 300 and 45,678";
const numbers = text.match(/\d{1,3}(?:,\d{3})*|\d+/g);
console.log(numbers); // ["1,200","300","45,678"]

const text = "Price: 1,200 and 300 and 45,678";
const numbers = text.match(/\d{1,3}(?:,\d{3})*|\d+/g);
console.log(numbers); // ["1,200","300","45,678"]

JavaScript

ポイント: (?: ... ) は「グループ化するけど後で参照しない」非キャプチャグループ。

5. 文頭の余分な空白を削る（トリム）

const line = "   hello world  ";
const trimmedStart = line.replace(/^\s+/, "");
console.log(trimmedStart); // "hello world  "

const line = "   hello world  ";
const trimmedStart = line.replace(/^\s+/, "");
console.log(trimmedStart); // "hello world  "

JavaScript

ポイント: ^\s+ は「先頭の空白が1回以上」。

つまずきやすいポイント

バックスラッシュの二重化: コンストラクタ記法では new RegExp("\\d+") のように書く。文字列の中で \ は特別扱いされるため。
欲張りすぎ問題（貪欲）: .* は可能な限り広く取る。必要なら「控えめ（最短一致）」の *? を使う。

"a <b> c <d>".match(/<.*>/)   // "<b> c <d>"
"a <b> c <d>".match(/<.*?>/)  // "<b>"

"a <b> c <d>".match(/<.*>/)   // "<b> c <d>"
"a <b> c <d>".match(/<.*?>/)  // "<b>"

JavaScript

全体一致のつもりが部分一致: test() は部分一致でも true。全体を縛りたいときは ^ と $ を使う。

ミニ演習（手を動かして覚える）

英数字のみのユーザー名（3〜12文字）

const re = /^[A-Za-z0-9]{3,12}$/;

const re = /^[A-Za-z0-9]{3,12}$/;

JavaScript

試す文字: “bob”, “a_b”, “User123”, “toolongusername”

YYYY-MM-DD の日付形式だけ許可

const re = /^\d{4}-\d{2}-\d{2}$/;

const re = /^\d{4}-\d{2}-\d{2}$/;

JavaScript

発展: 月は 01–12、日は 01–31 に絞るならさらに複雑になる。

文章から URL っぽいものを抜き出す（入門版）

const re = /https?:\/\/[^\s]+/g;

const re = /https?:\/\/[^\s]+/g;

JavaScript

試すテキスト: “Go to https://example.com or http://test.jp?q=1”

日本語と英数字だけ許可（記号禁止）

const re = /^[\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Han}A-Za-z0-9]+$/u;

const re = /^[\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Han}A-Za-z0-9]+$/u;

JavaScript

ポイント: Unicode 正規表現（u フラグ）で日本語スクリプトを扱える。

次に進むためのコツ

まずは「部分」から作る: いきなり完全版を狙わず、段階的に条件を足していく。
例を増やす: 通るケース・通らないケースを2〜3個ずつ用意して test() で確認。
名前をつける: 目的別に小さな関数にして再利用する。

const isPostal3 = (s) => /^\d{3}$/.test(s);

const isPostal3 = (s) => /^\d{3}$/.test(s);

JavaScript

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31