🚂
regex visualizer,
正規表示式視覺化工具
將正規表示式模式視覺化為鐵路圖。
在測試字串上即時醒目提示比對結果。
🚂
鐵路圖
將正則結構視覺化為流程圖
⚡
即時比對
即時查看比對結果的更新
🔒
完全本地端執行
正則和測試字串絕對不會傳送到伺服器
正規表示式 (Regular Expression)
/ /
鐵路圖 (Railroad Diagram)
載入函式庫中...
測試字串
比對結果
🔒正規表示式和測試字串絕對不會傳送到任何伺服器。* 備註：鐵路圖功能使用了 Regulex (CDN)。
about,
關於
一個將正規表示式渲染為鐵路圖（語法圖）並顯示即時比對結果的開發者工具。現有的 regex-checker 僅支援模式測試。此工具專為視覺化正則結構而設計——這是一個完全獨立的功能。
how to,
使用方法
STEP 1
輸入正規表示式
輸入模式並設定旗標。可以嘗試點擊範例按鈕來開始。
STEP 2
閱讀圖表
鐵路圖將正則結構視覺化為路徑流程圖。
STEP 3
測試與匯出
輸入測試字串以查看即時比對結果，然後匯出 SVG 圖表。
glossary,
名詞解釋
- 正規表示式 (Regex)
- 用於描述文字模式的一種形式語言。在 JavaScript 中，寫法為 /pattern/flags。
- 鐵路圖 (Railroad Diagram)
- 語法/文法的視覺化表示法。以有向路徑的形式顯示分支、重複和順序。
- 擷取群組 (Capture Group)
- 用括號 () 擷取比對到的文字，以供後向引用或透過 $1、$2 等變數在取代時使用。
- 量詞 (Quantifier)
- 指定重複次數：* (0 次以上)、+ (1 次以上)、? (0 次或 1 次)、{n,m} (n 到 m 次)。
- 字元類別 (Character Class)
- [ ] 會比對列出的任何字元。[a-z] = 小寫字母，[^0-9] = 非數字。
- 前瞻 / 後顧 (Lookahead / Lookbehind)
- (?=...) 和 (?<=...) 斷言比對位置之前/之後的條件，且不會消耗字元。
- 旗標 (g/i/m/s/u)
- g=全域，i=忽略大小寫，m=多行，s=dotAll，u=Unicode 模式。
faq,
常見問題
- Q.這與 regex-checker 有什麼不同？
- regex-checker 著重於測試和顯示比對結果。此工具的主要功能是將結構視覺化的鐵路圖 (Railroad Diagram)。
- Q.支援哪些正規表示式語法？
- ES2024 JavaScript 正規表示式語法，包含前瞻 (lookahead)、後顧 (lookbehind) 以及命名擷取群組。
- Q.我的資料會傳送到伺服器嗎？
- 不會。所有的處理都在您的瀏覽器中本地執行。
- Q.會有 ReDoS 風險嗎？
- 可能會導致災難性回溯的模式可能會讓瀏覽器變慢。請先使用簡短的字串進行測試。
- Q.需要連上網路嗎？
- 鐵路圖的函式庫是從 CDN 載入的。不過比對測試功能在離線狀態下也能運作。
use cases,
使用場景
📚
學習 Regex
透過將結構視為圖表，以視覺化的方式理解複雜的模式。
🐛
模式除錯
在將其用於實際程式碼之前，先驗證模式是否如預期建構。
👨🏫
團隊文件
在 Pull Request 或技術文件中分享 SVG 圖表，以解釋正則邏輯。
📋
API 規格圖表
將 SVG 圖表嵌入規格文件中以求清晰。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback sent successfully. Thank you for your cooperation!
An error occurred. Please try again later.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.