三款可視化工具，幫你學會 JS 正則表達式！

最近老王對可視化很是着迷。

例如，算法可視化、正則可視化、Vue 數據劫持可視化......

程序的運行過程是看不見摸不着的，若是可以所有實現可視化，那麼理解難度將會大幅度減少。

三款 JS 正則可視化工具

• https://jex.im/regulex

• https://regexper.com (網絡需自由)

  • https://aoxiaoqiang.github.io... （替代工具）
• https://www.debuggex.com

常見正則表達式

如下圖片由https://jex.im/regulex生成

郵箱

只容許英文字母、數字、下劃線、英文句號、以及中劃線組成

^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$

電話

手機號碼

13012345678 手機號碼

^1(3|4|5|6|7|8|9)\d{9}$

固定電話

XXX-XXXXXXX XXXX-XXXXXXXX 固定電話

(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}

域名

https://google.com/

^((http:\/\/)|(https:\/\/))?([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}(\/)

IP

127.0.0.1

((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))

賬號校驗

laowang_001 字母開頭，容許 5 - 16 字節，容許字母數字下劃線

^[a-zA-Z][a-zA-Z0-9_]{4,15}$

字符校驗

漢字

前端老王

^[\u4e00-\u9fa5]{0,}$

英文和數字

^[A-Za-z0-9]+$

長度爲 3 - 20 的全部字符

^.{3,20}$

英文字符

由 26 個英文字母組成的字符串

^[A-Za-z]+$

由 26 個大寫英文字母組成的字符串

^[A-Z]+$

由 26 個小寫英文字母組成的字符串

^[a-z]+$

由數字和 26 個英文字母組成的字符串

^[A-Za-z0-9]+$

由數字、26 個英文字母或者下劃線組成的字符串

^\w+$

中文、英文、數字包括下劃線

^[\u4E00-\u9FA5A-Za-z0-9_]+$

中文、英文、數字但不包括下劃線等符號

^[\u4E00-\u9FA5A-Za-z0-9]+$

禁止輸入含有%&',;=?$"等字符

[^%&',;=?$\x22]+

禁止輸入含有~的字符

[^~\x22]+

數字正則

整數

^-?[1-9]\d*$

正整數

^[1-9]\d*$

負整數

^-[1-9]\d*$

非負整數

^[1-9]\d*|0$

非正整數

^-[1-9]\d*|0$

浮點數

^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

正浮點數

^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$

負浮點數

^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$

非負浮點數

^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$

非正浮點數

^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$

感謝關注

文章首發在公衆號：前端時空
三款可視化工具，幫你學會 JS 正則表達式