理解正则中的匹配0次以及如何去运用

217 阅读3分钟

上篇文章讲到了正则表达的基础概念和用法, 本章主要详细说明前端正则表达式量词匹配的一些细节点。

知识点

  1. 正则的基本匹配规则是什么?
  2. 贪婪模式和非贪婪模式的区别是什么?
  3. 如何匹配多次?
  4. 匹配0次到底是什么以及它前端重大的运用(重点)?

理解正则匹配的基本原则

1) 永不回头

匹配到了就不会回头匹配

2) 默认贪婪模式

尽可能多的去匹配

let reg = /a+/g,            > 匹配字符串a 一次到多次
    str = 'aaaccddabd'
console.log(str.match(reg)) > ["aaa", "a"] 这里没有['a', 'a', 'a'] 这样展现表现出来贪婪模式

量词匹配细节

1) n+

加号代表一次或者多次

// 匹配多个字母
let reg1 = /\w+/g,
    str1 = 'adsf123'    >一次完全匹配完成 ['adsf']

2) n*

*号代表出现0次或者正无穷次

let reg = /\w*/g,
    str = 'abc'        > ['abc', '']  首先贪婪模式把该匹配的先匹配到abc匹配到了,走到最后c的后面还在字符串里面,因为匹配0次也可以所以给了一个空字符串
    
let reg = /\d*/g
    str.match(reg)
    str = 'abc'        > ['', '', '', ''] 先匹配多次一个都没有匹配上然后逐个匹配空串(a前面的b前面的)

重点理解匹配0次

1) 字符串的最小单位是空串 ''

// 可以理解为 '' + a + ''
let str = 'a'; 

2) 匹配0次或多次的过程分析

  1. 整个过程中优先匹配多次发现一个都没有再去匹配0次
  2. 可以这么理解如果0次匹配就是字符串的最小单位空串'', 所以匹配出了['', '']就是a两边的空串

let str = 'a';
let reg = /b*/g;
console.log(str.match(reg)); // ['', '']就是a两边的空串

3) 证明匹配0次的结果就是''空串

我们通过replace方法, 获取匹配的结果集

let str = 'aaa';
let reg = /.{0}/g;

str.replace(reg, ($) => {
    console.log($); // ['', '', '', ''] 结果为4个空串
})

匹配0次如何运用在工作中

工作中匹配0次主要运用在处理字符串中, 并且有一个特点的场景就是在字符串之间添加某些东西, 例如 将'123456'转化为'1-2-3-4-5-6'

现在有两种方式, 第一种是通过正向预查的方式

// 去除首位和末尾, 利用单词边界
// 1前面的空串后面是单词边界 6后面的空串也是单词边界所以排除
let reg = /(?=\B)/g; // 即可为1-2-3-4-5-6

当然使用正向预查比较难懂, 我们来看一下如何通过匹配0次来进行匹配

// 1前面的空串是单词边界空串 6后面的空串也是单词边界的空串所以匹配的时候排除了
let str = '123456';
let reg = /\B.{0}/g;
console.log(str.replace(reg, '-')); // 1-2-3-4-5-6