【在線工具】正則表達式看不懂？把它變成一張圖就明白了

正則表達式（Regex）是程序員又愛又怕的東西。

寫對了，一行代碼能搞定複雜的文本匹配；寫錯了，對着一串符號半天看不出哪裏不對。

土薯工具的「正則表達式可視化」，把你寫的正則轉成一張結構圖，每個部分是什麼意思一目瞭然，同時支持實時文本匹配測試。

🔗 工具地址：https://toolshu.com/regex-visualizer

這個工具能做什麼？

① 可視化解析： 輸入一個正則表達式，工具自動把它拆解成圖形化的結構圖——哪部分是字符組、哪部分是量詞、哪部分是分組，全部以圖形節點展示，看圖就能理解邏輯。

② 實時匹配測試： 在測試文本框裏輸入內容，工具實時高亮標出所有匹配到的部分，馬上知道這個正則對不對、匹配到了什麼。

③ 結果導出： 可視化圖可以導出爲 SVG 或圖片，方便放進文檔、技術分享或學習筆記裏。

舉個例子

比如這個常見的郵箱驗證正則：

^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

肉眼看這串符號，大概能猜出是郵箱格式，但每個部分具體什麼意思不一定說得清楚。

把它丟進可視化工具，圖裏會清晰地展示：

• ^ 開頭錨點
• [a-zA-Z0-9._%+-]+ 用戶名部分，允許哪些字符
• @ 字面的@符號
• [a-zA-Z0-9.-]+ 域名主體
• \. 轉義的點
• [a-zA-Z]{2,}$ 頂級域名，至少兩個字母

每個節點對應原始表達式的哪個片段，選中圖裏的節點，原始正則對應位置也會高亮。

適合哪些人？

正在學正則的人： 光看教程裏的字符說明很難建立直覺，可視化圖能幫你快速理解正則的結構邏輯。

寫了正則但不確定對不對的人： 直接測試，實時看匹配結果，比自己在腦子裏模擬運行靠譜多了。

需要向別人解釋正則的人： 技術評審、代碼 Review、寫文檔時，一張結構圖比一段文字說明清晰得多，直接導出圖片用。

偶爾需要寫正則但不熟練的人： 運營寫爬蟲規則、產品做數據過濾，不需要精通，但能借助工具驗證自己寫的是否正確。

土薯還有一個正則測試工具

如果你不需要可視化，只是想快速測試正則匹配效果，土薯還有一個更輕量的「正則表達式在線測試」：https://toolshu.com/regex_tester

支持實時替換，並能生成 JavaScript、Python、PHP、Java、Go、Ruby 六種語言的對應代碼，直接複製進項目用。

👉 把你的正則變成一張圖：https://toolshu.com/regex-visualizer

土薯在線工具 toolshu.com，免費實用工具大全，歡迎收藏。