前端的正则使用（基础篇）

正则的总结，进行过多次，但一般都是记不了几天就会忘得无法有效使用。究其原因就一个：没有明白其中的原理，死记硬背。而我是一个不爱死记硬背的人。所以这次又一次总结，从原理上加以整理。

1，基本概念

正则表达式的三个基本元素：元字符，量词，修饰符。

元字符：/abc/  ，比如左边的正则匹配字符串中的abc。正则中的abc就是元字符。元字符是正则匹配的基本元素。

量词：是元字符中的重复性概念。比如/\d{5}/ 表示匹配5个数字。量词也属于元字符。

修饰符：指的是匹配字符串的“模式”。

1.0 修饰符

修饰符最简单：指的是匹配字符串的“模式”。

i ：忽略大小写

g：全局匹配

m：多行匹配

比如：

/abc/i  // 可匹配 'ABC'复制代码

var a = /a/g  // 全局匹配。只要有匹配成功的结果一直匹配直到没有为止复制代码

​

如上图，每次调用a.exec都会返回一个新位置的匹配结果。直到返回null为止。

1.1，匹配基本元素：

元字符	说明	示例
.	匹配除换行符之外的任意字符
[ ]	匹配括号内的任一个字符。	/[0-9]/ 匹配0到9间的任意数字
[^ ]	匹配除去括号内的任意其他字符。	[^0-9] 匹配任意一个非数字其他字符
\	转义字符，匹配保留字符 [ ] ( ) { } . * + ? ^ $ \ |	\* 匹配字符 “*”
^	匹配行的开始(区别于中括号中的那种用法)	/^a/ 匹配以a开始的字符串
$	匹配行的结束	/a$/ 匹配以a结束的字符串

1.2，匹配的重复：

也称为量词。主要的作用是用来描述元字符出现的次数

+	匹配上一个字符一次以上（>= 1）	/a+/ 匹配a一次以上
*	匹配上一个字符0次以上(>= 0)	/a*/ 匹配a 0到多次
？	匹配上一个字符0次或1次	/[T]?he/ 可匹配 The, he.
{a, b}	匹配上一个字符次数：a<=x<=b	[0-9]{2,3} 匹配数字2或者3次

1.3，捕获组

捕获组是把正则表达式中子表达式匹配的内容，保存在内存中以数字编号或显示命名的组里，方便后面引用。

捕获组的语法如下：

（Expression）

// 举例
/(ab)c/  // 匹配 'abc...'

/(ab){3,5}/  //匹配 'ababab...'复制代码

1.4，分支结构 |

分支结构是一种 “或” 的选择关系： 比如，

 /a|b/ // 匹配 '...a...' 也匹配 '...b...'

// 再比如： 
/aa|bb/  // 匹配 aa 或者 bb.复制代码

1.5，简写字符集（3类）

\d	匹配数字：[0-9]
\D	匹配非数字：[^\d]
\w	匹配字母数字下划线：[a-zA-Z0-9]
\W	匹配非字母数字下划线：[^\w]
\s	匹配各类空格符：[\t\n\f\r\p]
\S	匹配非空格符：[^\s]

2，断言

```javascript
$(document).ready(function () {
    alert('hello world');
});
```复制代码

后行断言和先行断言有时候被称为断言，它们是特殊类型的 非捕获组 (用于匹配模式，但不包括在匹配列表中)。当我们在一种特定模式之前或者之后有这种模式时，会优先使用断言。 以下是正则表达式中使用的断言:

符号	描述
?=	正向先行断言
?!	负向先行断言
?<=	正向后行断言
?<!	负向后行断言

2.1 正向先行断言 & 负向先行断言

先行断言的表达式从理解的角度可以分为两部分。返回的匹配结果是：

仅包含与第一部分表达式相匹配的文本。

怎么理解这种匹配关系？

比如：

abc(?=def).  复制代码

只有在字符串是 ‘abcdef...’时，匹配成功。但返回的匹配结果是‘abc’， 而后面的'def‘部分是不捕获的。而这个‘abc’就是表达式的第一部分。

负向先行断言的用法一样，只是匹配的是“非”的概念。 比如：

abc(?!def) 匹配的是 : abc 后面非def 返回匹配结果 abc.

2.2 正向后行断言 & 负向后行断言

正向后行断言的概念和正向现行断言在顺序上做一个反转，比如：

(?<=abc)(def)复制代码

表示在字符串是 'abcdef...' 时，匹配成功。但前面的’ abc' 部分是不捕获的，返回的结果是‘def' 。负向后行断言的效果也是取反，表示如果前面的字符不是abc,后面字符为def 时捕获。

总结：

正则的基本元素在这里已经介绍完了，拿这些东西可以做不少事情比如：

/[1-9][0-9]{4,10}/ //匹配QQ号复制代码

但只知道这些还是一些基础，对正则的一些高级用法还很吃力，如果对正则的使用频率低，还可能会忘掉某些用法。

所以还需要对正则的原理进行深度挖掘。

参考链接：

翻译：学习正则表达式的简单方法

面试官！让我们聊聊正则

转载于:https://juejin.im/post/5b7a6585e51d4538977159e1