最近老王對視覺化非常著迷。
例如，演算法視覺化、正則視覺化、Vue 資料劫持視覺化……
程式的執行過程是看不見摸不著的，如果能夠全部實現視覺化，那麼理解難度將會大幅度減小。
三款 JS 正則視覺化工具
常見正規表示式
以下圖片由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$
關注我們
本作品採用《CC 協議》，轉載必須註明作者和本文連結