JS中的正则表达式

正则

什么是正则

正则就是一种规则的的表达式,书写一段规则,用于匹配一段字符串是否符合规则
创建正则表达式
创建正则表达式有两种方式:
1.字面量的形式
2.内置构造函数的形式

<script>*1.字面量的形式
    const reg =/abc/*2.内置构造函数的形式
    const reg1 =newRegExp('abc')

    console.log(reg)// /abc/
    console.log(reg1)// /abc/</script>

正则的常用方法

1.匹配(test)
匹配字符串是否符合正则规则
符合—>true
不符合—>false
语法: 正则.test(字符串)
2.捕获
语法:正则.exec(字符串)

正则的元字符

正则的表达式的符号由哪些组成?
1.元字符
正则表达式的规则符号
2.修饰符
修饰整个正则表达式的符号

普通元字符

1.\d ------ 表示一位(一个)数字(09)
2. \D ------ 表示 一位 非数字(除了09)
3. \w ------ 表示 数字(09)字母(a-zA-Z)下划线(_) 其中的 一个
4. \W ------ 表示 除了 数字(09)字母(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'))// trueconst reg1 =/\D/// 表示字符串中 至少出现一个 非数字的内容
        console.log(reg1.test('qwertyuiop'))// true
        console.log(reg1.test('!@#$%^&*'))// true
        console.log(reg1.test('1000'))// falseconst 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'))// trueconst 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'))// falseconst reg =/\s/// 表示字符串中 至少出现一个 空白字符
        console.log(reg.test('asd'))// false
        console.log(reg.test('213'))// false
        console.log(reg.test('#$%'))// false
        console.log(reg.test('#$ %'))// trueconst 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(' '))// falseconst reg =/./// 表示字符串 至少出现一个 非换行的任意字符
        console.log(reg.test('\n'))// false
        console.log(reg.test('123\n'))// trueconst 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'))// trueconst reg2 =/^\d/// 表示字符串开头是一个数字
        console.log(reg2.test('abc123def'))// false
        console.log(reg2.test('123def'))// trueconst reg3 =/\d$/// 表示字符串结尾是一个数字
        console.log(reg3.test('abc123def'))// false
        console.log(reg3.test('abc123'))// trueconst 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'))// falseconst reg2 =/^\d+$/// 这个字符串的数字只能出现1~正无穷
        console.log(reg2.test('100'))// true
        console.log(reg2.test('qwer'))// false
        console.log(reg2.test('999qwer'))// falseconst reg3 =/^\d?$/// 这个字符串的数字只能出现 0~1 次
        console.log(reg3.test('666'))// false
        console.log(reg3.test('6'))// trueconst reg4 =/^\d{2}$/// 这个字符串的数字只能出现 2 次
        console.log(reg4.test('666'))// false
        console.log(reg4.test('66'))// true
        console.log(reg4.test('6'))// falseconst reg5 =/^\d{2,}$/// 这个字符串的数字最少出现 2 次
        console.log(reg5.test('666'))// true
        console.log(reg5.test('66'))// true
        console.log(reg5.test('6'))// falseconst 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] 数字 09 中的一个 \d
[^0-9] 不是数字 09 中的 一个 \D
[a-z] 小写 字母az
[A-Z] 大写 字母AZ

<script>const reg =/(abc){2}/// 表示 abc 这个整体 一定出现 2 次
        console.log(reg.test('abcdef'))// false
        console.log(reg.test('abcab'))// false
        console.log(reg.test('abcabc'))// trueconst 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'))// trueconst 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'))// falseconst 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'))// trueconst 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'))// trueconst 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>

正则的标识符(修饰符)

书写在正则表达式的外面,用于描述整个正则表达式

1. i 忽略大小写
2. g 全局

<script>const reg =/^[a-c]$/
       console.log(reg.test('a'))// true
       console.log(reg.test('A'))// falseconst reg1 =/^[a-c]$/i// 忽略大小写
       console.log(reg1.test('a'))// true
       console.log(reg1.test('A'))// true</script>

正则表达式的捕获

语法:正则.exec(字符串)

1. 没有捕获到: 直接返回一个 null
2. 捕获到 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 没有小括号, 也没有 gconst reg =/\d{3}/
        console.log(reg.exec('z123xc456vb789nm000'))//123
        console.log(reg.exec('z123xc456vb789nm000'))//123
        console.log(reg.exec('z123xc456vb789nm000'))//123// 2.2 有修饰符 gconst 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>