正则表达式的学习运用

正则表达式基本常识

常用运算符与表达式

1.^ 开始，从头开始匹配
2.() 域段
3.[] 包含,默认是一个字符长度
4.[^] 不包含,默认是一个字符长度
5.{n,m} 匹配长度
6..任何单个字符(. 字符点)
7.| 或
8.\ 转义
9.$ 结尾，从最后还是匹配
10.[A-Z] 26个大写字母
11.[a-z] 26个小写字母
12.[0-9] 0至9数字
13.[A-Za-z0-9] 26个大写字母、26个小写字母和0至9数字

等价

等价是等同于的意思，表示同样的功能，用不同符号来书写。
?,,+,\d,\w 都是等价字符
1.?等价于匹配长度{0,1}
2.等价于匹配长度{0,}
3.+等价于匹配长度{1,}
4.\d等价于[0-9]
5.\D等价于[^0-9]
6.\w等价于[A-Za-z_0-9]
7.\W等价于[^A-Za-z_0-9]

简单运用

0-10000正整数 : /^(0|[1-9]\d{0,3}|10000)$/
0-10内所有实数包括2位小数 ：/[0-9](\.\d{1,2})?|10$/
手机号正则 : /^1[34578][0-9]{9}$/
单词边界 ： /\bis\b/

image.png

修饰符（三个 g 、i、m）

g：global 执行一个全局匹配
i：ignore case执行一个不区分大小写的匹配
m: multiple lines多行匹配

有g和没有g的区别

image.png

有i和没有i的区别

image.png

分组/获取匹配/非获取匹配/预查

不分组 ： /abc{2}/

image.png

分组 ： /(abc){2}/

image.png

获取匹配(pattern):

匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到，在JavaScript中则使用$1…$9属性。

image.png

非获取匹配(?:pattern):

非获取匹配，匹配pattern但不获取匹配结果，不进行存储供以后使用。

image.png

正向肯定预查(?=pattern)和正向否定预查(?!pattern)

反向肯定预查(?<=pattern)和反向否定预查(?

(?=pattern)：非获取匹配，正向肯定预查，在任何匹配pattern的字符串开始处匹配查找字符串，该匹配不需要获取供以后使用。例如，“Windows(?=95|98|NT|2000)”能匹配“Windows2000”中的“Windows”，但不能匹配“Windows3.1”中的“Windows”。
(?!pattern)：非获取匹配，正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串，该匹配不需要获取供以后使用。例如“Windows(?!95|98|NT|2000)”能匹配“Windows3.1”中的“Windows”，但不能匹配“Windows2000”中的“Windows”。
(?<=pattern)：非获取匹配，反向肯定预查，与正向肯定预查类似，只是方向相反。例如，“(?<=95|98|NT|2000)Windows”能匹配“2000Windows”中的“Windows”，但不能匹配“3.1Windows”中的“Windows”。
(?

公式总结：
(?=pattern): exp1(?= exp2) 查找exp2前面的exp1
(?<=pattern): (?<= exp2)exp1 查找exp2后面的exp1
(?!pattern): exp1(?! exp2) 查找后面不是exp2的exp1
(?
举例：变为千分位的正则：
"1234567890".replace(/\B(?=(?:\d{3})+(?!\d))/g,",")
拆分

 /\B(?=(?:\d{3})+(?!\d))/  ->  exp1(?=exp2)  
       exp1 = \B  ,?= exp2 = ?=((?:\d{3})+(?!\d))  -> exp1(?!exp2)
exp1 =  (?:\d{3})+ ,?!exp2 = ?!\d,  exp1 -> \d{3}+

(?!\d) //最后一位不是正整数的\d{3}
\d{3} :   1(234)(567)(890)
exp1(?=exp2):  \B(?=exp2)   //exp2的前一位不是占位符的值
1,(234),(567),(890)
-> 1,234,567,890

在上列正则表达中 (?!\d ) 目的 与 $相同，可简化为

"1234567890".replace(/\B(?=(\d{3})+$)/g,",")

结合场景运用正则

下列为一个遍历树节点的text值的正则实现

//递归
function mapTreeByLoop(data) {
  for (let i = 0; i < data.length; i++) {
    // data[i].label = data[i].text
    console.log(data[i].text)
    if (data[i].children && data[i].children.length > 0) {
      mapTreeByLoop(data[i].children)
    }
  }
}
//正则
function mapTreeByrReg(data) {
  const str = JSON.stringify(data)
  const addStr = str.match(/(?<="text":")[^"]*/g)
  for (let i = 0; i < addStr.length; i++) {
    console.log(addStr[i])
  }
}

//打印运算时间
function startTimeFunc(data) {
  console.time("time")
  // renderTreeFunc(data)
  regFunc(data)
  console.timeEnd("time")
}

对正则运算和 递归循环运算的时间进行比较

image.png

image.png

使用正则的运算时间在16ms左右，而使用递归的时间在29ms，正则的运算稳定比递归运算高效。

以上为我学习时整理,个人认为上述用法全都掌握,善加运用应该绝大部分情况下需要用到的正则都可以妥妥实现。