🚂
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 圖表嵌入規格文件中以求清晰。
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
反饋發送成功。感謝您的合作！
發生錯誤。請稍後再試。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.