JavaScrip的正则表达式，非常重要！！！！！

正则表达式是一个拆分字符串并查询相关信息的过程。 
正则表达式通常被称为一个模式（pattern），是一个用简单方式描述或者匹配一系列符合某个语法规则的字符串。

一、创建正则表达式

ECMAScript通过RegExp类型来支持正则表达式。

1. 字面量创建正则表达式

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> expression = <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/pattern/</span>flags;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

2. 构造函数创建

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> expression = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">RegExp</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"pattern"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"flags"</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

• g：表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止；
• i：表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写；
• m：表示多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。

注意：在开发过程中，如果正则是已知的，则优先选择字面量语法；而构造器方式则是用于运行时，通过动态构建字符串来构建正则表达式。

二、RegExp实例属性

RegExp每个实例都具有下列属性，通过这些属性可以取得有关模式的各种信息。

• global：布尔值,表示是否设置了g标志.
• ignoreCase：布尔值,表示是否设置了i标志.
• multiline：布尔值,表示是否设置了m标志.
• lastIndex：整数,表示开始搜索下一个匹配项的字符位置,从0算起.
• source：正则表达式的字符串表示,按照字面量形式而非传入构造函数中的字符串模式返回.

示例1：

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-reserved" style="box-sizing: border-box;">var</span> pattern1 = <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/\[bc\]at/i</span>;
<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 等价于
<span class="hljs-reserved" style="box-sizing: border-box;">var</span> pattern1 = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> RegExp(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"\\[bc\\]at"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"i"</span>);

<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">console</span>.log(pattern1.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">global</span>);   <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span>
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">console</span>.log(pattern1.ignoreCase);   <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">console</span>.log(pattern1.multiline);    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span>
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">console</span>.log(pattern1.lastIndex);    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">console</span>.log(pattern1.source);   <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> \[bc\]at</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>

三、RegExp实例方法

1. exec()

exec()接受一个参数，即要应用模式的字符串，然后返回包含第一个匹配项信息的数组;或者在没有匹配项的情况下返回null。 
返回的数组虽然是Array的实例，但包含两个额外的属性：index和input。 
其中index表示匹配项在字符串的位置，而input表示应用正则表达式的字符串。 
注意：在数组中，第一项是与整个模式匹配的字符串，其他项是与模式中的捕获组匹配的字符串(如果模式中没有捕获组，则该数组只包含一项)。

示例1：

<code class="hljs mel has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">var <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">text</span> = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"cat, bat, sat, fat"</span>;
var pattern1 = /.at/;

var matches = pattern1.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">exec</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">text</span>);
console.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(matches.index);     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 0</span>
console.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(matches[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>]);        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// cat</span>
console.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(pattern1.lastIndex);    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 0</span>

matches = pattern1.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">exec</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">text</span>);
console.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(matches.index);     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 0</span>
console.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(matches[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>]);        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// cat</span>
console.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(pattern1.lastIndex);    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 0</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>

示例2：

<code class="hljs mel has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">var <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">text</span> = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"cat, bat, sat, fat"</span>;
var pattern2 = /.at/g;

var matches = pattern2.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">exec</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">text</span>);
console.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(matches.index);     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 0</span>
console.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(matches[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>]);        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// cat</span>
console.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(pattern2.lastIndex);    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 3</span>

matches = pattern2.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">exec</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">text</span>);
console.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(matches.index);     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 5</span>
console.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(matches[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>]);        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// bat</span>
console.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(pattern2.lastIndex);    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 8</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>

2. test()

test()接受一个字符串参数。在模式与该参数匹配的情况下返回true；否则，返回false。 
注意：在只想知道目标字符串与某个模式是否匹配，但不需要知道其文本内容的情况下，使用这个方法非常方便。

示例：

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-reserved" style="box-sizing: border-box;">var</span> text=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"000-00-0000"</span>;  
<span class="hljs-reserved" style="box-sizing: border-box;">var</span> pattern=<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/\d{3}-\d{2}-\d{4}/</span>;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(pattern.test(text)){
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">console</span>.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"The pattern was matched."</span>);
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

四、正则表达式进阶

1. 精确匹配

如果一个字符不是特殊字符或者操作符，则表示该字符必须在表达式中出现。 
示例：

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">var pattern = <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/test/</span>;
pattern.test(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"test"</span>);   <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>
pattern.test(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"testabc"</span>);    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

注意：要想只允许匹配test，需/^test$/

2. 匹配一类字符

很多时候，我们不想匹配一个特定的字符，而是想匹配一个有限字符集中的某一个字符。可以通过“[]”来实现。 
示例：

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> pattern1 = <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/[abc]/</span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// “a”、“b“、”c“中的任何一个字符</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> pattern2 = <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/[^abc]/</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 除了“a”、“b“、”c“以外的任何一个字符</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> pattern3 = <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/[a-c]/</span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// “a”到”c“之间的的任何一个字符（等价于pattern1）</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

3. 转义

如果我们需要匹配[、$、^、]等特殊字符，在正则中，使用反斜杠可以对任意字符进行转义，让被转义的字符作为本身进行匹配。 
示例：

<code class="hljs tex has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">var pattern1 = /<span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\<</span>a<span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\/</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\></span>/;   // 匹配<a/> 
var pattern2 = /<span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\w</span>+@<span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\w</span>+<span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\.</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\w</span>+/;  //简单的邮箱匹配</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

4. 匹配开始和匹配结束

如果正则表达式第一个字符是“^”，则表示要从字符串的开头进行匹配。如果正则表达式最后一个字符是“$”，则表示必须出现在字符串的结尾。

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">/^test/;    <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 只能匹配以“test”开头的字符串
/test<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$/</span>;   <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 只能匹配以“test”结尾的字符串
/^<span class="hljs-constant" style="box-sizing: border-box;">L</span>.*<span class="hljs-constant" style="box-sizing: border-box;">G</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$/</span>;  <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 只能匹配一“<span class="hljs-constant" style="box-sizing: border-box;">L</span>”开头、“<span class="hljs-constant" style="box-sizing: border-box;">G</span>”结尾的字符串</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

5. 重复出现

<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">/<span class="hljs-operator" style="box-sizing: border-box;">a</span>?/;          <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"> // 零次或一次</span>
/<span class="hljs-operator" style="box-sizing: border-box;">a</span>+/;          <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"> // 一次或多次</span>
/<span class="hljs-operator" style="box-sizing: border-box;">a</span>*/;          <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"> // 零次或多次</span>
/<span class="hljs-operator" style="box-sizing: border-box;">a</span>{<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>}/;        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"> // 连续出现四次a</span>
/<span class="hljs-operator" style="box-sizing: border-box;">a</span>{<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">7</span>}/;      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"> // 连续出现四次到7次</span>
/<span class="hljs-operator" style="box-sizing: border-box;">a</span>{<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>,}/;       <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"> // 连续出现四次及以上</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

补充： 
这些重复操作符可以是贪婪的或非贪婪的。默认情况下是贪婪的。 
在操作符后面加一个问号（?），可以让该表达式变成非贪婪的：进行最小限度的匹配。 
示例：

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">var pattern1 = <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/a+/</span>;
var pattern2 = <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/a+?/</span>;
pattern1.exec(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"aaa"</span>);   <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"aaa"</span>] 匹配所有三个字符
pattern2.exec(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"aaa"</span>);   <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"a"</span>] 只匹配一个字符，因为一个a字符就可以满足   </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

6. 预定义字符类

• \t 水平制表符
• \b 空格
• \f 垂直制表符
• \r 换页符
• \n 回车

7. 分组

使用“()”可以进行分组，当正则表达式有一部分用括号进行分组时，它具有双重责任，同时也创建所谓的捕获。

8. 或操纵符（OR）

可以用“|”表示或的关系 
示例：

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">/(lg)+|(ligang)+/;  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 匹配出现一次或多次的“lg”或“ligang”</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

9. 反向引用

在反斜杠后面加一个要引用的补货数量，该数字从1开始。 
示例：

<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">/^([dtn]<span class="hljs-operator" style="box-sizing: border-box;">a</span>\<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>)/; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"> // dad tat nan</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

可以任意一个以“d”、“t”、“n”开头，且后面跟着一个“a”字符，最后跟着和第一个捕获相同的字符。 
注意：

<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">/[dtn]<span class="hljs-operator" style="box-sizing: border-box;">a</span>[dtn]/; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"> // 可以是 dat dan等</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

上述二者不同！！！ 
补充：在匹配XML类型的标签元素很有用！

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">/<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">(\w+)</span>></span>(.+)<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">\</span>/\<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">1</span>></span>/;    // <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>click me<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

五、捕获匹配的片段

1. 执行简单的捕获

旧版浏览器声明的透明度规则如下：filter:alpha(opacity=50); 
通过正则获取其透明度的值：

<code class="hljs mel has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">var <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">filter</span> = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"alpha(opacity=50);"</span>;
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// opacity= 直到出现“)”</span>
var result = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">filter</span>.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">match</span>(/opacity=([^)]+)/);
console.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(result);    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// ["opacity=50", "50"]</span>
console.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(result[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>] / <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>);   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 0.5</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

注意：match返回的数组的第一个索引值总是该匹配的完整结果，然后是每个后续捕获结果。

2. 用全局表达式进行匹配

示例1：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">var html = "<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">'test'</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">b</span>></span>Hello<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">b</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>";
var result = html.match(/<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">(\w+)([^</span>></span>]*?)>/); // ?为非贪婪模式（上述有提及）
console.log(result);    // ["<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">'test'</span>></span>", "div", " class='test'"]</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

示例2：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">var html = "<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">'test'</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">b</span>></span>Hello<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">b</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>";
var result = html.match(/<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">(\w+)([^</span>></span>]*?)>/g);
console.log(result);    // ["<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">'test'</span>></span>", "<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">b</span>></span>"]</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

说明： 
示例1为非全局匹配，返回结果同上述“获取其透明度的值”，只是其包含了两个捕获。 
示例2为全局匹配，返回全局匹配结果，而不是每个匹配的捕获结果。

3. 捕获的引用

可以引用捕获到的匹配结果的两种方式：一是，自身匹配；二是，替换字符串。 
方式一：上述“反向引用”已提及，/<(\w+)>(.+)<\/\1>/; // <a>click me</a> 
方式二：将驼峰变量变为用中划线替换，这在AngularJS等框架中太常见。

如：ngClick –> ng-click

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">camelCaseToDash</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(str)</span>{</span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// $1即为正则中第一个捕获，同上述的“\1”</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> str.replace(<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/([A-Z])/g</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"-$1"</span>).toLowerCase();
}
camelCaseToDash(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ngClick"</span>); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// "ng-click"</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

4. 没有捕获的分组

小括号有双重责任：不仅要进行分组操作，还可以指定捕获。 
如果正则表达式中存在大量的分组，就会引起很多不必要的捕获。 
在开始括号后面加一个“?:”可以让其不进行捕获。 
示例：

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-reserved" style="box-sizing: border-box;">var</span> pattern1 = <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/((ligang-)+)good/</span>;
<span class="hljs-reserved" style="box-sizing: border-box;">var</span> pattern2 = <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/((?:ligang-)+)good/</span>;

<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ligang-ligang-good"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ligang-ligang-"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ligang-"</span>]
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">console</span>.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ligang-liganggood"</span>.match(pattern1)); 

<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ligang-ligang-good"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ligang-ligang-"</span>]
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">console</span>.log(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ligang-liganggood"</span>.match(pattern2));</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

六、利用函数进行替换

将正则表达式作为replace()方法的第一个参数时，导致在该模式的匹配元素（全局匹配的话，就是多个匹配元素）上进行替换，而不是在固定字符串上进行替换。 
示例：

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ABCligangDEF"</span>.replace(<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/[A-Z]/g</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'X'</span>);  <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"XXXligangXXX"</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

其最大的特性是可以接受一个函数作为替换值，而不是一个固定的字符串。函数的返回值是即将替换的值。 
参数列表： 
（1）匹配的完整文本 
（2）匹配的捕获，一个捕获对应一个参数 
（3）匹配字符在源字符串中的索引 
（4）源字符串 
示例：将横线替换成驼峰

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">如：ng-click --> ngClick
<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">dashToCamelCase</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(str)</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> str.replace(<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/-(\w)/g</span>, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(all, letter)</span>{</span>
        console.log(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">arguments</span>);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> letter.toUpperCase();
    });
}
dashToCamelCase(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ng-click'</span>); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// arguments --> ["-c", "c", 2, "ng-click"]</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

由于全局正则在每一次成功匹配的时候都会调用这样的替换函数。这种技术甚至可以超越简单的机械替换，并且可以作为字符串遍历的一种手段。 
示例：压缩查询字符串 
如：将foo=1&foo=2&blah=3 –> foo=1,2&blah=3

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">compress</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(source)</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> keys = {};  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 存储</span>
    source.replace(<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/([^=&]+)=([^&]*)/g</span>, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(full, key, value)</span>{</span>
        keys[key] = (keys[key] ? keys[key] + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">","</span> : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>) + value;
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 我们不关心源字符串发生替换操作，只利用该函数的副作用</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>;
    });
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> result = [];
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> key <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">in</span> keys) {
        result.push(key + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"="</span> + keys[key]);
    }
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> result.join(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"&"</span>);
}
compress(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"foo=1&foo=2&blah=3"</span>); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// "foo=1,2&blah=3"</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>

《JavaScript高级程序设计》中提供了“提取URL的搜索字符串中的参数”的方法

如：当前浏览器地址为：http://blog.csdn.net/ligang2585116?a=1&b=2

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">function urlArgs(){
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> args = {};
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> query = location.search.substring(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> pairs = query.split(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"&"</span>);
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> i=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>; i<pairs.length; i++){
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> pos = pairs[i].indexOf(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'='</span>);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(pos == -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>) <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">continue</span>;
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> name = pairs[i].substring(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,pos);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span> = pairs[i].substring(pos+<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span> = decodeURIComponent(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span>);
        args[name] = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">value</span>;
    }
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> args;
}
urlArgs();  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// {a: "1", b: "2"}</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul>

使用上述方式实现：

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">enhanceUrlArgs</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(query)</span>{</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> args = {};
    query.replace(<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/([^?&=]+)=([^&]+)/g</span>, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(full, key, value)</span>{</span>
        args[key] = value;
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>;
    });
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> args;
}
enhanceUrlArgs(location.search); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// {a: "1", b: "2"}</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>

注意：上述获取搜索字符串参数的方法，都不能存在相同的key，如果有相同的key，需要求参照compress()方法进行处理！！

七、利用正则表达式解决常见问题

1. 修剪字符串

示例：修建字符串两头多余的空格

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">myTrim</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(str)</span> {</span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 以空格开头，后续出现零次或多次</span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 以一个或多个空格结尾</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> str.replace(<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/(^\s\s*)/</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>).replace(<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/\s\s*$/</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>);
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// return str.replace(/(^\s+)/, "").replace(/\s+$/, "");</span>
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

2. 匹配换行符

示例：匹配所有字符，包括换行符

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">var html = "<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">b</span>></span>Hello<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">b</span>></span>\n<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">i</span>></span>world<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">i</span>></span>";
console.log(/.*/.exec(html)[0]);    // <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">b</span>></span>Hello<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">b</span>></span>
console.log(/[\s\S]*/.exec(html)[0]);   // <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">b</span>></span>Hello<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">b</span>></span>\n<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">i</span>></span>world<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">i</span>></span>
console.log(/(?:.|\s)/.exec(html)[0]);  // <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">b</span>></span>Hello<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">b</span>></span>\n<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">i</span>></span>world<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">i</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

最佳方案：用于匹配任何不是空白字符的字符，以及匹配任意一个空白字符，联合起来就是匹配所有字符。

3. Unicode

示例：匹配Unicode

<code class="hljs mel has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">var <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">text</span> = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"\u674e\u521a"</span>;
console.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">log</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">text</span>.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">match</span>(/[\w\u0080-\uFFFF_-]+/)); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// ["李刚"]</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

4. 转义字符

示例：开发人员可能将元素的id值设置为form:update，我们只能通过转义来支持

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 该正则表达式允许匹配一个单词字符，或者一个反斜杠后面跟随任意字符</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> pattern = <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/^((\w+)|(\\.))+$/</span>;
pattern.test(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"formUpdate"</span>); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// true</span>
pattern.test(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"form\\:update"</span>);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// true</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

补充：

支持正则表达式的字符串方法：

1. search 检索与正则表达式相匹配的值。
2. match 找到一个或多个正则表达式的匹配。
3. replace 替换与正则表达式匹配的子串。
4. split 把字符串分割为字符串数组。