：正則表達(dá)式太難寫？試試這個(gè)可視化工具

正則表達(dá)式太難寫？試試這個(gè)可視化工具

regex-vis是什么

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

安裝regex-vis

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

當(dāng)然，作為一個(gè)開源項(xiàng)目，另外一種方式就是自己運(yùn)行啦。按以下步驟：

• 首先下載代碼到本地。

• 安裝依賴：pnpm install

• 安裝完成后運(yùn)行服務(wù)：pnpm start

啟動(dòng)完成后到3000端口訪問即可。

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

使用 regex-vis

首先我準(zhǔn)備一個(gè)例子的正則表達(dá)式，驗(yàn)證身份證的正則：

css復(fù)制代碼^[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]$ 

可視化

直接把正則表達(dá)式貼進(jìn)去就能看到可視化的效果了。

編輯

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

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

測(cè)試

修改完了正則的內(nèi)容，想要驗(yàn)證一下寫的對(duì)不對(duì)，那就到測(cè)試?yán)锶ピ囈辉嚢?。通過的會(huì)顯示綠色，失敗的則顯示為紅色。

示例

項(xiàng)目還自帶了幾個(gè)示例，如果你 剛一進(jìn)來，不知道用什么來試用，可以直接打開示例來看看。

設(shè)置

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

總結(jié)

作為一個(gè)小工具還是挺不錯(cuò)的，對(duì)于像我這樣不熟練正則的人有所幫助，一步步的編輯可以漸進(jìn)式的編輯。

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

另外測(cè)試正則的功能里，不能顯示出事那部分 正則出錯(cuò)略有可惜，如果能增強(qiáng)就更好用了。

項(xiàng)目信息

• 項(xiàng)目名稱：regex-vis

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

• Star 數(shù)：3K+