正则表达式
正则表达式，又称规则表达式 (相当于自己定义的一个 或 一组规则) 。
在代码中常简写为regex、regexp或RE，正则表达式通常被用来检索、替换、校验那些符合某个模式(规则)的文本
(用于匹配字符串是否满足此规则)。
正则创建方式
- 字面量形式
const reg = /abc/;
console.log(reg); // /abc/
- 内置构造函数形式
const reg1 = new RegExp('abc');
console.log(reg1); // /abc/
正则的元字符
正则表达式的符号由那些组成?
- 元字符： 正则表达式的规则符号
- 边界元字符
1. ^ 表示开头
2. $ 表示结尾
const reg2 = /^\d/ // 表示字符串开头是一个数字
console.log(reg2.test('abc123def')) // false
console.log(reg2.test('123def')) // true
const reg3 = /\d$/ // 表示字符串结尾是一个数字
console.log(reg3.test('abc123def')) // false
console.log(reg3.test('abc123')) // true
const reg4 = /^\d$/ // 表示字符串只能是一个数字
console.log(reg4.test('abc123def')) // false
console.log(reg4.test('123def')) // false
console.log(reg4.test('123')) // false
console.log(reg4.test('1')) // true
- 普通元字符
1. \d 表示 一位(一个) 数字(0~9)
2. \D 表示 一位 非数字(除了0~9)
3. \w 表示 数字(0~9)字母(a-zA-Z)下划线(_) 其中的 一个
4. \W 表示 除了 数字(0~9)字母(a-zA-Z)下划线(_) 这些的 某一个字符
5. \s 表示 一位 空白字符
6. \S 表示 一位 非空白字符
7. . 表示 一位 非换行的任意字符
8. \ 表示转义符
把有意义的符号, 转为 没有意义的文本
将没有意义的文本, 转为 有意义的符号
const reg1 = /\d/ // 表示字符串至少出现一个数字
console.log(reg1.test('abc123def')) // true
const reg2 = /^\d/ // 表示字符串开头是一个数字
console.log(reg2.test('abc123def')) // false
console.log(reg2.test('123def')) // true
const reg3 = /\d$/ // 表示字符串结尾是一个数字
console.log(reg3.test('abc123def')) // false
console.log(reg3.test('abc123')) // true
const reg4 = /^\d$/ // 表示字符串只能是一个数字
console.log(reg4.test('abc123def')) // false
console.log(reg4.test('123def')) // false
console.log(reg4.test('123')) // false
console.log(reg4.test('1')) // true
- 限定元字符
正则的 限定元字符
表示 前边一个 符号 出现多少次
1. * 表示 0~正无穷次
2. + 表示 1~正无穷次
3. ? 表示 0~1次
4. {n} 表示 限定 n 次, 不能多也不能少
5. {n,} 表示 最少 n 次
6. {n,m} 表示 最少 n 次, 最多 m 次
const reg1 = /^\d*$/ // 这个字符串的数字只能出现 0~正无穷次
console.log(reg1.test('1')) // true
console.log(reg1.test('1a')) // false
const reg2 = /^\d+$/ // 这个字符串的数字只能出现1~正无穷
console.log(reg2.test('100')) // true
console.log(reg2.test('qwer')) // false
console.log(reg2.test('999qwer')) // false
const reg3 = /^\d?$/ // 这个字符串的数字只能出现 0~1 次
console.log(reg3.test('666')) // false
console.log(reg3.test('6')) // true
const reg4 = /^\d{2}$/ // 这个字符串的数字只能出现 2 次
console.log(reg4.test('666')) // false
console.log(reg4.test('66')) // true
console.log(reg4.test('6')) // false
const reg5 = /^\d{2,}$/ // 这个字符串的数字最少出现 2 次
console.log(reg5.test('666')) // true
console.log(reg5.test('66')) // true
console.log(reg5.test('6')) // false
const reg6 = /^\d{2,3}$/ // 这个字符串的数字最少出现 2 次 最多出现3次
console.log(reg6.test('6666')) // false
console.log(reg6.test('666')) // true
console.log(reg6.test('66')) // true
console.log(reg6.test('6')) // false
- 特殊元字符
正则的特殊元字符
1. ()
含义1: 当成一个整体
2. |
或
字符为 或 左右两边的 都行
3. []
包含
注意: [abcd] 包含其中一个即可 [] 实际代表的就是 一位字符
4. [^]
非
注意: [^abcd] 只要不是他们四个中的一个即可 [^] 实际代表的就是 一位字符
5. -
到(至)
通常与 包含 和 非 一起使用
[0-9] 数字 0~9 中的一个 \d
[^0-9] 不是数字 0~9 中的 一个 \D
[a-z] 小写 字母a~z
[A-Z] 大写 字母A~Z
- 重复元字符
正则的重复元字符
符号: \1 \2 .... \9
代表第几个小括号的值
/(abc|def)\1/
小括号 内 为 abc \1 这个位置也需要是 abc
小括号 内 为 def \1 这个位置也需要是 def
const reg = /^(abc|def)\1$/ // 小括号内是什么 \1 的位置就应该是什么
console.log(reg.test('abcdef')) // false
console.log(reg.test('abcabc')) // true
console.log(reg.test('defabc')) // false
console.log(reg.test('defdef')) // true
const reg1 = /^(abc|def){2}$/ // 小阔内的内容, 出现两次, 但是每次的值, 可以不同
console.log(reg1.test('abcdef')) // true
console.log(reg1.test('abcabc')) // true
console.log(reg1.test('defabc')) // true
console.log(reg1.test('defdef')) // true
const reg2 = /^<(p|span)><\/\1>$/
console.log(reg2.test('<span></span>')) // true
console.log(reg2.test('<p></p>')) // true
console.log(reg2.test('<p></span>')) // false
-
-
修饰符
(1). i: 匹配、搜索时不区分大小写 A和a是一样的(2). g: 查找所有项
(3). m： 使边界字符 ^ 和 $ 匹配每一行的开头和结尾，记住是多行，而不是整个字符串的开头和结尾。
(4). s: 默认情况下的圆点 . 是 匹配除换行符 \n 之外的任何字符，加上 s 修饰符之后, . 中包含换行符 \n。
-
正则的常用方法
正则的常用方法
-
- 匹配
- test
- 匹配字符串是否符合正则规则
- 符合 --- true
- 不符合 --- false
- 语法 正则.test(字符串)
const reg = /abc/ // 要求字符串中 包含 abc
const str = 'qwertyui'
const str1 = 'qwertyuiabc'
console.log(reg.test(str)) // false
console.log(reg.test(str1)) // true
console.log(reg.test('1234567890')) // false
-
- 捕获
-
- 没有捕获到: 直接返回一个 null
-
- 捕获到了
- 2.1 没有小括号也没g 的情况, 永远捕获的都是下标0开始的第一个符合条件的
- 2.2 没有小括号, 但是有修饰符g 的情况
- 第一次捕获完成后, 第二次开始的时候, 会从第一次捕获结束的位置开始
- 第三次开始的时候, 会从第二次捕获结束的位置开始
- 当所有的匹配项都匹配完成后, 会返回一个 null
- 当再次捕获的时候, 就从下标0重新开始
- 2.3 有小括号
- 下标0 还是我们正常捕获到的内容
- 从 下标1 开始, 就是每个小括号捕获到的内容
- 没有小括号 也没有g
const reg = /\d{3}/;
// 1.没有捕获到
console.log(reg.exec('axcvbnm')); // null
// 2. 没有小括号 也没有g
console.log(reg.exec('z123rtu456gjvc000fgh555'));
console.log(reg.exec('z123rtu456gjvc000fgh555'));
console.log(reg.exec('z123rtu456gjvc000fgh555'));
console.log(reg.exec ('z123rtu456gjvc000fgh555'));
console.log(reg.exec('z123rtu456gjvc000fgh555'));
console.log(reg.exec('z123rtu456gjvc000fgh555'));
// 没有加g 只能匹配第一个
- 没有小括号 有g
const reg = /\d{3}/g;
// 没有小括号 有g
console.log(reg.exec('z123rtu456gjvc000fgh555')); /// 123
console.log(reg.exec('z123rtu456gjvc000fgh555')); //456
console.log(reg.exec('z123rtu456gjvc000fgh555')); //000
console.log(reg.exec('z123rtu456gjvc000fgh555')); //555
console.log(reg.exec('z123rtu456gjvc000fgh555')); // null
console.log(reg.exec('z123rtu456gjvc000fgh555')); // 123
- 有小括号
// 有小括号
const reg = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/;
const str = '我的身份证号码是:512134201610230897 ,啦啦啦'
console.log(reg.exec(str)); // 512134201610230897
正则的两大特性
-
- 懒惰
- 正常捕获字符串的时候, 每次都从 下标0开始
- 解决方式: 给正则添加一个修饰符 g
-
- 贪婪
-
每次在捕获的时候, 会尽可能的多捕获一些东西
-
解决:
- 在原有的修饰符后添加一个 ? 然后相当于开启 非贪婪模式
-
贪婪: 能多拿就多拿 ----- ( * + ? {n,} {n,m} )
-
非贪婪: 能少拿就少拿 ----- ( *? +? ?? {n,}? {n,m}?)
const str = '<div class="box" id="box1"><span></span></div>'
const reg = /<div.*>/; // 贪婪模式
console.log(reg.exec(str)); // '<div class="box" id="box1"><span></span></div>'
const reg1 = /<div.*?>/; // 非贪婪模式
console.log(reg1.exec(str)); // '<div class="box" id="box1">'
