学习笔记:JS正则介绍及常用正则集合

2019-08-15  本文已影响0人  银月silvermoon

无论是做h5页面还是后台管理系统,前端总是会有非常多的输入校验,这就需要用到JS正则表达式(Regular Expression)。正则表达式本质上是一个小巧的、高度专用的编程语言,常用于匹配校验、查找和替换、字符串分割等场景。下面将对正则的基础进行简单介绍,并列出常用的正则集合。

注:推荐一个正则表达式转图形化在线工具(https://regexper.com),刚开始学习正则时看冗长的字符串会比较难懂,这个在线工具能将其转换为类似于逻辑流程图的形式,可以帮助理解


一、创建正则表达式

初始化同时赋值: var reg = new RegExp('xxx', 'g');   // xxx为正则字符串

直接赋值: var reg = /xxx/g;

二、修饰符

(1)g (global): 全文搜索,不添加则搜索到第一个匹配字符串时停止搜索

(2)i (ignore case): 添加时忽略大小写,默认大小写敏感

(3)m (multiple lines): 多行搜索

三、元字符

正则表达式由两种基本字符类型组成:原义文本字符和元字符。元字符是指在正则表达式中有特殊含义的非字母字符,将元字符转换为原义文本字符需使用转义字符 " / "。

元字符包括:* + ? $ ^ . | \ ( ) { } [ ] 

四、非打印字符

\ : 转义字符                   \t : 水平制表符              \v : 垂直制表符               \n : 换行符

\r : 回车符                     \o : 空字符                    \f : 换行符                       

\cX : 与X对应的控制字符(如 ctrl + x,ctrl + c 等等)

五、字符类

可使用元字符 [ ] 来构建一个简单的类,eg: [abc] 把 a、b、c 归为一类,可使用 元字符 ^ 创建反向类/负向类, eg [^abc]

六、范围类

使用元字符[x1-x2]来链接两个字符表示从x1到x2的任意字符(闭区间)

eg: [a-z]或[a-zA-Z],注意内部可连写

七、预定义类

字符                      等价类                                    含义

.                           [^\r\n]                           除了回车符和换行符之外的所有字符

\d                         [0-9]                             数字字符

\D                        [^0-9]                            非数字字符

\s                        [\f\n\r\t\v]                        匹配空白符、TAB符、换页符、换行符

\S                       [^\f\n\r\t\v]                       匹配非空白符

\w                       [a-zA-Z_0-9]                   匹配单词字符(字母、数字、下划线)

\W                      [^a-zA-Z_0-9]                  匹配非单词字符

八、边界匹配字符

      ^                                    $                                   \b                                     \B

开始字符                        结束字符                        单词边界                        非单词边界

九、量词

字符                             含义

?                         出现零次或一次(最多出现一次)

+                           出现一次或多次(至少出现一次)

*                            出现零次或多次(任意次)

{n}                         出现n次

{n,m}                     出现n到m次

{n,}                        至少出现n次

{0,n}                      至多出现n次

[...]                        字符范围: [a-z]、[0-9]、_、[A-Z]

十、贪婪模式

正则表达式使用量词进行匹配时,会默认匹配尽可能多的结果

eg: ’123456789‘.match(/\d{0,5}/g),匹配结果为1,2,3,4,5,选择匹配5个而不是0个

如果想让正则表达式尽可能少的匹配,即一旦成功匹配就不再继续尝试,在量词后加上?即可

十一、分组

使用元字符( )达到分组功能,使量词作用于分组,eg: (ABC){3}

十二、或

使用元字符 " | " 达到或的效果,eg: AB(bc|ef)FE


常用正则合集

1、校验合法url

/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/

2、校验手机号码

/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[289])\d{8}$/

3、校验国内座机电话

/\d{3}-\d{8}|\d{4}-\d{7}/

4、校验身份证

/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

5、校验车牌号

/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/

6、校验email地址

/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

7、检验账号名称(只能由字母、数字、下划线组成,且以字母开头,8-20位)

/^[a-zA-Z][a-zA-Z0-9_]*{8,20}$/

8、检验密码(8-20位含字母、数字的密码)

/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/

9、纯字母

/^[a-zA-Z]*$/

10、纯中文

/^[\u4E00-\u9FA5]/

11、整数

/^-?\d+$/

12、整数且大于0

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

13、小数

/^\d+\.\d+$/

14、正整数、小数或0

/^\d+(\.?|(\.\d+)?)$/

15、上传图片类型

/image\/(png|jpg|jpeg|gif)$/

16、域名

/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?/

17、qq号

/^[1-9]*[1-9][0-9]*$/

18、微信号

/^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/

19、ipv4地址

/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

20、日期格式,yyyy-mm-dd

/^\d{4}(-)\d{1,2}\1\d{1,2}$/

上一篇下一篇

猜你喜欢

热点阅读