メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
開発・コード変換
/
正規表現ビジュアライザー
{}
正規表現ビジュアライザー
dev/regex-visualizer
正規表現を文字クラス、量指定子、グループ、アンカーなどのトークンへ分解し、色付きラベルと解説行で表示します。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
正規表現ビジュアライザーでは、正規表現を文字クラス、量指定子、グループ、アンカーなどのトークンへ分解し、色付きラベルと解説行で表示します。
関連する観点として 正規表現 図解、regex 解説、正規表現ビジュアライザー を確認し、結果をコピーして別の作業に使えます。
正規表現
アンカー
文字クラス
量指定子
リテラル
エスケープ
^
[a-zA-Z0-9]
+
@
\w
+
\.
\w
{2,}
$
解説
^
アンカー
行頭
[a-zA-Z0-9]
文字クラス
文字クラス
+
量指定子
1回以上
@
リテラル
リテラル: @
\w
文字クラス
単語文字 [a-zA-Z0-9_]
+
量指定子
1回以上
\.
エスケープ
エスケープ: .
\w
文字クラス
単語文字 [a-zA-Z0-9_]
{2,}
量指定子
2回以上
$
アンカー
行末
使い方
「正規表現」欄に確認したいパターンを入力します。初期値は ^[a-zA-Z0-9]+@\w+\.\w{2,}$ です。
上部の凡例で、文字クラス、量指定子、グループ、アンカー、選択など入力に含まれた種類を確認します。
色付きチップの並びで、正規表現がどの単位に分解されたかを見ます。
下の「解説」リストで各トークンのラベルを読み、構文エラー検出や一致テストは別ツールで確認します。
入力例・出力例
INPUT
^abc$
OUTPUT
^: アンカー/行頭, a: リテラル/リテラル: a, b: リテラル/リテラル: b, c: リテラル/リテラル: c, $: アンカー/行末
行頭・行末とリテラル文字に分かれます。
INPUT
\d{2,4}
OUTPUT
\d: 文字クラス/数字 [0-9], {2,4}: 量指定子/2~4回
基本エスケープと範囲量指定子を読み取ります。
INPUT
(?:a|b)+?
OUTPUT
(?:: グループ/非キャプチャグループ開始, a: リテラル/リテラル: a, |: 選択/または, b: リテラル/リテラル: b, ): グループ/グループ終了, +?: 量指定子/1回以上 (最小)
実装は非キャプチャ開始を文字列 '(?:' のチップとして扱います。
よくある利用シーン
長い正規表現を読む前に、文字クラス、量指定子、グループの位置を視覚的に分けたいとき。
初学者へ \d、{2,4}、(?:...)、| のような部品名を説明したいとき。
鉄道図までは不要で、トークン単位のラベルだけを素早く確認したいとき。
正規表現テスター
で一致確認する前に、入力した構造が意図どおり分解されるか見たいとき。
結果確認のポイント
構文、引用符、改行、エスケープが利用先の仕様に合っているか確認してください。
正規表現 図解、regex 解説、正規表現ビジュアライザーの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
本番の秘密情報、APIキー、パスワードは入力しないでください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
正規表現ビジュアライザーの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
鉄道図(Railroad Diagram)を生成しますか?
いいえ。現行実装は鉄道図を描かず、入力文字列をアンカー、文字クラス、量指定子、グループ、選択、エスケープ、リテラルなどのトークンへ分解して、色付きチップと解説行で表示します。
どのフラグに対応していますか?
フラグ欄や末尾フラグの解析はありません。`/abc/gi` のように入力すると、スラッシュや `g`、`i` も通常の文字としてトークン分解されます。大文字小文字無視やmultilineなどの挙動は反映されません。
エラーになるパターンは検出できますか?
JavaScriptのRegExp構文としてコンパイルしていないため、構文エラーの検出は行いません。括弧や文字クラスが不完全でも、実装が読める範囲でトークン化します。一致テストや構文検証はRegexテスターで確認してください。
関連ツール
JSON整形ツール
JSONの整形(Pretty Print)・圧縮・バリデーション・ツリービュー表示。構文エラーの位置表示、YAML変換にも対応。
正規表現テスター
正規表現のリアルタイムテスト。マッチ箇所のハイライト、グループキャプチャ表示、よく使うパターンのチートシート付き。
CSV→JSON変換
CSVファイル・テキストをJSON形式に変換。配列/オブジェクト形式の選択、ヘッダー行の自動認識にも対応。
JSON→CSV変換
JSONデータをCSV形式に変換。配列やネストしたJSONにも対応。
UUID生成ツール
UUID v4をワンクリックで生成。ハイフンなし、大文字、小文字など各種フォーマット対応。一括100個まで生成可能。
タイムスタンプ変換
UNIXタイムスタンプと人間が読める日時形式を相互変換。秒・ミリ秒に対応(マイクロ秒・ナノ秒は非対応)。ログ解析やAPI開発のデバッグに。
ASCIIコード表
ASCIIコード(0-127)の文字・10進数・16進数・2進数の一覧表。
アクセシビリティチェックリスト
Webアクセシビリティ(WCAG 2.1)の主要チェック項目を一覧表示する。