什么是正则
正则就是一种规则的的表达式,书写一段规则,用于匹配一段字符串是否符合规则
创建正则表达式
创建正则表达式有两种方式:
1.字面量的形式
2.内置构造函数的形式
<script>
*1.字面量的形式
const reg = /abc/
*2.内置构造函数的形式
const reg1 = new RegExp('abc')
console.log(reg) // /abc/
console.log(reg1) // /abc/
</script>
正则的常用方法
1.匹配(test)
匹配字符串是否符合正则规则
符合—>true
不符合—>false
语法: 正则.test(字符串)
2.捕获
语法:正则.exec(字符串)
正则的元字符
正则的表达式的符号由哪些组成?
1.元字符
正则表达式的规则符号
2.修饰符
修饰整个正则表达式的符号
普通元字符
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. \ ------ 表示转义符
有意义的符号, 转为没有意义的文本
没有意义的文本, 转为有意义的符号
<script>
const reg = /\d/ // 表示字符串中 至少包含一个 数字(0~9)
console.log(reg.test('qwertyuiop')) // false
console.log(reg.test('!@#$%^&*')) // false
console.log(reg.test('1000')) // true
const reg1 = /\D/ // 表示字符串中 至少出现一个 非数字的内容
console.log(reg1.test('qwertyuiop')) // true
console.log(reg1.test('!@#$%^&*')) // true
console.log(reg1.test('1000')) // false
const reg = /\w/ // 表示字符串中 至少包含一个 数字(0~9)字母(a-zA-Z)下划线(_) 其中的 一个
console.log(reg.test('@#$%^&*')) // false
console.log(reg.test('@#$%_^&*')) // true
console.log(reg.test('y@#$%^&*')) // true
console.log(reg.test('6@#$%^&*')) // true
console.log(reg.test('abc_123')) // true
const reg1 = /\W/ //表示 字符串中 至少出现一个 数字(0~9)字母(a-zA-Z)下划线(_) 以外的 字符
console.log(reg1.test('@#$%^&*')) // true
console.log(reg1.test('@#$%_^&*')) // true
console.log(reg1.test('y@#$%^&*')) // true
console.log(reg1.test('6@#$%^&*')) // true
console.log(reg1.test('abc_123')) // false
const reg = /\s/ // 表示字符串中 至少出现一个 空白字符
console.log(reg.test('asd')) // false
console.log(reg.test('213')) // false
console.log(reg.test('#$%')) // false
console.log(reg.test('#$ %')) // true
const reg1 = /\S/ // 表示字符串 至少出现一个 非空白字符
console.log(reg1.test('asd')) // true
console.log(reg1.test('213')) // true
console.log(reg1.test('#$%')) // true
console.log(reg1.test('#$ %')) // true
console.log(reg1.test(' ')) // false
const reg = /./ // 表示字符串 至少出现一个 非换行的任意字符
console.log(reg.test('\n')) // false
console.log(reg.test('123\n')) // true
const reg1 = /\./ // 表示字符串中至少出现一个 小数点
console.log(reg1.test('100')) // false
console.log(reg1.test('1.00')) // true
</script>
边界元字符
1.^ ------ 表示开头
2.$ ------ 表示结尾
<script>
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
</script>
正则的限定元字符
表示前边一个符号代表的内容出现多少次
1.* ------ 表示0~正无穷次
2. + ------ 表示 1~正无穷次
3. ? ------ 表示 0~1次
4. {n} ------ 表示 限定 n 次, 不能多也不能少
5. {n,} ------ 表示 最少 n 次
6. {n,m} ------ 表示 最少 n 次, 最多 m 次
<script>
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
</script>
特殊元字符
1.()
含义1: 当成一个整体
含义2: 单独捕获(欠着)
2. |
或
字符为 或 左右两边的 都行
3. [ ]
包含
注意: [abcd] 包含其中一个即可 [] 实际代表的就是 一位字符
4. [^]
非
注意: [^abcd] 只要不是他们四个中的一个即可 [^] 实际代表的就是 一位字符
5.-
到(至)
通常与 包含 和 非 一起使用
[0-9] 数字 0~9 中的一个 \d
[^0-9] 不是数字 0~9 中的 一个 \D
[a-z] 小写 字母a~z
[A-Z] 大写 字母A~Z
<script>
const reg = /(abc){2}/ // 表示 abc 这个整体 一定出现 2 次
console.log(reg.test('abcdef')) // false
console.log(reg.test('abcab')) // false
console.log(reg.test('abcabc')) // true
const reg = /(abc|def){2}/ // 这个字符串需要 abc 或者 def 出现两次
console.log(reg.test('abcabc')) // true
console.log(reg.test('abcdef')) // true
console.log(reg.test('defabc')) // true
console.log(reg.test('defdef')) // true
const reg = /^[a-c]$/ // 这个字符串只能是 a-c 其中的任意一个字符
console.log(reg.test('abc')) // false
console.log(reg.test('a')) // true
console.log(reg.test('b')) // true
console.log(reg.test('c')) // true
console.log(reg.test('@')) // false
</script>
小练习
问题: 或(|) 的分界线在哪里?
<script>
const reg = /^abc|def$/ // 这段正则什么含义?
const reg1 = /^ab(c|d)ef$/ // 这段正则什么含义?
</script>
或( | )的分界线是小括号或者正则的边界
<script>
const reg = /^abc|def$/ // 这段正则什么含义?
*看第一个,没有小括号,那或的分界线就是到正则的边界,那么上述的题就可以分解为两个部分
*1.^abc
*2.def$
*这两个部分的意思就是字符串以abc开头,以def结尾,但是因为条件是或所以满足其中一个就可以了
console.log(reg.test('abc12345678')) // true
console.log(reg.test('12345678def')) // true
console.log(reg.test('1234abcdef5678')) // false
const reg1 = /^ab(c|d)ef$/ // 这段正则什么含义?
*第二个,有小括号,那么或的边界线就是小括号
*把它拆开看就是 ^ab (c|d) ef$
*意思就是字符串以ab开头,ef结尾,中间要么是c要么是d
console.log(reg1.test('abcef')) // true
console.log(reg1.test('abdef')) // true
console.log(reg1.test('bdef')) // false
console.log(reg1.test('abde')) // false
</script>
重复元字符
符号: \1,\2,\3…\9,代表第几个小括号的值
<span></span>
<script>
* /(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
</script>
正则的标识符(修饰符)
书写在正则表达式的外面,用于描述整个正则表达式
- i
忽略大小写
- g
全局
<script>
const reg = /^[a-c]$/
console.log(reg.test('a')) // true
console.log(reg.test('A')) // false
const reg1 = /^[a-c]$/i // 忽略大小写
console.log(reg1.test('a')) // true
console.log(reg1.test('A')) // true
</script>
正则表达式的捕获
语法:正则.exec(字符串)
- 没有捕获到: 直接返回一个 null
- 捕获到
2.1 没有小括号也没g 的情况, 永远捕获的都是下标0开始的第一个符合条件的
2.2 没有小括号, 但是有修饰符g 的情况
第一次捕获完成后, 第二次开始的时候, 会从第一次捕获结束的位置开始
第三次开始的时候, 会从第二次捕获结束的位置开始
当所有的匹配项都匹配完成后, 会返回一个 null
当再次捕获的时候, 就从下标0重新开始
2.3有小括号,下标0 还是我们正常捕获到的内容,从 下标1开始, 就是每个小括号捕获到的内容
<script>
// 1. 没有捕获到
const reg = /\d{3}/
console.log(reg.exec('zxcvbnm')) // null
// 2.1 没有小括号, 也没有 g
const reg = /\d{3}/
console.log(reg.exec('z123xc456vb789nm000')) //123
console.log(reg.exec('z123xc456vb789nm000')) //123
console.log(reg.exec('z123xc456vb789nm000')) //123
// 2.2 有修饰符 g
const reg = /\d{3}/g
console.log(reg.exec('z123xc456vb789nm000')) // 123
console.log(reg.exec('z123xc456vb789nm000')) // 456
console.log(reg.exec('z123xc456vb789nm000')) // 789
console.log(reg.exec('z123xc456vb789nm000')) // 000
console.log(reg.exec('z123xc456vb789nm000')) // null
console.log(reg.exec('z123xc456vb789nm000')) // 123
// 2.3 有小括号
const reg = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/
const str = '我的身份证号是 411371200411081234'
console.log(reg.exec(str)) //['411371200411081234', '4113', '71', '20', '04', '11', '08', '12', '34']
const reg1 = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2}|\dx)/
const str1 = '我的身份证号是 41137120041108123x' //['411371200411081234', '4113', '71', '20', '04', '11', '08', '12', '3x']
console.log(reg1.exec(str1))
</script>
正则的两大特性
1.懒惰
正常捕获字符串的时候, 每次都从下标0开始
解决方式: 给正则添加一个修饰符 g
2.贪婪
每次在捕获的时候, 会尽可能的多捕获一些东西
解决方法: 在原有的修饰符后添加一个 ? 然后相当于开启非贪婪模式
<script>
* 贪婪限定符
* *
* +
* ?
* {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">']
</script>
