正規表示式視覺化 - 彩色的樹狀視覺化圖

← ToolBox / 正則視覺化

🔍 Regex Expression Visualization

Test regular expressions with live match highlighting and an explained breakdown, all running locally in your browser.

📐 工作原理與說明

把正規表示式解析為視覺化流程圖。

原理：把正則解析為語法樹（AST），再繪製為鐵路圖（railroad diagram）展示匹配路徑。
價值：直觀呈現分支、迴圈與可選部分，便於理解複雜正則的匹配順序。
要素：高亮分組範圍、量詞作用域與斷言位置。
用途：除錯與學習複雜表示式，降低理解和溝通成本。

正規表示式

📚 深度解析：正規表示式視覺化

💡 常見使用場景

把正則渲染成 railroad 圖理解結構。
讀懂別人留下的複雜正則：把鐵路圖鋪開，看清分支、量詞與分組的巢狀關係，再決定怎麼改。

視覺化

`a(b|c)*` → 起始 a，迴圈分支 b/c 的狀態圖。

❓ 常見問題（FAQ）

圖怎麼看？: 從左到右的軌道即匹配路徑。
為什麼圖裡出現了我沒寫的分支？: 多半是量詞與可選符（?、*、{n,m}）造成的：它們在圖上表現為「可跳過的迴路」或「重複迴路」，看起來像額外分支，其實是等價的表達。另外非捕獲分組 (?:...) 與前瞻 (?=...) 在圖上也有專門表示，容易與普通分組混淆。