🚂
regex visualizer,
正規表現ビジュアライザー
正規表現をRailroad Diagramで視覚化。
テスト文字列とのマッチ結果もリアルタイム表示。
🚂
Railroad Diagram
正規表現の構造をフローチャート風に図示
⚡
リアルタイムマッチ
テスト文字列とのマッチ結果を即時表示
🔒
完全ローカル処理
正規表現・文字列はサーバーに送信されません
正規表現
/ /
Railroad Diagram
ライブラリ読み込み中…
テスト文字列
マッチ結果
🔒正規表現・テスト文字列はサーバーに送信されずブラウザで処理されます。※Railroad Diagram生成には Regulex (CDN) を使用しています。
about,
概要
正規表現ビジュアライザーは、正規表現パターンをRailroad Diagram(鉄道図)で視覚化し、構造を直感的に理解できるツールです。テスト文字列とのマッチ結果もリアルタイムに表示。旧サイトのregex-checkerはテスト機能のみで図示機能はなく、本ツールは「視覚化」に特化した完全新規の機能です。
how to,
使い方
STEP 1
正規表現を入力
正規表現パターンとフラグを入力します。例ボタンもご利用ください。
STEP 2
Railroad Diagramで構造確認
正規表現の構造がフローチャート形式で可視化されます。
STEP 3
テスト文字列でマッチ検証
テキストを入力してマッチ結果をリアルタイム確認。SVGも取得可能。
glossary,
用語集
- 正規表現(regex/regexp)
- 文字列のパターンを表す文法。JSでは /pattern/flags の形式で記述。
- Railroad Diagram
- 正規表現の構造を鉄道路線図のように図示したもの。分岐・繰り返し・連結が視覚的に把握できる。
- キャプチャグループ
- 括弧 () で囲まれた部分。マッチした文字列を後方参照や置換でキャプチャ。
- 量指定子
- 繰り返し回数の指定子。* (0以上)、+ (1以上)、? (0または1)、{n,m} (n〜m回)。
- 文字クラス
- [ ] で表す文字集合。[a-z] は小文字アルファベット、[^0-9] は数字以外を意味する。
- 後方参照
- \1, \2 などでキャプチャグループの結果を再利用する構文。
- 先読み/後読み
- (?=...) の先読みと (?<=...) の後読み。マッチ位置の前後条件を指定する。
- フラグ(g/i/m/s/u)
- g=全マッチ、i=大文字小文字無視、m=複数行、s=dotAll、u=Unicode対応。
faq,
FAQ
- Q.旧サイトのregex-checkerとの違いは?
- regex-checkerは「テスト・マッチ表示」のみ。本ツールはRailroad Diagram図示がメイン機能であり、視覚的な構造理解に特化しています。
- Q.どの正規表現構文に対応していますか?
- JavaScript準拠の正規表現構文に対応しています。先読み・後読みなどもサポートします。
- Q.入力した正規表現はサーバーに送信されますか?
- いいえ。すべての処理はブラウザ内で完結します。Railroad Diagramの描画もブラウザ上で行われます。
- Q.ReDoS(正規表現DOS攻撃)の対策はありますか?
- バックトラック爆発を起こす可能性のある正規表現には注意が必要です。テストは少量のテキストで試してください。実行時間が長すぎる場合は自動で中止されます。
use cases,
活用シーン
📚
正規表現の学習
複雑なパターンの構造をビジュアルで理解しながら学習。
🐛
複雑なパターンのデバッグ
意図したパターンになっているか図で確認。
👨🏫
チーム内での説明共有
Railroad Diagramを画像として共有しやすい。
📋
ドキュメントへの図の貼り付け
SVGをエクスポートして技術ドキュメントに挿入。