三、正则表达式进阶
前言了解 - JavaScript match()
方法
- 定义和用法
match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
注意: match() 方法将检索字符串 String Object,以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。
- 语法
string.match(regexp)
前言了解 - JavaScript exec() 方法
- 定义和用法
exec() 方法用于检索字符串中的正则表达式的匹配。
如果字符串中有匹配的值返回该匹配值,否则返回 null。
- 语法
RegExpObject.exec(string)
3.1 分组 - 分组允许你把一系列的标记一起处理
一、 (ABC)
捕获分组 - 把多个标记分在同一组并创建一个捕获分组,用来创建子串或引用。
var reg = /(hh)/g;
console.log(reg.test('hhdasd hh dasdhhasd hh')); // 输出 true
console.log(reg.test('hdsadas')); // 输出 false
分组有一个非常重要的功能——
捕获数据
。所以()
被称为捕获分组,用来捕获数据,当我们想要从匹配好的数据中提取关键数据的时候可以使用分组。
var reg = /(hh)/g;
console.log('hhdasd hh dasdhhasd hh'.match(reg)); //输出 ['hh','hh','hh','hh']
- 提取出生日期中的年月日,例
2000-01-01
提取2000 01 01
var regs = /(\d{4})[\-\/](\d{1,2})[\/\-](\d{1,2})/g;
console.log(regs.exec('2000-01-01')); // 输出 ['2000-01-01', '2000', '01', '01', index: 0, input: '2000-01-01', groups: undefined]
console.log(RegExp.$1); // 输出 2000
console.log(RegExp.$2); // 输出 01
console.log(RegExp.$3); // 输出 01
补充:
$N
: $1-$9
存放着正则表达式中最近的9个正则表达式的匹配结果,这些结果按照子匹配的出现顺序依次排列。
- 提取区号后的电话号码,例
0731-75855
、86-138888888
、tel:1384466545
……
let phones = ['0731-75855', '86-138888888', 'tel:1384466545'];
phones.forEach((o) => {
console.log(/\w+[\-:](\d+)/g.exec(o)[1]); // 依次输出 75855 138888888 1384466545
});
- 提取HTML标签中值,例
<p>hello world!</p>
提取hello world!
console.log(/<\w+>(.*)<\/\w+>/g.exec('<p>hello world!</p>')[1]); // 输出hello world!
补充:
考虑一种情况,所提取标签不符合规范,如<p></span>
,那么如何确保提取到的标签是符合规范的呢?
- 分组的回溯引用,使用
\N
可以引用编号为N
的分组- 这里的
\1
就是表示第一个分组(\w+)
- 这里的
console.log(/<(\w+)>(.*)<\/\1>/g.exec('<p>hello world!</span>'));// 输出 null
二、在不创建捕获分组的情况下,把数个标记组在一起
(?:表达式)
,从而不捕获数据,还能使用分组的功能
console.log('hahaha haa hah!'.match(/(?:ha)+/g)); // 输出 ['hahaha', 'ha', 'ha']
先行断言从左往右看,后行断言从右往左看
3.2 先行断言
一、正向先行断言 - 匹配主表达式后面的组而不将其包含在结果中。
(?=表达式)
,指在某个位置向右看,表示所在位置右侧必须能匹配表达式
console.log('1px 2rpx 3em 4rem 5px 6vh 7pt'.match(/\d(?=px)/g)); // 输出 ['1', '5']
- 使用正向先行断言进行密码强度验证,要求 至少大小写字母各一,且不少于8位字符
console.log(/(?=.*?[a-z])(?=.*?[A-Z]).{8,}/g.test('123456aA')); // 输出 true
console.log(/(?=.*?[a-z])(?=.*?[A-Z]).{8,}/g.test('12356aA')); // 输出 false,少于8位
console.log(/(?=.*?[a-z])(?=.*?[A-Z]).{8,}/g.test('123456aa')); // 输出 false,缺少大写
console.log(/(?=.*?[a-z])(?=.*?[A-Z]).{8,}/g.test('123456AA')); // 输出 false,缺失小写
二、反向先行断言 - 指定主表达式后无法匹配的组(如果匹配,则结果将被丢弃)
(?!表达式)
的作用是保证右边不能出现某字符。
console.log('hh+ dshh+ hh+das '.match(/hh(?!\+)/g)); // 输出 null,因其hh右边都出现了+,这里\+为转义后+字符,并非量词 + === {1, }
console.log(/hh(?!\+)/g.test('hh+ dshh+ hh+das')); // 输出 false
console.log(/hh(?!\+)/g.test('hhhhhdasdga')); // 输出 true,因其未出现+
- 匹配不是163邮箱的数据
console.log(/\w+@(?!163)\w(?:\.\w+)+$/g.test('123@qq.com')); // 输出 true
console.log(/\w+@(?!163)\w(?:\.\w+)+$/g.test('1sad23@qq.com.cn')); // 输出 true
console.log(/\w+@(?!163)\w(?:\.\w+)+$/g.test('1sad23@163.com.cn')); // 输出 false
3.3 后行断言
一、正向后行断言 - 匹配主表达式之前的组,而不将其包含在结果中
(?<=表达式)
,指在某个位置向左看,表示所在位置左侧必须能匹配表达式
console.log(/(?<=张).+/g.test('张三')); // 输出 true
console.log(/(?<=张).+/g.test('李四')); // 输出 false
二、 反向后行断言 - 指定在主表达式之前无法匹配的组(如果匹配,则结果将被丢弃)
(?<!表达式)
,指在某个位置向左看,表示所在位置左侧不能匹配表达式
- 匹配
#
符号中的数据
console.log(/(?<!#)#([^$]+)#(?!#)/g.exec('#132146asdas#')[1]); // 输出 132146asdas
console.log(/(?<!#)#([^$]+)#(?!#)/g.exec('213#132146asdas#21344asd')[1]); // 输出 132146asdas
console.log(/(?<!#)#([^$]+)#(?!#)/g.exec('213132146asdas#21344asd')); // 输出 null
四. 练习网站推荐
- 正则练习网址: https://www.codejiaonang.com/
- 正则在线测试网站: https://regexr-cn.com/
仅为学习所做笔记,如果不足或错误之处,请指出