正規表現テスターをJavaScriptで作った話｜`.*\d+.*` が読めるようになる

こんな文字列を見たことはありませんか？

^([a-zA-Z0-9_.+-]+)@([a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+)$

「呪文？」と思うかもしれません。これは**正規表現（Regular Expression / Regex）**と呼ばれる、「文字列のパターンを表す記法」です。

メールアドレス・電話番号の検証、ログからのIPアドレス抽出、コードの一括置換——正規表現はエンジニアの仕事に欠かせません。この記事では、Lapis Tech Toolsの 正規表現テスター を題材に、正規表現の仕組みとJavaScriptでの実装を解説します。

---

1. 正規表現とは何か

正規表現は、文字列のパターンを表す「ミニ言語」です。プログラミング言語ではなく、ほぼすべての言語（JavaScript・Python・Java・Go）で共通して使える記法です。

なぜ必要なのか

// 正規表現なし：条件を全部書く
function isValidEmail(email) {
  return email.includes('@') &&
         email.includes('.') &&
         email.indexOf('@') > 0 &&
         email.lastIndexOf('.') > email.indexOf('@');
  // まだ足りない...
}

// 正規表現あり：1行で書ける
function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

複雑な文字列パターンの検証・抽出・置換を、少ないコードで正確に表現できます。

---

2. メタ文字：正規表現の「アルファベット」

正規表現はメタ文字（特殊な意味を持つ文字）の組み合わせで書きます。

文字の種類を指定する

メタ文字	意味	例
.	改行以外の任意の1文字	a.c → abc, axc
\d	数字（0〜9）	\d\d\d → 123, 456
\w	英数字とアンダースコア	\w+ → hello, user_1
\s	スペース・タブ・改行	\s+ → スペース区切り
[abc]	aまたはbまたはc	[aeiou] → 母音1文字
[a-z]	aからzの範囲	[A-Za-z] → 英字1文字
[^abc]	a・b・c以外	[^0-9] → 数字以外

繰り返し回数を指定する

メタ文字	意味	例
*	0回以上	ab*c → ac, abc, abbc
+	1回以上	ab+c → abc, abbc（acはNG）
?	0回または1回	colou?r → color, colour
{3}	ちょうど3回	\d{3} → 123
{2,4}	2〜4回	\d{2,4} → 12, 123, 1234

位置を指定する

メタ文字	意味	例
^	文字列の先頭	^Hello → 「Hello」で始まる
$	文字列の末尾	world$ → 「world」で終わる

---

3. グループとキャプチャ

() で正規表現を囲むとグループになります。

// グループなし：一致するか確認するだけ
'2026-04-10'.match(/\d{4}-\d{2}-\d{2}/)
// → ['2026-04-10']

// グループあり：年・月・日を個別に取り出せる
'2026-04-10'.match(/(\d{4})-(\d{2})-(\d{2})/)
// → ['2026-04-10', '2026', '04', '10']
//                   ↑年     ↑月   ↑日

|（パイプ）はOR条件です：

/cat|dog/.test('I have a cat') // → true
/cat|dog/.test('I have a dog') // → true

---

4. フラグ：正規表現の「オプション」

正規表現の末尾に付ける文字で、マッチの挙動を変えます。

const regex = /hello/gi
//             ↑パターン ↑フラグ

フラグ	意味	例
g	全箇所マッチ（グローバル）	デフォルトは最初の1件のみ
i	大文字・小文字を区別しない	/hello/i → Hello, HELLO
m	複数行モード（^ $ が各行に適用）	テキスト全体ではなく行ごとに判定

---

5. JavaScriptでの使い方

検証：test()

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
emailRegex.test('user@example.com');  // → true
emailRegex.test('not-an-email');      // → false

抽出：match() / matchAll()

const text = 'IPアドレス: 192.168.1.1 と 10.0.0.1 が接続しています';
const ipRegex = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/g;

text.match(ipRegex);
// → ['192.168.1.1', '10.0.0.1']

置換：replace()

// ログのタイムスタンプを伏せ字に
const log = '2026-04-10 10:30:00 - ERROR: Connection failed';
log.replace(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/, '[TIMESTAMP]');
// → '[TIMESTAMP] - ERROR: Connection failed'

---

6. リアルタイムハイライトの実装

正規表現テスターの核心は、入力と同時にマッチ箇所をハイライト表示する機能です。

仕組みの概要

入力テキスト + 正規表現
       ↓
  match() でマッチ箇所を特定
       ↓
  マッチ部分を <mark> タグで囲む
       ↓
  innerHTML としてプレビューエリアに反映

コアロジック

function highlight(text, pattern, flags) {
  // 正規表現オブジェクトを動的に生成
  let regex;
  try {
    regex = new RegExp(pattern, flags);
  } catch (e) {
    // パターンが不正な正規表現の場合はそのまま表示
    return escapeHtml(text);
  }

  // マッチ箇所を <mark> タグで囲む
  return escapeHtml(text).replace(regex, match => `<mark>${match}</mark>`);
}

// XSS対策：HTMLの特殊文字をエスケープ
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}

XSS（クロスサイトスクリプティング）とは？ ユーザーが入力した文字列をそのまま innerHTML に設定すると、<script>alert('攻撃')</script> のようなHTML/JavaScriptが実行されてしまう脆弱性です。escapeHtml() で < > & をエスケープすることで防ぎます。

マッチ件数のカウント

function countMatches(text, regex) {
  const matches = text.match(regex);
  return matches ? matches.length : 0;
}

gフラグ なしの場合は最大1件しかマッチしないため、カウントには g フラグが必須です。

---

7. よく使う正規表現パターン集

コピーしてすぐ使えるパターンです。正規表現テスターで動作確認できます。

// メールアドレス
/^[^\s@]+@[^\s@]+\.[^\s@]+$/

// 日本の電話番号（ハイフンあり）
/^0\d{1,4}-\d{1,4}-\d{4}$/

// 郵便番号
/^\d{3}-?\d{4}$/

// URLの抽出
/https?:\/\/[^\s]+/g

// IPアドレス（簡易版）
/\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b/g

// 日付（YYYY-MM-DD）
/\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])/

// クレジットカード番号の伏せ字確認
/\b\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}\b/

// 16進数カラーコード
/#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/

---

8. まとめ

学んだこと	内容
メタ文字	. \d \w [a-z] で文字の種類を表現
量指定子	* + ? {n,m} で繰り返し回数を指定
アンカー	^ $ で位置（先頭・末尾）を指定
グループ	() で部分マッチを取り出す
フラグ	g（全件）i（大小無視）m（複数行）
JS API	test() match() replace() new RegExp()
XSS対策	innerHTML に出力する前に必ずエスケープ

正規表現はすべてを覚える必要はありません。「こんなパターンがあるんだ」と知っておき、必要なときに 正規表現テスターで試しながら組み立てるのが実務的なアプローチです。

→ 正規表現テスターを使ってみる

---

ツール解説シリーズ：第1回・IP計算機 | 第2回・Base64エンコーダー | 第3回・chmod計算機 | 第4回・JSONフォーマッター | 第5回・Cronジェネレーター | 今ここ（第6回・正規表現テスター） | 第7回・UUIDジェネレーター | 第8回・Markdownプレビュー