访客 WebAPIs基础学习七
这是WebAPIs的最后一章了，这里今天主要介绍的是关于表单验证中最常用到的规则对象——正则表达式，或许小伙伴们对它并不陌生哈；
根据官方定义：正则表达式，又称规则表达式，是一种文本模式，包括普通字符（例如，a到z之间的字母）和特殊字符（称为"元字符"），是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本，目前许多程序设计语言都支持利用正则表达式进行字符串操作；
?其实，可简单理解为：是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象
经常适用的场景：表单验证；
那么今天所要介绍的内容就是：
一、正则表达式
二、正则案例
一、正则表达式
如果让一个人从这份图中寻找到一个【戴帽子和眼镜的男人】，他会用什么样的方法呢？
在这里，戴帽子、戴眼镜、男人都是描述信息，那么根据描述信息，很快就能够在人群中查找到确定的那个人，那么这些用于查找的描述信息如果编写成一个模式应用到计算机中，那就是所谓的正则表达式了；
在JavaScript的使用场景中，正则表达式通常都会被用来进行表单验证（匹配），或是过滤掉页面内容中的一些敏感词(替换)，也或是从字符串中获取我们想要的特定部分(提取)等；
1.基础语法
在使用正则表达式的时候，通常会分为定义规则和查找两步进行；
- 定义正则表达式语法：
//其中//是正则表达式字面量，中间不含空格，不含引号let变量名=/表达式/⭐注意：正则是一个对象，表达式返回的是对象，那么也就是说变量名中存储的是也是对象；
变量名.test(被检测的字符串)⭐注意：通常使用test()方法来查看正则表达式与指定的字符串是否匹配，如果正则表达式与指定的字符串匹配，返回true，否则false
变量名.exec(被检测的字符串)⭐注意：这里使用的exec()虽然和test()的目的相同，都是为了查找要匹配的字符串，但是它们的区别就是，在使用exec()方法如果匹配到的话，就返回一个数组，里面还包含了索引号等信息，否则的话就是返回null
2.元字符
前面也介绍过，在正则表达式中是包括普通字符（例如，a到z之间的字母）和特殊字符的，而这里的特殊字符就是元字符；
普通字符：大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字；换言之，也就是说普通字符只能够匹配字符串中与它们相同的字符；
特殊字符（元字符）：是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能；例如，比如，规定用户只能输入英文26个英文字母，普通字符的话就需要写成abcdefghijklm…..，但是换成元字符只需要写成[a-z]；
详细内容可以参考MDN官方文档或者使用正则测试工具
当然，如果直接这样去记忆元字符，是很难很多的，所要在为了方便记忆和学习的情况下，人们对其进行了分类：
- 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）；
- 量词（表示重复次数）；
- 字符类（比如\d表示0~9）；
2.1边界符
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符：
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本（以谁开始） |
| $ | 表示匹配行尾的文本（以谁结束） |
代码样例：
//^开头$结尾console.log(/^小柴/.test('小柴爱程序'))//trueconsole.log(/^小柴/.test('我是爱前端的小柴'))//falseconsole.log(/^小柴$/.test('我是爱前端的小柴'))//falseconsole.log(/^小柴$/.test('小柴爱前端'))//falseconsole.log(/小柴$/.test('爱前端的小柴'))//trueconsole.log(/^小柴$/.test('小柴'))//true精确匹配⭐注意：如果^和$在一起，表示必须是精确匹配
2.2量词
量词用来设定某个模式出现的次数，通常要求要写在字符后面；
| 量词 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| 重复一次或更多次 | |
| ？ | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
代码样例：
//^开头$结尾console.log(/(小柴)*/.test('爱程序'))//trueconsole.log(/(小柴)/.test('我是爱前端的小柴'))//trueconsole.log(/(小柴)?/.test('我是爱前端的小柴'))//trueconsole.log(/(小柴){2}/.test('小柴小柴爱前端'))//trueconsole.log(/(小柴){2,}/.test('小柴是爱前端的小柴'))//falseconsole.log(/(小柴){2,5}/.test('小柴小柴小柴'))//true⭐注意：逗号左右两侧千万不要出现空格，且重复出现的位置是连续的，否则返回false；
2.3字符类
[]匹配字符集合：后面的字符串只要包含规则中任意一个字符，都返回true；[]里面加上-连字符：连字符-表示一个范围，最后的意义就是所确定范围中的任意一个字符；
例如：QQ号=>^[1-9][0-9]{4,}$【QQ号是从10000开始的】
[]里面加上^取反符号：表示除了所确定范围以外的任意字符；.匹配除换行符之外的任何单个字符；| 预定类 | 说明 |
|---|---|
| \d | 匹配0-9之间的任意数字，相当于[0-9] |
| \D | 匹配所有0-9以外的字符，啊相当于[^0-9] |
| \w | 匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_] |
| \W | 除字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_] |
| \s | 匹配空格（包括换行符、制表符、空格符等），相当于[\t\r\n\v\f] |
| \S | 匹配非空格的字符，相当于[^\t\r\n\v\f] |
日期格式：^\d{4}-\d{1,2}-\d{1,2}
3.修饰符
修饰符是为了约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等；
基本语法结构：
/表达式/修饰符3.1大小写区分
i是单词ignore的缩写，正则匹配时字母不区分大小写；g是单词global的缩写，匹配所有满足正则表达式的结果，但是要区分大小写；
代码如下：
console.log(/a/i.test('a'))//trueconsole.log(/a/i.test('A'))//true3.2replace替换
基础语法结构：
字符串.replace(/正则表达式/,'替代的文本')这里的全局替换可以使用修饰符g；
二、正则案例
①中文字符：[\u4e00-\u9fa5]
letpattern=/[\u4e00-\u9fa5]/;str='';console.log(pattern.test(str));②Email地址：\w[-\w.]*@([A-Za-z0-9][-A-Za-z0-9]\.)[A-Za-z]{2,14}
letpattern=/\w[-\w.]*@([A-Za-z0-9][-A-Za-z0-9]\.)[A-Za-z]{2,14}/;str='';console.log(pattern.test(str));③网址URL：[a-zA-z]:\/\/[^\s]*
letpattern=/[a-zA-z]:\/\/[^\s]*/;str='';console.log(pattern.test(str));④手机话（国内）：0?(13|14|15|17|18|19)[0-9]{9}
letpattern=/0?(13|14|15|17|18|19)[0-9]{9}/;str='';console.log(pattern.test(str));⑤固话（国内）：[0-9-()（）]{7,18}
letpattern=/[0-9-()（）]{7,18}/;str='';console.log(pattern.test(str));⑥邮政编码：\d{6}
letpattern=/\d{6}/;str='';console.log(pattern.test(str));⑦IP地址：(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)
letpattern=/(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)/;str='';console.log(pattern.test(str));⑧身份证号：\d{17}[\d|x]|\d{15}
letpattern=/\d{17}[\d|x]|\d{15}/;str='';console.log(pattern.test(str));⑨用户名：[A-Za-z0-9_\-\u4e00-\u9fa5]
letpattern=/[A-Za-z0-9_\-\u4e00-\u9fa5]/;str='';console.log(pattern.test(str));这里推荐一个自动生成正则表达式的网站，还有很多案例可以点击查看哟
总结
今天是继续学习WebAPIs的第七天，内容不多，但练习极为重要，今天所总结出来的所有知识，希望对大家有用，同时也希望这篇文章可以有一个好的展现量和得到更多人的支持，谢谢每一位浏览文章的人，要相信小柴码文，必是好文，欢迎各位点赞收藏关注啦!!!
有兴趣可回顾一下JavaScript基础学习的文章内容，再结合之前所介绍的CSS基础学习以及HTML基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！