三款可视化工具，帮你学会 JS 正则表达式

<section data&#45;tool="mdnice编辑器" data&#45;website="https&#58;&#47;&#47;www&#46;mdnice&#46;com" id="nice" style="font&#45;size&#58; 16px&#59; color&#58; black&#59; padding&#58; 0 10px&#59; line&#45;height&#58; 1&#46;6&#59; word&#45;spacing&#58; 0px&#59; letter&#45;spacing&#58; 0px&#59; word&#45;break&#58; break&#45;word&#59; word&#45;wrap&#58; break&#45;word&#59; text&#45;align&#58; left&#59; font&#45;family&#58; Optima&#45;Regular&#44; Optima&#44; PingFangSC&#45;light&#44; PingFangTC&#45;light&#44; &#39;PingFang SC&#39;&#44; Cambria&#44; Cochin&#44; Georgia&#44; Times&#44; &#39;Times New Roman&#39;&#44; serif&#59; margin&#45;top&#58; &#45;10px&#59;">

最近老王对可视化非常着迷。

例如，算法可视化、正则可视化、Vue 数据劫持可视化......

程序的运行过程是看不见摸不着的，如果能够全部实现可视化，那么理解难度将会大幅度减小。

三款 JS 正则可视化工具

• <section style="margin&#45;top&#58; 5px&#59; margin&#45;bottom&#58; 5px&#59; line&#45;height&#58; 26px&#59; text&#45;align&#58; left&#59; color&#58; rgb&#40;1&#44;1&#44;1&#41;&#59; font&#45;weight&#58; 500&#59;"> https://jex.im/regulex </section>
• <section style="margin&#45;top&#58; 5px&#59; margin&#45;bottom&#58; 5px&#59; line&#45;height&#58; 26px&#59; text&#45;align&#58; left&#59; color&#58; rgb&#40;1&#44;1&#44;1&#41;&#59; font&#45;weight&#58; 500&#59;"> https://regexper.com (网络需自由)
  • <section style="margin&#45;top&#58; 5px&#59; margin&#45;bottom&#58; 5px&#59; line&#45;height&#58; 26px&#59; text&#45;align&#58; left&#59; color&#58; rgb&#40;1&#44;1&#44;1&#41;&#59; font&#45;weight&#58; 500&#59;"> https://aoxiaoqiang.github.io/reg （替代工具） </section>
  </section>
• <section style="margin&#45;top&#58; 5px&#59; margin&#45;bottom&#58; 5px&#59; line&#45;height&#58; 26px&#59; text&#45;align&#58; left&#59; color&#58; rgb&#40;1&#44;1&#44;1&#41;&#59; font&#45;weight&#58; 500&#59;"> https://www.debuggex.com </section>

常见正则表达式

以下图片由https://jex.im/regulex生成

邮箱

只允许英文字母、数字、下划线、英文句号、以及中划线组成

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

<figcaption style="margin&#45;top&#58; 5px&#59; text&#45;align&#58; center&#59; color&#58; &#35;888&#59; font&#45;size&#58; 14px&#59;"> 邮箱 </figcaption>

电话

手机号码

13012345678 手机号码

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

<figcaption style="margin&#45;top&#58; 5px&#59; text&#45;align&#58; center&#59; color&#58; &#35;888&#59; font&#45;size&#58; 14px&#59;"> 手机号码 </figcaption>

固定电话

XXX-XXXXXXX XXXX-XXXXXXXX 固定电话

(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}
复制代码

<figcaption style="margin&#45;top&#58; 5px&#59; text&#45;align&#58; center&#59; color&#58; &#35;888&#59; font&#45;size&#58; 14px&#59;"> 固定电话 </figcaption>

域名

https://google.com/

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

<figcaption style="margin&#45;top&#58; 5px&#59; text&#45;align&#58; center&#59; color&#58; &#35;888&#59; font&#45;size&#58; 14px&#59;"> 域名 </figcaption>

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,}$
复制代码

<figcaption style="margin&#45;top&#58; 5px&#59; text&#45;align&#58; center&#59; color&#58; &#35;888&#59; font&#45;size&#58; 14px&#59;"> 中文 </figcaption>

英文和数字

^[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$
复制代码

关注我们

本文使用 mdnice 排版

</section>

推荐

又一款开源图标库 CSS.GG，值得一用

三款可视化工具，帮你学会正则表达式

React 中必须掌握的 10 个基础知识

Follow Me

• 在公众号「前端老王」写文章
• 在 电鸭社区 找 远程工作
• 在 Github 发现好项目
• 在 Twitter 打卡学习，交朋友