JavaScript高级-正则表达式

一、正则表达式的使用

1. 什么是正则表达式

• 正则表达式（Regular Expression，简写为regex、regexp或RE）
• 正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串
• 许多程序设计语言都支持利用正则表达式进行字符串操作
• 简单来说：正则表达式是一种字符串匹配利器，可以帮助我们搜索、获取、替代字符串

2. 正则表达式的创建

• 在JavaScript中，正则表达式使用RegExp类来创建，也有对应的字面量的方式
• 正则表达式主要由两部分组成：模式（patterns）和修饰符（flags）

const re1 = new RegExp("hello", "i")
const re2 = /hello/i

3. 正则表达式的使用方法

• test：在字符串中测试是否匹配的String方法，它返回true或false
• exec：在字符串中执行查找匹配的RegExp方法，它返回true或false
• match：在字符串中执行查找匹配的String方法，它返回一个数组，在未匹配时会返回null
• matchAll：在字符串中执行查找所有匹配的String方法，它返回一个迭代器
• search：在字符串中测试匹配的String方法
• replace：在字符串中执行查找匹配的String方法
• split：使用正则表达式或者固定字符串分隔一个字符串，并将分隔后的字符串存储到数组中的String方法

4. 修饰符flag的使用

• g：匹配全部的
• i：忽略大小写
• m：多行匹配

// 需求：获取一个字符串中所有的abc
const message = "Hello ABC, abc, Abc, AAaBc"
const pattren = /abc/ig
console.log(pattren)

二、正则表达式的常见规则

1. 字符类

• \d：数字（从0到9的字符）
• \s：空格字符
• \w：单字字符（拉丁字母或数字或下划线）
• \D：非数字
• \S：非空格符号
• \W：非单字字符

2. 锚点

• 符号^：匹配文本开头
• 符号$：匹配文本末尾
• 词边界：\b

3. 转义字符串

• 如果需要把特殊字符作为常规字符来使用，需要对其进行转义
• 只需要在它面前加反斜杠
• 常见需要转义的字符：[] \ ^ $ . | ? * + ( )

三、正则表达式的练习

1. 歌词解析

function parseLyric(lyricString) {
    // 1. 根据\n切割字符串
    const lyricLineStrings = lyricString.split("\n")
    
    // 2. 针对每一行歌词进行解析
    const timeRe = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/i
    const lyricInfos = []
    for (const lineString of lyricLineStrings) {
        // 2.1 获取时间
        const result = lineString.match(timeRe)
        if (!result) continue
        const minuteTime = result[1] * 60 * 1000
        const secondTime = result[2] * 1000
        const mSecondTime = result[3].length == 3 ? result[3]*1 : result[3]*10
        
        // 2.2 获取内容
        const content = lineString.replace(timeRe, "").trim()
        
        // 2.3 将对象放到数组中
        lyricInfos.push({ time, content })
    }
    return lyricInfos
}

2. 日期格式化

function formatTime(timestamp, fmtString) {
      // 1. 将时间戳转成Date
      const date = new Date(timestamp)

      // 2. 正则和值匹配起来
      const dateO = {
        "y+": date.getFullYear(),
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      }

      // 3. for循环进行替换
      for (const key in dateO) {
        const keyRe = new RegExp(key)
        if (keyRe.test(fmtString)) {
          const value = (dateO[key] + "").padStart(2, "0")
          fmtString.replace(keyRe,value)
        }
      }

      return fmtString
    }