正则

节奏布鲁斯
84 阅读3分钟

正则

  • 规则： 利用JS代码，书写一个规则，用于判断一个字符串是否符合我们的规则。
  • 例如：一个邮箱的组成,一个注册页的功能

注释的书写

  • 字面量的方式： const reg = /abc/ 当前正则要求一个字符串中包含abc这三个字符，而且是小写的abc
  • 内置构造函数的方式：const reg = new RegExp('abcd')

正则的常用方法：

1：匹配

一般用于判断一个字符传是否符合我们的正则书写的规则，通过一个布尔值确定是否符合规则

  • 语法：正则.test(传入一个需要判断的字符串)

捕获：

正则的普通元字符

1：元字符

  • 就是一个普通的文本，但是在正则中具有特殊的含义

2：修饰符

其实也是一个普通的文本，但是修饰符整个正则去使用 的正则的普通元字符

  • 1： \d 表示一位数字（0-9）
  • 2： \D 表示一位非数字（0-9之外的）
  • 3： \s 表示一位空白内容（空格 缩进）
  • 4： \S 表示一位非空白内容（空格，缩进之外的）
  • 5： \w 表示一位数字（0-9）字母（a-zA-Z)下划线
  • 6： \W 表示一位非数字（0-9）字母（a-zA-Z）下划线
  • 7： . 表示一位非换行的内容
  • 8： \ 表示一个转义符，=> 可以将没有意义的一个字符 转换成具有特殊含义的字符，=> 可以将有意义的一个符号 转换成没有意义的特殊符号
  • 9： \n 代表换行

正则的边界元字符

在某些情况下，我们会开头和结尾都写上，在这种时候，当前的正则式严格匹配，要求字符串必须是符合正则规则的

1： ^ 表示开头

  • ^ 表示开头
  • const res = /^\d/ 要求字符串开头是数字0-9其中的某一个

2： $ 表示结尾

  • const reg = /\d$/ 要求字符串的结尾是数字0-9其中的某一个
  • 当正则中同时出现 开头和结尾, 表明要个要求我们的字符串必须是和我们的正则规则相同
  • const reg = /^\d/ 要求字符串中只能说一个0-9之间的数字
  • 案例去求一个小数 9.8
  • 应该这样写 const reg = /^\d.\d$/

正则的限定元字符

作用：限定了前一个字符出现的次数

    •       * 表示前一个字符出现 0~正无穷次

    •    + 表示前一个字符出现 1~正无穷次

    •    ？表示前一个字符出现 0~1
  • 注意: 下边几个 元字符内 千万不要加空格
    • {n} 表示前一个字符出现 n 次

    • {n,} 表示前一个字符出现 n~正无穷次

    • {n,m} 表示前一个字符出现 n~m次

正则的特殊元字符

1: ()
     作用1：单独捕获
     作用2：将括号内的内容，当成一个整体
2：|
     作用：或者的含义
3：[]
     作用：包含
         中括号内可以有无数个字符，要求字符串中某一位是这个中括号内的内容即可
         注意：中括号内不管书写多少个字符，只表示一位
4：[^]
      作用：不包含
5： -
      作用：到
      一般会和[] 或者 [^] 一起使用
      案例：[0-9] -> 表示0~9其中的某一个数字就行
      案例：[a-z] -> 表示 a~z 其中的某一个小写字母就行
      案例：[A-Z] -> 表示0~9之外的任意一个字符就行

image.png

image.png

image.png

image.png

元字符或的特别之处：

  • 问题：或的分界线在哪里？
  • 是否有小括号
    • 有：将左右两边进行拆分，一直到小括号的位置结束，不会影响小括号外的正则
    • 没有： 直接将正则一分为二

image.png

image.png

image.png

正则的重复元字符

  • 语法： \1, \2, \3, \4……\n
  • 表示重复当前正则的第n个小括号中的内容

image.png

正则的捕获方法

捕获其实就是去字符串中寻找符合规矩的部分

语法：正则.exec('字符串')
返回值 : 
    没有符合规则的部分：null
    有符合规则的部分：必然会返回一个数组，数组[0]使我们捕获到的内容
    1：没有（），也没有修饰符g
        const reg = /\d{3}/
        console.log(reg.exec('qwe123')) // ['123', index: 3, input: 'qwe123', groups: undefined]
        console.log(reg.exec('QF001'))  // ['001', index: 2, input: 'QF001', groups: undefined]
    2. 有（）
        会返回一个数组，[0] 也是我们捕获到的内容，[1]开始使我们正则的小括号单独捕获到的内容
        const reg = /(\d{3})(\d{3})(\d{3})(\d{3})(\d{3})(\d{3})/
        console.log(reg.exec('411381200510166666')) // ['411381200510166666', '411', '381', '200', '510', '166', '666', index: 0, input: '411381200510166666', groups: undefined]
    3. 有修饰符g
        捕获完毕会继续没有符合的字符了就会返回一个null 回到[0]的位置继续捕获
        const reg = /\d{3}/g
        const str = 'qwe123asd456'
        console.log(reg.exec(str))  // ['123', index: 3, input: 'qwe123asd456', groups: undefined]
        console.log(reg.exec(str))  // ['456', index: 9, input: 'qwe123asd456', groups: undefined]
        console.log(reg.exec(str))  // null

修饰符补充

    1. g： 将当前正则的捕获方式改为全局捕获
    1. i： 将当前正则调整为 忽略大小写

正则的两大特性

    1. 贪婪
            在捕获的时候，尽可能的多去哪一些内容
            贪婪限定符，如果在正则使用，默认开启贪婪模式
            *
            +
            ?
            {n，}
            {n，m}
            如果需要开启非贪婪模式，直接在每一个贪婪限定符后添加一个？
            *?
            +?
            ??
            {n,}?
            {n,m}?
   2. 懒惰
           在正则中我们每一次捕获都是处于懒惰模式，那么也就是说，每一次都会从[0]开始捕获
           如果想要开启非懒惰模式，只需要在正则的最后添加一个修饰符 g
const str = '<div class="box" id="qf001"><p>你好, <span>JS</span></p></div>'
const reg = /<div.*>/
console.log(reg.exec(str)[0])  // '<div class="box" id="qf001"><p>你好, <span>JS</span></p></div>'
const reg_1 = /<div.*?>/
console.log(reg_1.exec(str)[0]) // <div class="box" id="qf001">

两种创建正则的区别

    1. 字面量
    1. 内置构造函数
    1. 书写修饰符的区别
        const reg_1 = /\w/ig
        
        const reg_4 = new RegExp('abcd', 'ig')
    2. 拼接变量和字符串
        const reg_1 = /^QQ|WW$/
        
        
        const str1 = 'QQ'
        const str2 = 'WW'
        const reg_3 = new RegExp('^' + str1 + '|' + str2 + '$')
    3. 书写元字符的区别
        const reg_1 = /\d\w\s/
        console.log(reg_1)  // /\d\w\s/
        
        const reg_3 = new RegExp('\\d\\w\\s')

字符串中能使用正则的方法

    字符串中能够使用正则的方法
        1. replace
            字符串.replace('要找的字符串片段'， '要加入的新字符串')
            字符串.replace(正则，'要加入的新字符串')
            1. replace
            let str = 'QWE000ASD000ZXC000'
            str = str.replace('000', '999')
            console.log(str)    // QWE999ASD000ZXC000
            str = str.replace(/\d{3}/, '999')
            console.log(str)    // QWE999ASD000ZXC000
            str = str.replace(/\d{3}/g, '999')
            console.log(str)    // QWE999ASD999ZXC999
            
            
        2. search
            字符串.search('字符串片段')
            const str = 'QF001'
            console.log(str.search('0'))    // 2
            console.log(str.search('9'))    // -1
            console.log(str.search(/\d{1}/))    // 2
            
            
        3. match
            字符串.match('字符串片段')
            字符串.match('正则')
            const str = 'QF001qwe123asd999'
            console.log(str.match('001'))    // ['001', index: 2, input: 'QF001qwe123asd999', groups: undefined]
            console.log(str.match(/\d{3}/))     // ['001', index: 2, input: 'QF001qwe123asd999', groups: undefined]
            console.log(str.match(/\d{3}/g))     // ['001', '123', '999']
            
                
                如果正则没有修饰符g,那么作用和正则的exec作用一样
                如果正则书写了修饰符g,那么会将字符串中所有符合规则的部分 存放在一个数组中返回
avatar
文章
阅读
粉丝