如何拯救你的正则表达式知识

1.前言

我们为什么要使用正则表达式？

正则表达式在编程中是一个很重要的工具，它可以用来匹配字符串，也可以用来替换字符串，还可以用来分割字符串。正则表达式的语法很复杂，但是只要掌握了基本的语法，就可以应用到很多的场景中。

但是在前端开发中，正则表达式的应用场景并不多，因为String对象提供了很多的方法可以处理字符串，所以平时对于正则表达式的使用偏薄弱，学习之后容易忘记，今天就简单理解下正则表达式的知识。
从以下几个方面进行讲解：

2.正则表达式的两种匹配模式

1.匹配位置

什么是位置？位置就是相邻字符串之间的位置，当然也包括开头或者结尾。

匹配位置的意思就是说对这个字符串的位置进行匹配，比如说匹配字符串的开头、结尾、或者任意某个位置。下面的示例如果不理解多参考这张图来配合理解

• ^: 匹配(单行/多行)字符串的开头

/^A/ 并不会匹配 “an A” 中的 ‘A’，但是会匹配 “An E” 中的 ‘A’

• $: 匹配(单行/多行)字符串的结尾

/t$/ 并不会匹配 “eater” 中的 ‘t’，但是会匹配 “eat” 中的 ‘t’。

const result = 'hello world'.replace(/^|$/g, '*');

// *hello world*

上述代码执行可以看到开头和结尾的位置被*替换了

• \b: 匹配单词的边界

一个词的边界就是一个词不被另外一个“字”字符跟随的位置或者前面跟其他“字”字符的位置，简单说就是\w与\W之间的位置，当然包括\w与^和$的位置，比如上图中的h前面就是单词边界

const result = 'hello world'.replace(/\b/g, '*');

// *hello* *world*

• \B: 匹配非单词边界

非单词边界就好理解了，除了单词边界外的都是非单词边界，比如上图中的h与e之间就是非单词边界

const result = 'hello world'.replace(/\B/g, '*');

// h*e*l*l*o w*o*r*l*d

• (?=p): 匹配p前面的位置

MDN上称为先行断言，即匹配p前面的位置

const result = 'hello world'.replace(/(?=e)/g, '*');

// h*ello world

• (?!p): 匹配后面不是p的位置

MDN上称为正向否定查找，即匹配后面不为p的位置

const result = 'hello'.replace(/(?!e)/g, '*');

// *he*l*l*o*

const result = 'hello world'.replace(/(?!e)/g, '*');

// *he*l*l*o* *w*o*r*l*d*

• (?<=p): 匹配p后面的位置

MDN上称为后行断言，即匹配p后面的位置

const result = 'hello world'.replace(/(?<=e)/g, '*');

// he*llo world

• (?<!p): 匹配前面不是p的位置

MDN上称为反向否定查找，即匹配前面不为p的位置

const result = 'hello world'.replace(/(?<!e)/g, '*');

// *h*el*l*o* *w*o*r*l*d*

以上四个记忆起来比较困难，我们可以理解包含?=就是断言(肯定)查找而包含?!就是否定查找，然后就是有<就是找后面的位置（后面位置通过<指向前面的括号内容）

2.匹配字符

匹配字符比较好理解，就得对hello里面的字符进行匹配，比如/hello/则是对字符的全量匹配

其实字符匹配有两种匹配模式横向匹配和纵向匹配