正则表达式书写

在一些业务场景下，比如用户名密码规则校验，邮箱校验，手机号校验等等，所需的正则表达式我们都可以通过百度直接搜索到。这是推荐给大家的方式。

对于一些复杂规则的正则表达式，并不容易写出来。

下面给大家扩展一些书写正则表达式的语法，可以自行学习。

1. 元字符

正则表达式提供了一些拥有特殊含义的字符，称为元字符，常见的元字符如下：

名称	含义
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。英语字母表中的一个字母或者一个数字或一个下划线
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。

<span style="color:#dcdcdc"><code class="language-js"><span style="color:#569cd6"><span style="color:#569cd6">var</span></span> str = <span style="color:#d69d85"><span style="color:#d69d85">"asljdfi a\n\t4564E+/-KPJEO5487985"</span></span>;

<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/./g</span></span>));
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/\d/g</span></span>));
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/\D/g</span></span>));
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/\w/g</span></span>));
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/\W/g</span></span>));</code></span>

2. 组合语法

假如有这样一段字符串：var str = "abcjCIUI789a123sdjfi133r45FDEEE"，我们想匹配其中所有的字母 a 和数字 3：

<span style="color:#dcdcdc"><code class="language-js"><span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg = <span style="color:#9a5334"><span style="color:#9a5334">/a3/g</span></span>
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(reg)); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// null</em></span></em></span></code></span>

运行后发现并没有内容被匹配出来，这是因为正则在匹配时会将 a3 作为一个整体进行匹配，因此找不到符合条件的内容。

正则表达式使用 [] 来确定一些内容组合，匹配的内容只要在括号中存在，就会被选中。将上例改动

<span style="color:#dcdcdc"><code class="language-js">var reg = <span style="color:#9a5334"><span style="color:#9a5334">/[a3]/g</span></span>;
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/[abc]/g</span></span>); <span style="color:#9a5334"><span style="color:#9a5334">//</span></span> [<span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'b'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'c'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>]</code></span>

正则表达式也提供了匹配内容简写，如下表：

表达式	介绍
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。

<span style="color:#dcdcdc"><code class="language-js"><span style="color:#569cd6"><span style="color:#569cd6">var</span></span> str = <span style="color:#d69d85"><span style="color:#d69d85">"abcjCIUI789a123sdjfi133r45FDEEE"</span></span>;

<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg = <span style="color:#9a5334"><span style="color:#9a5334">/a3/</span></span>;
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg1 = <span style="color:#9a5334"><span style="color:#9a5334">/[a3]/g</span></span>;
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg2 = <span style="color:#9a5334"><span style="color:#9a5334">/[afUI3]/g</span></span>;

<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg3 = <span style="color:#9a5334"><span style="color:#9a5334">/[a-z]/g</span></span>;
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg4 = <span style="color:#9a5334"><span style="color:#9a5334">/[A-Z]/g</span></span>;
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg5 = <span style="color:#9a5334"><span style="color:#9a5334">/[A-z]/g</span></span>;
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg6 = <span style="color:#9a5334"><span style="color:#9a5334">/[A-Z]/ig</span></span>;
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg7 = <span style="color:#9a5334"><span style="color:#9a5334">/[a-j]/g</span></span>; <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 自定义长度</em></span></em></span>
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg8 = <span style="color:#9a5334"><span style="color:#9a5334">/[3-6]/g</span></span>; <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 自定义长度</em></span></em></span>

<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(reg, str.match(reg)); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// null</em></span></em></span>
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(reg1, str.match(reg1)); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// [a,a,3,3]</em></span></em></span>
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(reg2, str.match(reg2)); 
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(reg3, str.match(reg3)); 
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(reg4, str.match(reg4)); 
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(reg5, str.match(reg5)); 
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(reg6, str.match(reg6)); 
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(reg7, str.match(reg7)); 
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(reg8, str.match(reg8)); 

<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(<span style="color:#d69d85"><span style="color:#d69d85">"abcd"</span></span>.match(<span style="color:#9a5334"><span style="color:#9a5334">/[^a]/g</span></span>)); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// [b,c,d]</em></span></em></span></code></span>

如果在组合中使用 ^，表示非

<span style="color:#dcdcdc"><code class="language-js"><span style="color:#569cd6"><span style="color:#569cd6">var</span></span> str = <span style="color:#d69d85"><span style="color:#d69d85">"abcd"</span></span>;
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/[^a]/g</span></span>)); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// [b,c,d]</em></span></em></span></code></span>

3. 选择语法

在正则中，组合实现了类似于 或 的需求，但是组合只能用于单个单词的匹配，无法用于几个单词的组合进行或的筛选。

例如：我们希望在一段字符串中选择 ab 或者 cd

<span style="color:#dcdcdc"><code class="language-js"><span style="color:#57a64a"><em><span style="color:#57a64a"><em>//</em></span></em></span>
<span style="color:#57a64a"><em><span style="color:#57a64a"><em>//匹配ab或者cd</em></span></em></span>
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> str = <span style="color:#d69d85"><span style="color:#d69d85">"abadcacd"</span></span>;
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg = <span style="color:#9a5334"><span style="color:#9a5334">/[abcd]/g</span></span>;
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(reg)); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>//  ["a", "b", "a", "d", "c", "a", "c", "d"]</em></span></em></span>

<span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 想要达成目的，我们需要使用 **|** 来完成：</em></span></em></span>
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg1 = <span style="color:#9a5334"><span style="color:#9a5334">/ab|cd/g</span></span>;
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(reg1)); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// ["ab", "cd"]</em></span></em></span></code></span>

4. 单词边界

首先明确两个概念：

• 单词边界：表示前或后跟着的是非单词，使用 \b 表示
• 非单词边界：表示前或后跟着的是单词，使用 \B 表示
• 正则中的单词表示为 英文字母 或者 数字

语法	解释
\bxx	匹配前面为单词边界的xx
xx\b	匹配后面为单词边界的xx
\Bxx	匹配前面为非单词边界的xx
xx\B	匹配后面为非单词边界的xx

<span style="color:#dcdcdc"><code class="language-js"><span style="color:#569cd6"><span style="color:#569cd6">var</span></span> str = <span style="color:#d69d85"><span style="color:#d69d85">"hap,ahat-2hayx*haxyat+cat"</span></span>;

<span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 匹配前面为单词边界的 ha+单词</em></span></em></span>
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/\bha\w/g</span></span>)); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// [hap, hax]</em></span></em></span>
<span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 匹配后面为单词边界的 ha+单词</em></span></em></span>
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/ha\w\b/g</span></span>)); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// [hap,hat]</em></span></em></span>

<span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 匹配前面为非单词边界的 ha+单词</em></span></em></span>
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/\Bha\w/g</span></span>)); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// [hat, hay]</em></span></em></span>
<span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 匹配后面为非单词边界的 ha+单词</em></span></em></span>
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/ha\w\B/g</span></span>)); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// [hay, hax]</em></span></em></span></code></span>

5. 量词

正则中表示匹配内容数量的字符有：

字符	说明
*	表示匹配内容出现次数 >= 0次
+	表示匹配内容出现次数 >= 1次
?	表示匹配内容出现次数为 0次或者 1次
{n}	表示匹配内容出现 n 次
{n,}	表示匹配内容出现次数 >= n次
{n,m}	表示匹配内容出现次数为 [n,m] 之间

正则表达式遵循贪婪匹配原则，即在某条规则适用于到尽可能多的内容时，返回匹配结果就会一次容纳更多内容。

<span style="color:#dcdcdc"><code class="language-js">var str = <span style="color:#d69d85"><span style="color:#d69d85">"haaaaaaaaaaaaaa"</span></span>;

<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/a*/g</span></span>)); <span style="color:#9a5334"><span style="color:#9a5334">//</span></span> [<span style="color:#d69d85"><span style="color:#d69d85">''</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'aaaaaaaaaaaaaa'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">''</span></span>]
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/a+/g</span></span>)); <span style="color:#9a5334"><span style="color:#9a5334">//</span></span> [<span style="color:#d69d85"><span style="color:#d69d85">'aaaaaaaaaaaaaa'</span></span>]
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/a?/g</span></span>)); <span style="color:#9a5334"><span style="color:#9a5334">//</span></span> [<span style="color:#d69d85"><span style="color:#d69d85">''</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'a'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">''</span></span>]
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/a{3}/g</span></span>)); <span style="color:#9a5334"><span style="color:#9a5334">//</span></span> [<span style="color:#d69d85"><span style="color:#d69d85">'aaa'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'aaa'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'aaa'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'aaa'</span></span>]
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/a{3,}/g</span></span>)); <span style="color:#9a5334"><span style="color:#9a5334">//</span></span> [<span style="color:#d69d85"><span style="color:#d69d85">'aaa'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'aaa'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'aaa'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'aaa'</span></span>]
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/a{3,5}/g</span></span>)); <span style="color:#9a5334"><span style="color:#9a5334">//</span></span> [<span style="color:#d69d85"><span style="color:#d69d85">'aaaaa'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'aaaaa'</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">'aaaa'</span></span>]</code></span>

如果想要打破贪婪匹配，即能匹配到尽可能少的内容，就返回匹配到最少的内容，使用语法：量词后面 + ?

<span style="color:#dcdcdc"><code class="language-js"><span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 能匹配到3个，就不一次选5个</em></span></em></span>
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/a{3,5}?/g</span></span>)); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// ["aaa"*4]</em></span></em></span></code></span>

6. 捕获组

正则模式的一部分可以用括号括起来 (...)，由此构成一个『捕获组』。

这有两个作用：

1. 当使用 String.match 或 RegExp.exec 方法时，它允许你把匹配到的部分放到一个独立的数组项里面。
2. 如果我们在括号之后加上量词，那么它会应用到这个整体，而非最后一个字符。

<span style="color:#dcdcdc"><code class="language-js">var str = <span style="color:#d69d85"><span style="color:#d69d85">"Hahaha welcome"</span></span>;
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/(ha)+/i</span></span>)); <span style="color:#9a5334"><span style="color:#9a5334">//</span></span> [<span style="color:#d69d85"><span style="color:#d69d85">"Hahaha"</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">"ha"</span></span>]</code></span>

如果没有括号，模式 /ha+/ 则表示 h 之后跟上一个或多个 a。比如： haaaaa，捕获括号将 ha 划为了一组。

捕获结果的首项是完整的匹配结果，之后就是各个捕获组，从左往右依次排开。如果某个捕获组是可选的，且在匹配中没有找到对应的项，那么在相应的匹配结果中，该项依然会存在（值为 undefined）。

<span style="color:#dcdcdc"><code class="language-js">var str = <span style="color:#d69d85"><span style="color:#d69d85">"a"</span></span>;
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/a(b)?(c)?/</span></span>)); <span style="color:#9a5334"><span style="color:#9a5334">//</span></span> [<span style="color:#d69d85"><span style="color:#d69d85">"a"</span></span>, <span style="color:#569cd6"><span style="color:#569cd6">undefined</span></span>, <span style="color:#569cd6"><span style="color:#569cd6">undefined</span></span>]

var str1 = <span style="color:#d69d85"><span style="color:#d69d85">"ac"</span></span>;
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(<span style="color:#9a5334"><span style="color:#9a5334">/a(b)?(c)?/</span></span>)); <span style="color:#9a5334"><span style="color:#9a5334">//</span></span> [<span style="color:#d69d85"><span style="color:#d69d85">"ac"</span></span>, <span style="color:#569cd6"><span style="color:#569cd6">undefined</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">"c"</span></span>]</code></span>

6.1 非捕获组 ?:

某些时候，我们会希望使用括号来正确设置量词，但是并不希望其内容出现在结果数组中。可以通过在开头加上 ?: 从而在结果中排除该组。

例如，我们希望找到 (ha)+，但是并不希望其内容（ha）出现在单独的数组项中，那么我们可以这样写：(?:ha)+。

<span style="color:#dcdcdc"><code class="language-js"><span style="color:#569cd6"><span style="color:#569cd6">var</span></span> str = <span style="color:#d69d85"><span style="color:#d69d85">"Hahaha interesting"</span></span>;
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg = <span style="color:#9a5334"><span style="color:#9a5334">/(?:ha)+/i</span></span>;
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg1 = <span style="color:#9a5334"><span style="color:#9a5334">/(?:ha)+ (\w+)/i</span></span>;

<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(reg)); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// ["Hahaha"]</em></span></em></span>
<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(reg1)) <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// ["Hahaha interesting", "interesting"]</em></span></em></span></code></span>

6.2 反向引用 \N

我们不仅可以在结果或替换字符串中使用捕获组 (...) 的内容，还可以在模式本身中使用它们。使用 \N 在模式中引用一个组，其中 N 是组号。正则表达式引擎会找到第一个捕获组并记住其内容。

\1 在模式中进一步的含义是“查找与第一（捕获）分组相同的文本”，与此类似，\2 表示第二（捕获）分组的内容，\3 – 第三分组，依此类推。

例如：

<span style="color:#dcdcdc"><code class="language-js"><span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 我们要匹配一对儿以单引号或者双引号包裹的内容 '...' 或 "..."</em></span></em></span>
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> str = <span style="color:#d69d85"><span style="color:#d69d85">`He said: "She's the one!".`</span></span>;

<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> regexp = <span style="color:#9a5334"><span style="color:#9a5334">/['"](.*?)['"]/g</span></span>;

<span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 不是我们想要的结果</em></span></em></span>
alert( str.match(regexp) ); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// "She'</em></span></em></span>

<span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 使用反向引用</em></span></em></span>
<span style="color:#569cd6"><span style="color:#569cd6">let</span></span> regexp = <span style="color:#9a5334"><span style="color:#9a5334">/(['"])(.*?)\1/g</span></span>;
<span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 这里 \1 为前面匹配到的内容</em></span></em></span>
alert( str.match(regexp) ); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// "She's the one!"</em></span></em></span></code></span>

6.3 按命名反向引用：\k

如果正则表达式中有很多括号对（注：捕获组），给它们起个名字方便引用。

要引用命名组，我们可以使用：\k<name>。

在下面的示例中引号组命名为 ?<quote>，因此反向引用为 \k<quote>：

<span style="color:#dcdcdc"><code class="language-javascript"><span style="color:#569cd6"><span style="color:#569cd6">let</span></span> str = <span style="color:#d69d85"><span style="color:#d69d85">`He said: "She's the one!".`</span></span>;

<span style="color:#569cd6"><span style="color:#569cd6">let</span></span> regexp = <span style="color:#9a5334"><span style="color:#9a5334">/(?<quote>['"])(.*?)\k<quote>/g</span></span>;

alert( str.match(regexp) ); <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// "She's the one!"</em></span></em></span></code></span>

注意：如果我们在组中使用 ?:，那么我们将无法引用它。用 (?:...) 捕获的组被排除，引擎不会存储。

7. 环视断言

当我们想根据前面/后面的上下文筛选出一些东西的时候，前瞻断言和后瞻断言（通常被称为“环视断言”）对于简单的正则表达式就很有用。

环视断言类型:

模式	类型	匹配
x(?=y)	前瞻肯定断言	匹配 x ，仅当后面跟着 y
x(?!y)	前瞻否定断言	匹配 x ，仅当后面不跟 y
(?<=y)x	后瞻肯定断言	匹配 x ，仅当跟在 y 后面
(?<!y)x	后瞻否定断言	匹配 x ，仅当不跟在 y 后面

例如：

<span style="color:#dcdcdc"><code class="language-js"><span style="color:#569cd6"><span style="color:#569cd6">var</span></span> str = <span style="color:#d69d85"><span style="color:#d69d85">"2 servings of rice are worth 30￥"</span></span>;

<span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 如果我们要选择后面带￥的数字</em></span></em></span>
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg = <span style="color:#9a5334"><span style="color:#9a5334">/\d+(?=￥)/</span></span>;
<span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 如果我们选择后面不带￥的数字</em></span></em></span>
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg = <span style="color:#9a5334"><span style="color:#9a5334">/\d+(?!￥)/</span></span>;

<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> str = <span style="color:#d69d85"><span style="color:#d69d85">"1 duck costs ￥28"</span></span>;

<span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 如果我们要选择前面带￥的数字</em></span></em></span>
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg = <span style="color:#9a5334"><span style="color:#9a5334">/(?<=￥)\d+/</span></span>;
<span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 如果我们选择前面不带￥的数字</em></span></em></span>
<span style="color:#569cd6"><span style="color:#569cd6">var</span></span> reg = <span style="color:#9a5334"><span style="color:#9a5334">/(?<!￥)\d+/</span></span>;

<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(str.match(reg));</code></span>