前端系列:正则表达式RegExp详解

目录

正则创建

  • 字面量创建

    js 复制代码
    const str = 'asdf123sds3234'
    const regexp = /\d+/g
    const res = str.match(regexp)
    console.log(res) //['123', '3234']
  • 构造函数

    js 复制代码
    const str = 'asdf123asad23121'
    const regexp = new RegExp('\\d+', 'g')
    const res = str.match(regexp)
    console.log(res) // ['123', '23121']

匹配方法

  • 字符串方法

    • match:返回一个字符串匹配正则表达式的结果,如果未找到匹配则为null

      js 复制代码
      const str = 'asdf123sds3234'
      const regexp = /\d+/g
      const res = str.match(regexp)
      console.log(res) //['123', '3234']
    • search:返回正则表达式在字符串中首次匹配项的索引;否则,返回 -1

      js 复制代码
      const str = 'as12121es121sd'
      const regexp = /\d+/
      const res = str.search(regexp)
      console.log(res) // 2
    • replace:返回一个由替换值(replacement)替换部分或所有的模式(pattern)匹配项后的新字符串。模式可以是一个字符串或者一[正则表达式],替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串,则仅替换第一个匹配项

      js 复制代码
      const str = 'asahsashhuihui12332467y7'
      const regexp = /(hui)|(123)/g
      const res = str.replace(regexp, '*')
      console.log(res) //asahsash***32467y7
      const res2 = str.replace(regexp, (arg) => {
          return '*'.repeat(arg.length)
      })
      console.log(res2) //asahsash*********32467y7
    • split:方法使用指定的分隔符字符串将一个String对象分割成子字符串数组,以一个指定的分割字串来决定每个拆分的位置

      js 复制代码
      const str = 'cccasdfgd9asasdsa12121'
      const regexp = /a/
      const res = str.split(regexp)
      console.log(res) //['ccc', 'sdfgd9', 's', 'sds', '12121']
  • 正则对象方法

    • test:执行一个检索,用来查看正则表达式与指定的字符串是否匹配。返回 truefalse

      js 复制代码
      let str = 'asdhadhjkhjk12323879789pjdhjfhj'
      let regexp = /\d+/
      let res = regexp.test(str)
      console.log(res) // true
      regexp = /m/
      res = regexp.test(str)
      console.log(res) // false
    • exec:方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null

      js 复制代码
      let str = 'sfkdhjk12238jks544jk'
      let regexp = new RegExp('\\d+', 'g')
      let res = regexp.exec(str)
      console.log(res) //['12238', index: 7, input: 'sfkdhjk12238jks544jk', groups: undefined]
      res = regexp.exec(str)
      console.log(res) //['544', index: 15, input: 'sfkdhjk12238jks544jk', groups: undefined]

元字符

  • . :匹配默认除(\n,\r,\u2028,\u2029)之外的任何单个字符

    js 复制代码
    const str = 'adad12121dfe234s'
    const regexp = /./
    const res = str.replace(regexp, '*')
    console.log(res) //*dad12121dfe234s
  • \ :转义符,它有两层含义

    • 表示下一个具有特殊含义的字符为字面值

    • 表示下一个字符具有特殊含义(转义后的结果是元字符内约定的)

    js 复制代码
    const str = 'sdsds/dfdfd12121'
    const regexp = /\/d/
    const res = regexp.test(str)
    console.log(res) //true
  • \d :匹配任意一个阿拉伯数字的字符

    js 复制代码
    const str = 'xsdsd3121xcxx12121cx'
    const regexp = /\d+/
    const res = regexp.exec(str)
    console.log(res) //['3121', index: 5, input: 'xsdsd3121xcxx12121cx', groups: undefined]
  • \D :匹配任意一个非阿拉伯数字的字符

    js 复制代码
    const str = 'xsdsd3121xcxx12121cx'
    const regexp = /\D+/
    const res = regexp.exec(str)
    console.log(res) //['xsdsd', index: 0, input: 'xsdsd3121xcxx12121cx', groups: undefined]
  • \w :匹配任意一个(字母、数字、下划线)的字符

    js 复制代码
    const str = '@qwqwq_asas12121df0df0l;ll'
    const regexp = /\w+/g
    const res = str.match(regexp)
    console.log(res) //['qwqwq_asas12121df0df0l', 'll']
  • \W :匹配任意一个非(字母、数字、下划线)的字符

    js 复制代码
    const str = '@qwqwq_asas12121df0df0l;ll'
    const regexp = /\W+/g
    const res = str.match(regexp)
    console.log(res) //['@', ';']
  • \s :匹配一个空白符,包括空格、制表符、换页符、换行符和其他的Unicode 空格

    js 复制代码
    const str = 'sdhjk\n\rsdsd\n'
    const regexp = /\s+/g
    const res = str.replace(regexp, '-')
    console.log(res) //sdhjk-sdsd-
  • \S :匹配一个非空白符

    js 复制代码
    const str = 'sdhjk\n\rsdsd\n'
    const regexp = /\S+/g
    const res = str.match(regexp)
    console.log(res) //['sdhjk', 'sdsd']
  • \t :匹配一个水平制表符(horizontal tab)

    js 复制代码
    const str = 'sdhjk\tsdsd'
    const regexp = /\t/
    const res = regexp.test(str)
    console.log(res) //true
  • \r :匹配一个回车符(carriage return)

    js 复制代码
    const str = 'sdhjk\rsdsd'
    const regexp = /\r/
    const res = regexp.test(str)
    console.log(res) //true
  • \n :匹配一个换行符(linefeed)

    js 复制代码
    const str = 'sdhjk\nsdsd'
    const regexp = /\n/
    const res = regexp.test(str)
    console.log(res) //true
  • \v :匹配一个垂直制表符(vertical tab)

    js 复制代码
    const str = 'sdhjk\vsdsd'
    const regexp = /\v/
    const res = regexp.test(str)
    console.log(res) //true
  • \f :匹配一个换页符(form-feed)

    js 复制代码
    const str = 'sdhjk\fsdsd'
    const regexp = /\f/
    const res = regexp.test(str)
    console.log(res) //true

字符集合

  • [xyz] :一个字符集合。匹配方括号中的任意字符,包括转义序列。你可以使用破折号(-)来指定一个字符范围。对于点(.)和星号(*)这样的特殊符号在一个字符集中没有特殊的意义。他们不必进行转义,不过转义也是起作用的

    js 复制代码
    const str = 'dfgd12312df57676ds'
    const regexp = /[1-9]+/g
    const res = str.match(regexp)
    console.log(res) //['12312', '57676']
  • [^xyz] :一个反向字符集。也就是说, 它匹配任何没有包含在方括号中的字符。你可以使用破折号(-)来指定一个字符范围。任何普通字符在这里都是起作用的

    js 复制代码
    const str = 'dfgd12312df57676ds'
    const regexp = /[^1-9]+/g
    const res = str.match(regexp)
    console.log(res) //['dfgd', 'df', 'ds']
  • [\b] :匹配一个退格(backspace)。(不要和\b 混淆了。)

    js 复制代码
    const str = `dfgd12312df\b57676ds`
    const regexp = /[\b]/g
    const res = str.match(regexp)
    console.log(res) //['\b']

边界

  • ^ :匹配输入的开始。如果多行标志被设置为 true,那么也匹配换行符后紧跟的位置

    js 复制代码
    const str = `sds234fsd\nsd4345ds\nsqwq`
    const regexp = /^sd.*/gm
    const res = str.match(regexp)
    console.log(res) //['sds234fsd', 'sd4345ds']
  • $ :匹配输入的结束。如果多行标志被设置为 true,那么也匹配换行符前的位置

    js 复制代码
    const str = `sds234fsd\nsd4345ds\nsqwq`
    const regexp = /^sd.*d$/gm
    const res = str.match(regexp)
    console.log(res) //['sds234fsd']
  • \b :匹配一个词的边界。一个词的边界就是一个词不被另外一个"字"字符跟随的位置或者前面跟其他"字"字符的位置,例如在字母和空格之间。注意,匹配中不包括匹配的字边界。换句话说,一个匹配的词的边界的内容的长度是 0。(不要和[\b]混淆了)

    js 复制代码
    const str = `this is dog`
    const regexp = /\bi/
    const res = str.match(regexp)
    console.log(res) //['i', index: 5, input: 'this is dog', groups: undefined]
  • \B :匹配一个非单词边界

    js 复制代码
    const str = `this is dog`
    const regexp = /[a-z]+\Bi[a-z]+/
    const res = str.match(regexp)
    console.log(res) //['this', index: 0, input: 'this is dog', groups: undefined]

分组

  • () :对表达式进行分组,类似数学中的分组,也称为子项

    • 索引分组:(x)

      js 复制代码
      const str = 'asabvb\r121ghjsdhj sdsds'
      const regexp = /(\w+)\r(\w+)/
      const res = str.match(regexp)
      console.log(res) //['asabvb\r121ghjsdhj', 'asabvb', '121ghjsdhj', index: 0, input: 'asabvb\r121ghjsdhj sdsds', groups: undefined]
    • 命名分组:(? ),groups 属性

      js 复制代码
      const str = 'asabvb\r121ghjsdhj sdsds'
      const regexp = /(?<str>\w+)\r(\w+)/
      const res = str.match(regexp)
      console.log(res) //['asabvb\r121ghjsdhj', 'asabvb', '121ghjsdhj', index: 0, input: 'asabvb\r121ghjsdhj sdsds', groups: {str: 'asabvb'}]
    • 捕获匹配:(x)

      js 复制代码
      const str = 'this is dog'
      const regexp = /(this)/
      const res = str.match(regexp)
      console.log(RegExp.$1) //this
      console.log(res) //['this', index: 0, input: 'this is dog', groups: undefined]
    • 非捕获匹配:(?:x)

      js 复制代码
      //简而言之就是不捕获文本 ,也不针对组合计进行计数
      const str = 'this is dog'
      const regexp = /(?:this)/
      const res = str.match(regexp)
      console.log(RegExp.$1) //''
      console.log(res) //['this', index: 0, input: 'this is dog', groups: undefined]
    • 断言/预查

      • 正向肯定断言:x(?=y)
      js 复制代码
      const str = 'iphone8iphone11iphoneNumber'
      const regexp = /iphone(?=\d{1,2})/g
      const res = str.replace(regexp, '苹果')
      console.log(res) //苹果8苹果11iphoneNumber
      • 正向否定断言:x(?!y)
      js 复制代码
      const str = 'iphone8iphone11iphoneNumber'
      const regexp = /iphone(?!\d{1,2})/g
      const res = str.replace(regexp, '苹果')
      console.log(res) //iphone8iphone11苹果Number
      • 负向肯定断言
      js 复制代码
      const str = '10px20px30pxxpx'
      const regexp = /(?<=\d{2})px/g
      const res = str.replace(regexp, '像素')
      console.log(res) //10像素20像素30像素xpx
      • 负向否定断言
      js 复制代码
      const str = '10px20px30pxxpx'
      const regexp = /(?<!\d{2})px/g
      const res = str.replace(regexp, '像素')
      console.log(res) //10px20px30pxx像素

数量词汇

  • x{n} :n 是一个正整数,前面的模式 x 连续出现 n 次时匹配

    js 复制代码
    let str = '123ab_cd123'
    let regexp = /[a-z]{3}/g
    let res = str.replace(regexp, '*')
    console.log(res) //123ab_cd123
    regexp = /[a-z]{2}/g
    res = str.replace(regexp, '*')
    console.log(res) //123*_*123
  • x{n,m} :n 和 m 为正整数,前面的模式 x 连续出现至少 n 次,至多 m 次时匹配

    js 复制代码
    let str = '123ab_cd123'
    let regexp = /[a-z]{1,2}/g
    let res = str.replace(regexp, '*')
    console.log(res) //123*_*123
    regexp = /[a-z]{1,1}/g
    res = str.replace(regexp, '*')
    console.log(res) //123**_**123
  • x{n,} :n 是一个正整数,前面的的模式 x 连续出现至少 n 次时匹配

    js 复制代码
    let str = '123abwasdsd_123'
    let regexp = /[a-z]{1,}/g
    let res = str.replace(regexp, '*')
    console.log(res) //123*_123
  • x* :匹配前面的模式 x 0 次或多次,等价于

    js 复制代码
    let str = '123abwasdsd_123'
    let regexp = /123*/g
    let res = str.replace(regexp, '*')
    console.log(res) //*abwasdsd_*
  • x+ :匹配前面的模式 x 1 次或多次,等价于

    js 复制代码
    let str = '123abwasdsd_123'
    let regexp = /123+/g
    let res = str.replace(regexp, '*')
    console.log(res) //*abwasdsd_*
  • x? :匹配前面的模式 x 0 次或 1 次,等价于

    js 复制代码
    let str = '123abwasdsd_123'
    let regexp = /d_123?/g
    let res = str.replace(regexp, '*')
    console.log(res) //123abwasds*
  • x|y :匹配 x 或 y

    js 复制代码
    let str = '123abwasdsd_123'
    let regexp = /[A-Z]|[a-z]+/g
    let res = str.replace(regexp, '*')
    console.log(res) //123*_123

匹配模式

  • g:全局搜索

    js 复制代码
    let str = '123abwasdsd_123'
    let regexp = /\d+/
    let res = str.replace(regexp, '*')
    console.log(res) //*abwasdsd_123
    regexp = /\d+/g
    console.log(regexp.global) // true
    res = str.replace(regexp, '*')
    console.log(res) //*abwasdsd_*
  • i:不区分大小写搜

    js 复制代码
    let str = '123abCasdsd_123'
    let regexp = /[a-z]+/g
    let res = str.replace(regexp, '*')
    console.log(res) //123*C*_123
    regexp = /[a-z]+/gi
    console.log(regexp.ignoreCase) // true
    res = str.replace(regexp, '*')
    console.log(res) //123*_123
  • m:多行搜索

    js 复制代码
    let str = `abas
    asds`
    let regexp = /^\w+/gm
    console.log(regexp.multiline) // true
    let res = str.replace(regexp, '*')
    console.log(res) //* *
  • s:允许 .匹配换行符

    js 复制代码
    let str = `<div>hello world
                </div>`
    let regexp = /<div>.*<\/div>/gs
    console.log(regexp.dotAll)
    let res = regexp.test(str)
    console.log(res) //true
  • u:使用 unicode 码的模式进行匹配

    js 复制代码
    console.log(/^.$/.test('\uD842\uDFB7')) //false
    console.log(/^.$/u.test('\uD842\uDFB7')) //true
    console.log(/^.$/u.unicode) // true
  • y:执行"粘性(sticky)"搜索,匹配从目标字符串的当前位置开始

    js 复制代码
    const str = '121278789s834234dsssdf'
    const regexp = /\d+/gy
    console.log(regexp.sticky)
    console.log(regexp.exec(str)) // ['121278789', index: 0, input: '121278789s834234dsssdf', groups: undefined]
    console.log(regexp.exec(str)) // null

RegExp 方法特性

js 复制代码
;/a/[Symbol.match]('abc')
;/a/[Symbol.matchAll]('abc')
;/a/[Symbol.replace]('abc', 'A')
;/a/[Symbol.search]('abc')
;/-/[Symbol.split]('a-b-c')
const str = 'asfs1212343sdsds12asa'
let regexp = /\d+/g
regexp.exec(str)
console.log(RegExp.input) //asfs1212343sdsds12asa
console.log(RegExp.$_) //asfs1212343sdsds12asa
console.log(regexp.lastIndex) //11
console.log(RegExp.lastMatch) //1212343
console.log(RegExp['$&']) //1212343
console.log(RegExp.leftContext) //asfs
console.log(RegExp['$`']) //asfs
console.log(RegExp.rightContext) //sdsds12asa
console.log(RegExp["$'"]) //sdsds12asa
regexp = /(\d+)([a-z]+)/g
const res = str.replace(regexp, '$1')
console.log(RegExp.$1) //12
console.log(RegExp.$2) //asa