【学员投稿】学习正则不看这篇基础，你说能行吗？

嗨咯~ 小伙伴们，NEXT学院的【学员投稿专栏】开张啦~  首次投稿的是我们NEXT学位前端完整课程的8班学员“神仙朱”，快来看看他写了哪些好干货吧~

正则很烦，但有了正则，有时能把复杂的东西变得简单。因为正则本身就很复杂，负负得正。

有的正则虽然功能强大，但是非常长，掺杂着很多规则，让人一看就恶心。反正我也是非常怕正则的。

正则需要花费大量的时间去学习规则，研究规则，所以有时很怕去接触它，但是总要学会勇敢面对。

这东西又不是一天学完，就永生记得的，就算忘了然后看我做的笔记，也让人很烦。

所以，我今天必须写得简单明白，也好让自己以后容易捡起来。

鉴于内容真的实在太多，所以第一部写些基础用法，第二部写些高级用法

TIP

Vue 在处理组件模板上，就使用了非常多而且复杂的正则，匹配指令，匹配子组件 等等，简直无往不利，正则重要性可见一斑。

1

    正则

正则 是 对字符串的一种过滤逻辑，主要作用对象是字符串

正则的作用

1、匹配字符串位置

2、获取特定的字符串

我打算从下面几部分去总结正则

1、正则的基本语法

2、正则的 flags，也就是标志位

3、正则涉及的方法和属性

4、重复量词

5、分组，捕获

6、引用、反向引用

7、正向前瞻、反向前瞻

8、贪婪匹配、惰性匹配

内容很多，也很不容易理解，需要亲身实践，体会其中规则的用处。

分组捕获、引用反向引用，正向反向前瞻，贪婪惰性匹配 会放到 下篇文章说明，这几块内容 比较重要 和 复杂，是使用正则必须掌握的高级内容

2

    正则基本语法

基本语法，就是我们经常会在正则中使用到的规则，说明的列表如下

根据解释来看，是挺好理解的，直到我在项目中使用了，现在特别讲一下疑惑过我的地方

1

\b 匹配单词边界

单词边界到底是什么东西？

举栗子

既然说匹配边界，使用 \b 匹配 " 222 name" 得到的边界是什么东西？如图

可以看到，图中粉色的虚线，就是匹配的边界。把111 和 word 当做一个单词，那么单词的边界，就是单词的两边啦！默认是 连续数字 和 连续字母 当做一个单词

“ 连续数字，连续字母，如果连续的词中间加个标点符号呢？"

试试在 word 中间加一个 +

额，还是一样，把 wo 和 rd 当成了一个单词，所以匹配出 四条边界

尝试下把边界 替换 成其他东西

2

\B 匹配非单词边界

这个说的是匹配非单词边界

同样的例子测试

得到的边界，是除了 单词两边之外的所有的边界。

按我的理解

每个字符都有两边，这两边就是字符的边界

匹配结果 = 所有字符的边界 - 所有单词的边界

尝试下把边界替换成其他东西

3

\s 匹配空白符

匹配任意空白字符，这个空白字符，可 不止是空格 而已，还包括下面这些

这些 一开始我也不知道的，以为只匹配 空格而已，真是无奈

来，我们使用 \s 尝试匹配上面的的空白符，发现都可以被匹配到，好的，没有被骗

4

.  不匹配 换行符

. 可以匹配任意字符，却不包括 换行符，现场试验

一个含有 换行符 的字符串打印如下

开始匹配，发现 \n 没有被替换，坐实了坐实了

3

    正则标志位

正则有三个标志位

1、ignoreCase，简写为 i

2、muitiline，简写为 m

3、global，简写为 g

1

ignoreCase

正则加上 i，那么就 不区分大小写 

对比 有 i 和 没 i 的区别

2

global

正则加上 g，就会 全局匹配

对比 有 g 和 没 g 的区别

3

multiline

正则加上 m，就会 多行匹配

而往往多行匹配也要加上 g 才行

A：" 那我直接用 g 不就好了？还能 m 干嘛？" 

B：" 恩，如果你想匹配多行的开头时，就有用了 " 

对比 有 m 和 没 m 的区别

哈哈 

用 g 不用 m，你一样匹配不到其他行的开头， gm 缺一不可

4

    正则涉及的方法和属性

正则可以调用哪些方法 和属性？

1、方法：test 、exec

2、属性：source、ignoreCase、multiline、global

1

方法 test

验证字符串是否可以匹配正则

返回 布尔值，常用于表单验证

2

方法 exec

找出字符串中的 匹配项

返回一个数组，数组 包含 第一个匹配项，index（匹配项在字符串中的位置），input（匹配的字符串）

exec 需要记住两个点

1、常用于正则捕获时

      捕获就是把特定的字符串抓出来，在后面会详细说

2、不管是否设置 全局搜索 g，都只会返回 一个匹配项

a. 没有设置全局匹配 g

      不管你调用多少次，都只会返回 第一个 匹配项

var str="abc"
var reg1=/\w/reg1.exec(str)
reg1.exec(str)
reg1.exec(str)

b. 设置了全局匹配 g

var str="abc"
var reg1=/\w/greg1.exec(str)
reg1.exec(str)
reg1.exec(str)

看到了把，如果设置了 全局搜索 g，那么  exec 会在字符串上 继续 去匹配

到底是什么魔力？欢迎来到本期探索未知的世界

答案是 对象的属性 - lastIndex！

如果我每次调用 exec 都重置一次 lastIndex 的话

var str="abc"
var reg1=/\w/g
reg1.exec(str)
reg1.lastIndex = 0
reg1.exec(str)
reg1.lastIndex = 0
reg1.exec(str)

结局和 没有放 g 是一样的结果，事实证明了是 lastIndex 在作祟，保存了上一次匹配的位置，然后下次匹配时，从上一次位置开始，而不是从头开始了

所以说，哪有从头开始的爱情，不过是 从上一个伤疤 继续。

3

属性 source

返回 正则 的 字符串形式

4

属性 ignoreCase

返回 当前正则是否设置 忽略大小写

5

属性 multiline

返回 当前正则是否设置 多行匹配

6

属性 global

返回 当前正则 是否设置 全局匹配

字符串在哪些方法中可以使用正则 ？

match，replace，split，search

1

match

这个方法很奇怪，返回的东西跟正则是否设置全局有关

a. 没有设置了全局

var str="abc"
var reg1=/\w/
console.log(str.match(reg1))

返回的内容和 正则 的 exec 方法一毛一样

b. 设置全局

返回一个数组，里面存放所有匹配项

这样是不是感觉挺爽的哦，把所有匹配项都放在一个数组，就像是....

把石榴全都剥出来放在一个碗里的感觉一样

但是这个方法，想使用分组，以为可以把所有 括号匹配项 放进去的时候，哎，人算不如天算啊......

2

replace

正则替换，感觉没什么好说的....

说明一下，replace 不会改变原来字符串，而是返回替换后的字符串

3

split

把不是匹配项的放在一个数组里面

有人说，那我这么做效果是一样的啊，为毛还要用正则？

正则当然是为了处理复杂的情况，比如你的字符串中有很多个 空格，你说要怎么匹配

正则这时候不就起作用了吗？现在就算你有几百个 空格 ，都一样正常匹配，这就是正则的作用场景。

感觉像是容错匹配一样

4

search

返回匹配项 在 字符串中的 起始位置，如果找不到就返回-1

恩 ，bc的起始位置 在 字符串中的 第一个位置（从 第0 个位置开始的）

上面这些方法，都可以使用 字符串 代替 正则 去 进行 replace，split，但是 使用字符串，匹配的情况太少，而使用正则，可以适用很多种情况，完成更加复杂的功能。

5

    重复量词

量词挺简单的一个东西，理解起来好像没什么问题，无非就是匹配多少次的问题

(～￣▽￣)～ 

   最后

我现在学一样东西，不求自己马上掌握，也不要求自己总是复习，因为没有太多的时间和耐心。

所以我现在，必须把那些容易忘而且难的东西，给简单化地写成一篇文章，这样，就算忘记了，瞅一眼就能捡回来

节省自己的时间的时候，也希望能够帮助到需要的人，大家一起进步。

未完待续........ 高级篇在路上

你也想成为腾讯工程师？

也想年薪噌噌噌往上涨？

那就快加入NEXT学院吧！

NEXT学院课程「Web前端工程师NEXT学位完整课程」限时特价！

感兴趣的同学赶紧点击原文了解详情吧~

腾讯NEXT学院

求职干货 | 前辈blog  | 前端课程

↓↓↓点击阅读原文，抢购限时优惠