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