JS中的正则表达式

最新推荐文章于 2024-08-22 14:32:34 发布

兰de宝贝

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量5k

点赞数 11

分类专栏： JavaScript 前端文章标签： javascript 正则表达式前端

本文链接：https://blog.csdn.net/weixin_48649246/article/details/127853178

版权

JavaScript 同时被 2 个专栏收录

30 篇文章 3 订阅

订阅专栏

前端

27 篇文章 0 订阅

订阅专栏

"本文深入介绍了正则表达式的基础知识，包括如何创建正则表达式、常用的正则方法如`test`和`exec`，以及各种元字符的用法，如边界符`^`和`$`、限定符`*`、`+`等。此外，还讲解了特殊元字符如括号`()`、或操作符`|`以及重复元字符`1`等。文章通过实例演示了正则表达式的匹配过程，并探讨了其两大特性——懒惰和贪婪模式。"

摘要由CSDN通过智能技术生成

正则

什么是正则

正则就是一种规则的的表达式,书写一段规则,用于匹配一段字符串是否符合规则
创建正则表达式
创建正则表达式有两种方式:
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>

兰de宝贝

关注

11
点赞
踩
49

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS中的正则表达式

正则就是一种规则的的表达式,书写一段规则,用于匹配一段字符串是否符合规则创建正则表达式创建正则表达式有两种方式:1.字面量的形式2.内置构造函数的形式 * 1. 字面量的形式 const reg = / abc / * 2. 内置构造函数的形式 const reg1 = new RegExp('abc') console . log(reg) // /abc/ console . log(reg1) // /abc/ *1.
复制链接

扫一扫