使い方

左上の入力欄に正規表現パターンを入力しよう（まずプリセットボタンを試してみよう！）
右のテスト文字列を変えると、マッチする箇所が即座に黄色でハイライトされるよ
g・i・m フラグのチェックを切り替えて、マッチの変化を確認しよう

パターンが「見える」と理解が変わる

正規表現は書き方を覚えるだけだと「なんとなく動いてる」状態になりがち。 [a-z]+ と書いたとき、実際にどの部分がマッチしているのか目で確認できると、パターンの意味が腑に落ちる。

このビジュアライザーは、マッチ箇所を黄色でハイライトするから「ここがマッチしてる」「ここはマッチしてない」が一目瞭然。パターンを1文字変えるたびにハイライトが変わるので、「この記号を足すとどう変わるか」を実験しながら学べる。

学習のステップとして使う

教科書のパターンを試す — 「\\d3-\\d4 は郵便番号にマッチする」と書いてあっても、実際に試さないとピンとこない。テスト文字列に「100-0001」と入れてハイライトされるのを見れば納得できる。
フラグの効果を体感する — g フラグをON/OFFして「全部マッチ」と「最初の1つだけ」の違いを目で確認。i フラグで大文字小文字の区別がなくなる様子も見える。
量指定子の違いを比較する — a+（1回以上）と a*（0回以上）と a?（0回か1回）で、マッチ範囲がどう変わるか並べて確認できる。
正規表現テスターに進む前の準備 — 基本を理解したら、正規表現テスターで置換やグループなど実践的な機能を使ってみよう。

よくある質問

Q. 正規表現テスターとの違いは？: このビジュアライザーは「学習・理解」に特化。マッチ箇所のハイライトでパターンの動きを視覚的に学べる。正規表現テスターは「実用」向けで、置換・グループ抽出・複数フラグの組み合わせなど本格機能がある。
Q. \\d と [0-9] は同じ？: ほぼ同じ。\\d は「数字1文字」のショートハンド。厳密にはUnicode環境で全角数字にもマッチする場合があるけど、通常の用途では同じと考えて問題ない。
Q. エラーが出て赤くなったけど何が悪い？: 正規表現の構文エラー。よくある原因は「括弧の閉じ忘れ」「\\ の後に何もない」「* や + の前にパターンがない」など。エラーメッセージを読めばヒントが書いてある。

正規表現についてもっと学ぼう

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

// メールアドレスの検証
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
emailRegex.test('user@example.com'); // true

// 電話番号（ハイフンあり/なし）
const phoneRegex = /^\d{2,4}-?\d{2,4}-?\d{4}$/;

// URLの検出
const urlRegex = /https?:\/\/[\w\-]+(\.[\w\-]+)+[\w\-.,@?^=%&:/~+#]*$/;

// HTMLタグの除去
const text = 'Hello'.replace(/<[^>]*>/g, ''); // 'Hello'

// 数字だけ抽出
'abc123def456'.match(/\d+/g); // ['123', '456']

// 先頭・末尾の空白を除去（trimと同じ）
'  hello  '.replace(/^\s+|\s+$/g, ''); // 'hello'

上のビジュアライザーにこれらのパターンを入力して、マッチする部分を確認してみましょう。

詰まったら、ここから質問してね ❓

僕が直接返事するので、数日以内に届きます。

質問フォームへ

正規表現ビジュアライザー

パターンを入力

フラグ

プリセット

テスト文字列

マッチ結果

使い方

パターンが「見える」と理解が変わる

学習のステップとして使う

よくある質問

正規表現についてもっと学ぼう

関連ツール

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