：正則表達式太難寫？試試這個可視化工具

正則表達式太難寫？試試這個可視化工具

regex-vis是什么

regex-vis是一個輔助學習、編寫和驗證正則的工具，你輸入一個正則表達式后，會生成它的可視化圖形。然后可以點選或框選圖形中的單個或多個節(jié)點，再在右側操作面板對其進行操作，具體操作取決于節(jié)點的類型，比如在其右側插入空節(jié)點、為節(jié)點編組、為節(jié)點增加量詞等。

安裝regex-vis

首先regex-vis提供了一個在線環(huán)境，可以直接到regex-vis.com/ 去試用，這是最簡單的方式。

當然，作為一個開源項目，另外一種方式就是自己運行啦。按以下步驟：

• 首先下載代碼到本地。

• 安裝依賴：pnpm install

• 安裝完成后運行服務：pnpm start

啟動完成后到3000端口訪問即可。

這里可能會遇到一些小問題，比如SSL的問題，稍微修改一些運行命令的配置即可解決。

使用 regex-vis

首先我準備一個例子的正則表達式，驗證身份證的正則：

css復制代碼^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$ 

可視化

直接把正則表達式貼進去就能看到可視化的效果了。

編輯

在右側是正則表達式的編輯區(qū)，可以在這里修改、編輯正則的內(nèi)容。

首先是一些圖例，點擊圖形中想要編輯的部分，然后點擊中間的編輯就可以進入到編輯頁面了。

測試

修改完了正則的內(nèi)容，想要驗證一下寫的對不對，那就到測試里去試一試吧。通過的會顯示綠色，失敗的則顯示為紅色。

示例

項目還自帶了幾個示例，如果你 剛一進來，不知道用什么來試用，可以直接打開示例來看看。

設置

本身是個小工具，這里有2個可用的設置，一個是切換語言，可以切成中文顯示，另一個就是明/暗顯示模式的轉(zhuǎn)換。

總結

作為一個小工具還是挺不錯的，對于像我這樣不熟練正則的人有所幫助，一步步的編輯可以漸進式的編輯。

當然現(xiàn)在寫正則最好的方式是讓AI幫忙寫，所以我建議可以AI幫忙寫，然后通過這個工具來檢查一下，通過可是的方式檢查和AI的溝通有沒有錯誤。

另外測試正則的功能里，不能顯示出事那部分 正則出錯略有可惜，如果能增強就更好用了。

項目信息

• 項目名稱：regex-vis

• GitHub 鏈接：github.com/Bowen7/rege…

• Star 數(shù)：3K+