Regex Vis

將正規表示式的分支、群組與重複規則畫成圖,搭配測試字串檢查是否符合。

前往 Regex Vis 官方網站

Regex Vis 能做什麼?

Regex Vis 把正規表示式轉成節點與連線,並在 Test 分頁檢查字串是否符合。圖解與輸入規則並排,方便對照分支、群組和重複次數。

官方專案列有圖解、視覺編輯與比對測試功能。本次只實測輸入規則、產生圖解及測試字串,沒有操作視覺編輯。

為何收錄

討論一段正規表示式時,圖上的分岔比逐個解釋括號與符號容易指認。看完結構後,再用符合與不符合的樣本檢查,避免把看起來合理的規則直接放進程式。

適合的工作

需要閱讀、說明或檢查正規表示式的開發者,也適合正在學習群組、分支與量詞的人。

可以怎麼用

本次輸入 ^a(b|c)+d$ 並按 Enter。圖上顯示起點、a、包含 b 與 c 分支的 Group #1、一次以上的重複、d 與終點。

切到 Test,在旗標都未勾選的情況下逐一測試:abbd、acbd 顯示綠色勾號;ad、xacbd 顯示紅色叉號。前者確認分支可重複,後者檢查中間不能省略,也不能多出開頭字元。

使用前留意

本次規則會出現在網址的 r 查詢參數中,分享網址前請先檢查內容;不要放入金鑰、個資或內部資料。移回專案後仍要在目標執行環境測試。本次未測試視覺編輯、旗標切換、Unicode、複雜規則效能或其他引擎相容性。

regex101

依程式語言選擇正規表示式引擎,查看語法解釋、擷取群組與文字取代結果。

  • regex
  • testing
  • reference

網頁工具

RegExr

可學習、建立與測試 JavaScript 和 PCRE 正規表示式的互動工作區。

  • regex
  • testing
  • reference

網頁工具

Applitools

Applitools 提供視覺測試與介面比對,適合比對跨瀏覽器的介面差異。

  • testing
  • browser-automation

網頁工具