正則表達式之前學習的時候，因為很久沒怎么用，或者用的時候直接找網上現成的，所以都基本忘的差不多了。所以這篇文章即是筆記，也讓自己再重新學習一遍正則表達式。
其實平時在操作一些字符串的時候，用正則的機會還是挺多的，之前沒怎么重視正則，這是一個錯誤。寫完這篇文章后，發覺工作中很多地方都可以用到正則，而且用起來其實還是挺爽的。
正則表達式作用
正則表達式，又稱規則表達式，它可以通過一些設定的規則來匹配一些字符串，是一個強大的字符串匹配工具。
正則表達式方法
基本語法，正則聲明
js中，正則的聲明有兩種方式
-
直接量語法：
1var reg = /d+/g/ -
創建RegExp對象的語法
1var reg = new RegExp("\\d+", "g");
這兩種聲明方式其實還是有區別的，平時的話我比較喜歡第一種，方便一點，如果需要給正則表達式傳遞參數的話，那么只能用第二種創建RegExp的形式
格式：var pattern = new RegExp('regexp','modifier');regexp： 匹配的模式，也就是上文指的正則規則。modifier: 正則實例的修飾符,可選值有：
i : 表示區分大小寫字母匹配。
m ：表示多行匹配。
g : 表示全局匹配。
傳參的形式如下：
我們用構造函數來生成正則表達式
|
1
|
var re = new RegExp("^\\d+$","gim");
|
這里需要注意，反斜杠需要轉義，所以，直接聲明量中的語法為\d，這里需要為 \\d
那么，給它加變量，就和我們前面寫的給字符串加變量一樣了。
|
1
2
|
var v = "bl";
var re =new RegExp("^\\d+" + v + "$","gim"); // re為/^\d+bl$/gim
|
支持正則的STRING對象方法
- search 方法
作用： 該方法用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的字符串
基本語法：stringObject.search(regexp);
返回值： 該字符串中第一個與regexp對象相匹配的子串的起始位置。如果沒有找到任何匹配的子串，則返回-1；
注意點： search()方法不執行全局匹配，它將忽略標志g，1234567891011121314var str = "hello world,hello world";// 返回匹配到的第一個位置(使用的regexp對象檢索)console.log(str.search(/hello/)); // 0// 沒有全局的概念 總是返回匹配到的第一個位置console.log(str.search(/hello/g)); //0console.log(str.search(/world/)); // 6// 如果沒有檢索到的話，則返回-1console.log(str.search(/longen/)); // -1// 我們檢索的時候 可以忽略大小寫來檢索var str2 = "Hello";console.log(str2.search(/hello/i)); // 0
- match()方法
作用： 該方法用於在字符串內檢索指定的值，或找到一個或者多個正則表達式的匹配。類似於indexOf()或者lastIndexOf();
基本語法：stringObject.match(searchValue) 或者stringObject.match(regexp)
返回值：
存放匹配成功的數組; 它可以全局匹配模式，全局匹配的話，它返回的是一個數組。如果沒有找到任何的一個匹配，那么它將返回的是null；
返回的數組內有三個元素，第一個元素的存放的是匹配的文本，還有二個對象屬性
index屬性表明的是匹配文本的起始字符在stringObject中的位置，input屬性聲明的是對stringObject對象的引用1234567var str = "hello world";console.log(str.match("hello")); // ["hello", index: 0, input: "hello world"]console.log(str.match("Helloy")); // nullconsole.log(str.match(/hello/)); // ["hello", index: 0, input: "hello world"]// 全局匹配var str2="1 plus 2 equal 3"console.log(str2.match(/\d+/g)); //["1", "2", "3"]
- replace()方法
作用： 該方法用於在字符串中使用一些字符替換另一些字符，或者替換一個與正則表達式匹配的子字符串；
基本用法：stringObject.replace(regexp/substr,replacement);
返回值： 返回替換后的新字符串
注意： 字符串的stringObject的replace()方法執行的是查找和替換操作，替換的模式有2種，既可以是字符串，也可以是正則匹配模式，如果是正則匹配模式的話，那么它可以加修飾符g,代表全局替換，否則的話，它只替換第一個匹配的字符串；
- replacement 既可以是字符串，也可以是函數，如果它是字符串的話，那么匹配的將與字符串替換，replacement中的$有具體的含義，如下：
- $1,$2,$3….$99 含義是：與regexp中的第1到第99個子表達式相匹配的文本。可以看下面的例子
- $& 的含義是：與RegExp相匹配的子字符串。
- lastMatch或RegExp[“$_”]的含義是：返回任何正則表達式搜索過程中的最后匹配的字符。
- lastParen或 RegExp[“$+”]的含義是：返回任何正則表達式查找過程中最后括號的子匹配。
- leftContext或RegExp[“$`”]的含義是：返回被查找的字符串從字符串開始的位置到最后匹配之前的位置之間的字符。
- rightContext或RegExp[“$’”]的含義是：返回被搜索的字符串中從最后一個匹配位置開始到字符串結尾之間的字符。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
var str = "hello world";
// 替換字符串
var s1 = str.replace("hello","a");
console.log(s1);// a world
// 使用正則替換字符串
var s2 = str.replace(/hello/,"b");
console.log(s2); // b world
// 使用正則全局替換 字符串
var s3 = str.replace(/l/g,'');
console.log(s3); // heo word
// $1,$2 代表的是第一個和第二個子表達式相匹配的文本
// 子表達式需要使用小括號括起來,代表的含義是分組
var name = "longen,yunxi";
var s4 = name.replace(/(\w+)\s*,\s*(\w+)/,"$2 $1");
console.log(s4); // "yunxi,longen"
var str = '123-mm';
var strReg = str.replace(/(\d+)-([A-Za-z]+)/g,'$2');
console.log(strReg)//mm 上面那段$2這個就是表示正則第二組個匹配到的內容,也就是說$1,$2.. 表示的是第幾個括號匹配到的內容
// $& 是與RegExp相匹配的子字符串
var name = "hello I am a chinese people";
var regexp = /am/g;
if(regexp.test(name)) {
//返回正則表達式匹配項的字符串
console.log(RegExp['$&']); // am
//返回被搜索的字符串中從最后一個匹配位置開始到字符串結尾之間的字符。
console.log(RegExp["$'"]); // a chinese people
//返回被查找的字符串從字符串開始的位置到最后匹配之前的位置之間的字符。
console.log(RegExp['$`']); // hello I
// 返回任何正則表達式查找過程中最后括號的子匹配。
console.log(RegExp['$+']); // 空字符串
//返回任何正則表達式搜索過程中的最后匹配的字符。
console.log(RegExp['$_']); // hello I am a chinese people
}
// replace 第二個參數也可以是一個function 函數
var name2 = "123sdasadsr44565dffghg987gff33234";
name2.replace(
/\d+/g,function(v){
console.log(v);
// 第一次打印123
// 第二次打印44565
// 第三次打印987
// 第四次打印 33234
});
|
REGEXP對象方法
- test()方法
作用： 該方法用於檢測一個字符串是否匹配某個模式；
基本語法：RegExpObject.test(str);
返回： 返回true，否則返回false；1234567var str = "longen and yunxi";console.log(/longen/.test(str)); // trueconsole.log(/longlong/.test(str)); //false// 或者創建RegExp對象模式var regexp = new RegExp("longen");console.log(regexp.test(str)); // true
- exec()方法
作用： 該方法用於檢索字符串中的正則表達式的匹配
基本語法：RegExpObject.exec(string)
返回值： 返回一個數組，存放匹配的結果，如果未找到匹配，則返回值為null；
注意點： 該返回的數組的第一個元素是與正則表達式相匹配的文本
該方法還返回2個屬性，index屬性聲明的是匹配文本的第一個字符的位置；input屬性則存放的是被檢索的字符串string；該方法如果不是全局的話，返回的數組與match()方法返回的數組是相同的。123456var str = "longen and yunxi";console.log(/longen/.exec(str));// 打印 ["longen", index: 0, input: "longen and yunxi"]// 假如沒有找到的話，則返回nullconsole.log(/wo/.exec(str)); // null
正則表達式類型
元字符
用於構建正則表達式的符號，常用的有
| 符號 | 描述 |
|---|---|
| . | 查找任意的單個字符，除換行符外 |
| \w | 任意一個字母或數字或下划線，A_Za_Z09,中任意一個 |
| \W | 查找非單詞的字符，等價於[^A_Za_z09 |
| \d | 匹配一個數字字符，等價於[0-9] |
| \D | 匹配一個非數字字符，等價於[^0-9] |
| \s | 匹配任何空白字符，包括空格，制表符，換行符等等。等價於[\f\n\r\t\v] |
| \S | 匹配任何非空白字符，等價於[^\f\n\r\t\v] |
| \b | 匹配一個單詞邊界，也就是指單詞和空格間的位置，比如’er\b’可以匹配”never”中的”er”,但是不能匹配”verb”中的”er” |
| \B | 匹配非單詞邊界,’er\B’能匹配’verb’中的’er’,但不能匹配’never’中的’er’ |
| \0 | 匹配非單詞邊界,’er\查找NUL字符。 |
| \n | 匹配一個換行符 |
| \f | 匹配一個換頁符 |
| \r | 匹配一個回車符 |
| \t | 匹配一個制表符 |
| \v | 匹配一個垂直制表符 |
| \xxx | 查找一個以八進制數xxx規定的字符 |
| \xdd | 查找以16進制數dd規定的字符 |
| \uxxxx | 查找以16進制數的xxxx規定的Unicode字符。 |
其實常用的幾個可以簡單記為下面的幾個意思:
\s : 空格
\S : 非空格
\d : 數字
\D : 非數字
\w : 字符 ( 字母 ，數字，下划線_ )
\W : 非字符例子：是否有不是數字的字符
量詞
用於限定子模式出現在正則表達式的次數。
| 符號 | 描述 |
|---|---|
| + | 匹配一次或多次，相當於{1,} |
| * | 匹配零次或多次 ，相當於{0,} |
| ? | 匹配零次或一次 ，相當於{0,1} |
| {n} | 匹配n次 |
| {n,m} | 匹配至少n個，最多m個某某的字符串 |
| {n,} | 匹配至少n個某字符串 |
位置符號
| 符號 | 描述 |
|---|---|
| $ | 結束符號，例子：n$，匹配以n結尾的字符串 |
| ^ | 起始符號,例如^n,匹配以n開頭的字符串 |
| ?= | 肯定正向環視,例：?=n,匹配其后緊接指定的n字符串 |
| ?! | 否定正向環視,例如：?!n,匹配其后沒有緊接指定的n字符串 |
| ?: | 表示不匹配 |
注意點：
剛開始學習正則的時候，是比較容易混淆 ^ : 放在正則的最開始位置，就代表起始的意思,放在中括號里，表示排除的意思。也就是說，/[^a]/和/^[a]/是不一樣的，前者是排除的意思，后者是代表首位
$:正則的最后位置,就代表結束的意思.
分組
| 符號 | 描述 |
|---|---|
| 豎線 | 選擇(不是他就是她) |
| (…) | 分組 |
字符類
| 符號 | 描述 |
|---|---|
| [0-9] | 匹配 0 到 9 間的字符 |
| [a-zA-Z] | 匹配任意字母 |
| [^0-9] | 不等於0到9的其它字符 |
()分組符號可以理解為，數學運算中的括號，用於計算的分組使用。[]可以理解為，只要滿足括號里面其中的某種條件即可。比如[abc],意思是滿足abc中的某一個，這樣比較好記。
貪婪模式和非貪婪模式
其實可以簡單的理解，貪婪模式就是盡可能多的匹配，非貪婪模式就是盡可能少的匹配.
貪婪模式量詞： {x,y} , {x,} , ? , * , 和 +
非貪婪模式量詞： {x,y}?，{x,}?，??，*?，和 +?,所以非貪婪模式就是在貪婪模式后面加了一個問號
我們用代碼來理解一下貪婪模式和非貪婪模式的區別
|
1
2
3
4
5
6
|
var str = "<p>這是第一段文本</p>text1<p>這是第二段文本</p>text2<p>xxx</p>text2again<p>end</p>";
// 非貪婪模式1
console.log(str.match(/<p>.*?<\/p>text2/)[0]); // <p>這是第一段文本</p>text1<p>這是第二段文本</p>text2
// 貪婪模式
console.log(str.match(/<p>.*<\/p>text2/)[0]); // <p>這是第一段文本</p>text1<p>這是第二段文本</p>text2<p>xxx</p>text2
|
從上面的代碼中，我們可以看到，非貪婪模式，當它匹配到它需要的第一個滿足條件之后，他就會停止了。而貪婪模式則會繼續向右邊進行匹配下去。
注意點：?號在一些量詞后面才是指非貪婪模式，如果直接在一些字符串的后面，表示的是匹配0次或1次。如下所示
|
1
2
3
|
var str = 'abced';
console.log(str.match(/ce?/g)); // ["ce"]
console.log(reg.match(/cf?/g)); // ["c"]
|
零寬正向斷言和負向斷言
(?=)零寬正向斷言: 括號內表示某個位置右邊必須和=右邊匹配上(?!)負向斷言: 括號內表示某個位置右邊不和!后的字符匹配。
概念很抽象，直接看代碼：12345678var pattern=/str(?=ings)ing/;// 表示匹配 r 后面必須有ings的 string字符console.log("strings.a".match(pattern)); //["string", index: 0, input: "strings.a"]// 同理，匹配string后面必須有s的 string 字符串console.log("strings.a".match(/string(?=s)/)); //["string", index: 0, input: "strings.a"]console.log("string_x".match(pattern)); // nullconsole.log("string_x".match(/string(?=s)/)); // null
如果理解了(?=),那么(?!)就很好理解了
|
1
2
3
|
var pattern=/string(?!s)/; // 匹配string后面不帶s的string字符串
console.log("strings".match(pattern)); //null
console.log("string.".match(pattern)); //["string", index: 0, input: "string."]
|
正則表達式實戰練習
上面講的基本都是理論，下面我們來實戰一番，以此來鞏固我們正則表達式的學習，學習的過程以demo的形式，對我們的知識點進行鞏固。
下面的實例是參考這篇文章，有興趣可以看 原文,不過我整理了一下，個人覺得，把下面的例子都實踐一遍，那么就基本掌握正則的使用了，滿足平時的工作基本夠了。
demo1:
要求：匹配結尾的數字，例如：取出字符串最后一組數字，如：30CACDVB0040 取出40
分析：匹配數組字符為\d,匹配1次或多次為 +，以什么結尾為 $,全局匹配為 g
結果：
|
1
|
console.log('30CACDVB0040'.match(/\d+$/g)); // ["0040"]
|
如果我們只想要最后結尾的最后兩個數字，則可以使用量詞 {n,m},所以結果為：
|
1
|
console.log('30CACDVB0040'.match(/\d{1,2}$/g)); // ["40"]
|
demo2:
要求:統一空格個數,例如：字符串內字符鍵有空格，但是空格的數量可能不一致，通過正則將空格的個數統一變為一個。
分析： 匹配空格的字符為 \s
結果：
|
1
2
|
var str ='學 習 正 則';
console.log(str.replace(/\s+/g,' ')); // 學 習 正 則
|
demo3:
要求：判斷字符串是不是由數字組成
分析：我們可以這樣匹配，以數字 \d 開頭^,以數字結尾 $,匹配零次或多次 *
結果：
|
1
2
3
|
var str ='學 習 正 則';
console.log(/^\d*$/g.test('123789')); // true
console.log(/^\d*$/g.test('12378b9')); // false
|
demo4:
要求：驗證是否為手機號
分析：現在手機開頭的范圍比較多，第一位是【1】開頭，第二位則則有【3,4,5,7,8】，第三位則是【0-9】並且匹配9個數字。
結果：
|
1
2
3
|
var reg = /^1[3|4|5|7|8][0-9]{9}$/; //驗證規則
console.log(reg.test(15984591578)); //true
console.log(reg.test(11984591578)); //false
|
demo5:
要求：刪除字符串兩端的空格
分析：跟demo2類似，匹配空格 ^\s開頭，空格結尾 \s$
結果：
|
1
2
|
var str = ' 學習正則 ';
console.log(str.replace(/^\s+|\s+$/,'')); // 學習正則
|
demo6:
要求：只能輸入數字和小數點
分析：開頭需要匹配為數字，結尾也應為數字，然后再加個點,點必須轉義，匹配0次或一次
結果：
|
1
2
3
|
var reg =/^\d*\.?\d{0,2}$/;
console.log(reg.test('125.1')); // true
console.log(reg.test('125a')); // false
|
demo7:
要求：只能輸入小寫的英文字母和小數點，和冒號，正反斜杠(：./)
分析：這幾個要求組成一個分組，把他們放在一個分組里,點，正反斜杠，冒號需要轉義
結果：
|
1
2
|
var reg = /[a-z\.\/\\:]+/;
console.log('79abncdc.ab123'.match(reg)); // ["abncdc.ab", index: 2, input: "79abncdc.ab123"]
|
demo8:
要求：去掉所有的html標簽
分析：html標簽的形式為
,所以我們可以匹配<開始，然后一些內容，再加上結束符 >
結果：
|
1
2
3
|
var reg = /<[^>]+>/gi;
var str = '<ul><li>hello world</li></ul>';
console.log(str.replace(reg,'')); // hello world
|
demo9:
要求：絕對路徑變相對路徑
分析： 比如: <img src="http://m.163.com/images/163.gif" /> 替換成 <img src="/images/163.gif" />.
我們要替換http:// 和后面的域名，第一個 / 為止，
結果：
|
1
2
3
|
var reg = /http:\/\/[^\/]+/g;
var str = 'http://m.163.com/images/163.gif';
console.log(str.replace(reg,'')); // /images/163.gif
|
demo10:
要求：用於用戶名注冊，戶名只能用中文、英文、數字、下划線、4-16個字符。
分析： 匹配中文的正則為 /[\u4E00-\u9FA5\uf900-\ufa2d]/,英文，數字的元字符為 \w,量詞 {4,16}
結果：
|
1
2
3
4
5
6
7
|
var reg = /^/[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/;
var str1 = 'hellow_1230';
var str2 = 'hellow_1230*';
var str3 = 'hellow_12304549764654657456465756';
console.log(reg.test(str1)); // true
console.log(reg.test(str2)); //false
console.log(reg.test(str3)); // false
|
demo11 :
要求：匹配身份證號
分析：身份證為15為或者18位，最后一位為數字或者x
結果：
|
1
2
3
|
var reg = /^(\d{14}|\d{17})(\d|[xX])$/;
var str = '44162119920547892X';
console.log(reg.test(str)); // true
|
demo12:
要求：驗證郵箱
分析：郵箱的形式可能為 234564@qq.com; fasdfja@163.com，可以看到，前面為字母或者數字，然后加@,@后面可能是數字或者是其他，然后再加 . 再然后是一些com或者其他字符，我們用()來進行分組；
結果：
|
1
2
3
4
5
6
7
8
9
10
11
|
var reg = /^([\w_-])+@([\w_-])+([\.\w_-])+/;
var str1 = 'test@hotmail.com';
var str2 = 'test@sima.vip.com';
var str3 = 'te-st@qq.com.cn';
var str4 = 'te_st@sima.vip.com';
var str5 = 'te.._st@sima.vip.com';
console.log(reg.test(str1)); // true
console.log(reg.test(str2)); // true
console.log(reg.test(str3)); // true
console.log(reg.test(str4)); // true
console.log(reg.test(str5)); // false
|
demo13:
要求：匹配源代碼中的鏈接
分析：a標簽中有href，也可能有class ,id等其他屬性，而且不確定a標簽后面是否有空格，所以要考慮的東西比較多。
結果：
|
1
2
3
|
var reg = /<a\s(\s*\w*?\s*=\s*".+?")*(\s*href\s*=\s*".+?")(\s*\w*?\s*=\s*".+?")*\s*>[\s\S]*?<\/a>/g;
var str = '<p>測試鏈接：<a id = "test" href="http://bbs.blueidea.com" title="無敵">經典論壇</a></p>';
console.log(str.match(reg)); // ["<a id = "test" href="http://bbs.blueidea.com" title="無敵">經典論壇</a>"]
|
demo14:
要求：匹配a標簽里面的內容
分析：上面的demo中，我們匹配到了a標簽，這里的話我們匹配a標簽里面的內容，這里要學習一個符號?:表示不匹配，所以我們在前面的括號中加上?:去掉a標簽的匹配，然后再a標簽內容里加個括號，表示分組。
結果：
|
1
2
3
|
var reg =/<a\s(?:\s*\w*?\s*=\s*".+?")*(?:\s*href\s*=\s*".+?")(?:\s*\w*?\s*=\s*".+?")*\s*>([\s\S]*?)<\/a>/;;
var str = '<a id = "test" href="http://bbs.blueidea.com" title="無敵">經典論壇</a>';
console.log(str.replace(reg,'$1')); // 經典論壇 $1 表示的是括號里面的分組，由於前面的括號都是不獲取，所以獲取的第一個括號的內容就是a標簽里面的內容
|
demo15：
要求：獲取url的指定參數的值
分析： url帶參數類似為這樣：http://www.baicu.com?type=1&value=789; 所以，要獲取的參數要么是在?或者&開頭，到下一個&或者直接后面什么都不跟為止。這里我們用new RegExp的形式，因為這樣可以傳參。
結果：
|
1
2
3
4
5
|
// 獲取url中的value值
var url = 'http://www.baicu.com?type=1&value=789';
var reg = new RegExp("(^|&|\\?)value=([^&]*)(&|$)");
console.log(url.match(reg)); //["&value=789", "&", "789", "", index: 27, input: "http://www.baicu.com?type=1&value=789"]
}
|
稍微改編一下，我們就可以弄一個獲取指定參數值的函數了
|
1
2
3
4
5
6
|
function getUrlParam(name) {
var reg = new RegExp("(^|&|\\?)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURIComponent(r[2]);
return null;
}
|
demo16:
要求：將數字 15476465轉變為15,476,465
分析：我們可以這樣，匹配一個數字，然后它的后面緊跟着三個數字，並且結尾也是要有三個數字，比如 12345689我們找到 12 345 689,符合條件的是數字2和5，因為它后面緊跟着三個數字，並且這樣結尾也是三個數字。然后我們在2和5的后面加個,,就達到了我們的目的12,345,689;
知識補充：這里我們需要介紹正則的一個知識點，斷言?=,它只匹配一個位置。假如匹配一個“人”字，但是你只想匹配中國人的人字，不想匹配法國人的人(?=中國)人;
結果：
|
1
2
3
|
var str = '15476465';
var reg =/(\d)(?=(\d{3})+$)/g;
console.log(str.replace(reg,'$1,')); //15,476,465
|
進一步講解：/(\d)(?=(\d{3})+$)/匹配的是一個數字，即(\d),
它后面的字符串必須是三的倍數，這個表達就是(?=(\d{3})+$),且最后一次匹配以 3 個數字結尾
$1,表示在第一個分組表達式匹配的字符后面加,，這里其實只有一個(\d)，問號后面的可以看成它的定語。/(\d)(?=(\d{3})+$)/g
這個表達式通俗來說是：要找到所有的單個字符，這些字符的后面跟隨的字符的個數必須是3的倍數，並在符合條件的單個字符后面添加,
demo17：
要求：將阿拉伯數字替換為中文大寫形式
分析：我們可以用replace來弄這個，replace中的function可以獲取到匹配的每一個內容，比如返回匹配數字188，那么就會依次返回1,8,8
結果：
|
1
2
3
4
5
6
|
var reg = /\d/g;
var arr=new Array("零","壹","貳","叄","肆","伍","陸","柒","捌","玖");
var str = '189454';
console.log(str.replace(reg,function(m) {
return arr[m]; //壹捌玖肆伍肆
}));
|
1. 分組和分支結構
這二者是括號最直覺的作用。
1.1 分組
我們知道/a+/匹配連續出現的“a”，而要匹配連續出現的“ab”時，需要使用/(ab)+/。
其中括號是提供分組功能，使量詞“+”作用於“ab”這個整體，測試如下：
var regex = /(ab)+/g; var string = "ababa abbb ababab"; console.log( string.match(regex) ); // ["abab", "ab", "ababab"] 1.2 分支結構
而在多選分支結構(p1|p2)中，此處括號的作用也是不言而喻的，提供了子表達式的所有可能。
比如，要匹配如下的字符串：
I love JavaScript
I love Regular Expression
可以使用正則：
var regex = /^I love (JavaScript|Regular Expression)$/; console.log( regex.test("I love JavaScript") ); // true console.log( regex.test("I love Regular Expression") ); // true 如果去掉正則中的括號，即/^I love JavaScript|Regular Expression$/，匹配字符串是"I love JavaScript"和"Regular Expression"，當然這不是我們想要的。
2. 分組引用
這是括號一個重要的作用，有了它，我們就可以進行數據提取，以及更強大的替換操作。
而要使用它帶來的好處，必須配合使用實現環境的API。
以日期為例。假設格式是yyyy-mm-dd的，我們可以先寫一個簡單的正則：
var regex = /\d{4}-\d{2}-\d{2}/; 然后再修改成括號版的：
var regex = /(\d{4})-(\d{2})-(\d{2})/; 為什么要使用這個正則呢？
2.1 提取數據
比如提取出年、月、日，可以這么做：
var regex = /(\d{4})-(\d{2})-(\d{2})/; var string = "2017-06-12"; console.log( string.match(regex) ); // => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"] match返回的一個數組，第一個元素是整體匹配結果，然后是各個分組（括號里）匹配的內容，然后是匹配下標，最后是輸入的文本。（注意：如果正則是否有修飾符g，match返回的數組格式是不一樣的）。
另外也可以使用正則對象的exec方法：
var regex = /(\d{4})-(\d{2})-(\d{2})/; var string = "2017-06-12"; console.log( regex.exec(string) ); // => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"] 同時，也可以使用構造函數的全局屬性$1至$9來獲取：
var regex = /(\d{4})-(\d{2})-(\d{2})/; var string = "2017-06-12"; regex.test(string); // 正則操作即可，例如 //regex.exec(string); //string.match(regex); console.log(RegExp.$1); // "2017" console.log(RegExp.$2); // "06" console.log(RegExp.$3); // "12" 2.2 替換
比如，想把yyyy-mm-dd格式，替換成mm/dd/yyyy怎么做？
var regex = /(\d{4})-(\d{2})-(\d{2})/; var string = "2017-06-12"; var result = string.replace(regex, "$2/$3/$1"); console.log(result); // "06/12/2017" 其中replace中的，第二個參數里用$1、$2、$3指代相應的分組。等價於如下的形式：
var regex = /(\d{4})-(\d{2})-(\d{2})/; var string = "2017-06-12"; var result = string.replace(regex, function() { return RegExp.$2 + "/" + RegExp.$3 + "/" + RegExp.$1; }); console.log(result); // "06/12/2017" 也等價於：
var regex = /(\d{4})-(\d{2})-(\d{2})/; var string = "2017-06-12"; var result = string.replace(regex, function(match, year, month, day) { return month + "/" + day + "/" + year; }); console.log(result); // "06/12/2017" 3. 反向引用
除了使用相應API引用分組，也可以在正則里引用分組。但只能引用之前出現的分組，即反向引用。
還是以日期為例。
比如要寫一個正則支持匹配如下三種格式：
2016-06-12
2016/06/12
2016.06.12
最先可能想到的正則是:
var regex = /\d{4}(-|\/|\.)\d{2}(-|\/|\.)\d{2}/; var string1 = "2017-06-12"; var string2 = "2017/06/12"; var string3 = "2017.06.12"; var string4 = "2016-06/12"; console.log( regex.test(string1) ); // true console.log( regex.test(string2) ); // true console.log( regex.test(string3) ); // true console.log( regex.test(string4) ); // true 其中/和.需要轉義。雖然匹配了要求的情況，但也匹配"2016-06/12"這樣的數據。
假設我們想要求分割符前后一致怎么辦？此時需要使用反向引用：
var regex = /\d{4}(-|\/|\.)\d{2}\1\d{2}/; var string1 = "2017-06-12"; var string2 = "2017/06/12"; var string3 = "2017.06.12"; var string4 = "2016-06/12"; console.log( regex.test(string1) ); // true console.log( regex.test(string2) ); // true console.log( regex.test(string3) ); // true console.log( regex.test(string4) ); // false 注意里面的\1，表示的引用之前的那個分組(-|\/|\.)。不管它匹配到什么（比如-），\1都匹配那個同樣的具體某個字符。
我們知道了\1的含義后，那么\2和\3的概念也就理解了，即分別指代第二個和第三個分組。
看到這里，此時，恐怕你會有兩個問題。
括號嵌套怎么辦？
以左括號（開括號）為准。比如：
var regex = /^((\d)(\d(\d)))\1\2\3\4$/; var string = "1231231233"; console.log( regex.test(string) ); // true console.log( RegExp.$1 ); // 123 console.log( RegExp.$2 ); // 1 console.log( RegExp.$3 ); // 23 console.log( RegExp.$4 ); // 3 我們可以看看這個正則匹配模式：
第一個字符是數字，比如說1，
第二個字符是數字，比如說2，
第三個字符是數字，比如說3，
接下來的是\1，是第一個分組內容，那么看第一個開括號對應的分組是什么，是123，
接下來的是\2，找到第2個開括號，對應的分組，匹配的內容是1，
接下來的是\3，找到第3個開括號，對應的分組，匹配的內容是23，
最后的是\4，找到第3個開括號，對應的分組，匹配的內容是3。
這個問題，估計仔細看一下，就該明白了。
另外一個疑問可能是，即\10是表示第10個分組，還是\1和0呢？答案是前者，雖然一個正則里出現\10比較罕見。測試如下：
var regex = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/; var string = "123456789# ######" console.log( regex.test(string) ); 4. 非捕獲分組
如果只想要分組的功能，但不會引用它，即，既不在API里引用分組，也不在正則里反向引用。此時可以使用非捕獲分組(?:p)，例如本文第一個例子可以修改為：
var regex = /(?:ab)+/g; var string = "ababa abbb ababab"; console.log( string.match(regex) ); // ["abab", "ab", "ababab"] 5. 相關案例
至此括號的作用已經講完了，總結一句話，就是提供了可供我們使用的分組，如何用就看我們的。
5.1 字符串trim方法模擬
trim方法是去掉字符串的開頭和結尾的空白符。有兩種思路去做。
第一種，匹配到開頭和結尾的空白符，然后替換成空字符。如：
function trim(str) { return str.replace(/^\s+|\s+$/g, ''); } console.log( trim(" foobar ") ); // "foobar" 第二種，匹配整個字符串，然后用引用來提取出相應的數據：
function trim(str) { return str.replace(/^\s+(.*?)\s+$/g, "$1"); } console.log( trim(" foobar ") ); // "foobar" 這里使用了惰性匹配*?，不然也會匹配最后一個空格之前的所有空格的。
當然，前者效率高。
5.2 將每個單詞的首字母轉換為大寫
function titleize(str) { return str.toLowerCase().replace(/(?:^|\s)\w/g, function(c) { return c.toUpperCase(); }); } console.log( titleize('my name is epeli') ); // "My Name Is Epeli" 思路是找到每個單詞的首字母，當然這里不使用非捕獲匹配也是可以的。
5.3 駝峰化
function camelize(str) { return str.replace(/[-_\s]+(.)?/g, function(match, c) { return c ? c.toUpperCase() : ''; }); } console.log( camelize('-moz-transform') ); // MozTransform 首字母不會轉化為大寫的。其中分組(.)表示首字母，單詞的界定，前面的字符可以是多個連字符、下划線以及空白符。正則后面的?的目的，是為了應對str尾部的字符可能不是單詞字符，比如str是'-moz-transform '。
5.4 中划線化
function dasherize(str) { return str.replace(/([A-Z])/g, '-$1').replace(/[-_\s]+/g, '-').toLowerCase(); } console.log( dasherize('MozTransform') ); // -moz-transform 駝峰化的逆過程。
5.5 html轉義和反轉義
// 將HTML特殊字符轉換成等值的實體 function escapeHTML(str) { var escapeChars = { '¢' : 'cent', '£' : 'pound', '¥' : 'yen', '€': 'euro', '©' :'copy', '®' : 'reg', '<' : 'lt', '>' : 'gt', '"' : 'quot', '&' : 'amp', '\'' : '#39' }; return str.replace(new RegExp('[' + Object.keys(escapeChars).join('') +']', 'g'), function(match) { return '&' + escapeChars[match] + ';'; }); } console.log( escapeHTML('<div>Blah blah blah</div>') ); // => <div>Blah blah blah</div> 其中使用了用構造函數生成的正則，然后替換相應的格式就行了，這個跟本文沒多大關系。
倒是它的逆過程，使用了括號，以便提供引用，也很簡單，如下：
// 實體字符轉換為等值的HTML。 function unescapeHTML(str) { var htmlEntities = { nbsp: ' ', cent: '¢', pound: '£', yen: '¥', euro: '€', copy: '©', reg: '®', lt: '<', gt: '>', quot: '"', amp: '&', apos: '\'' }; return str.replace(/\&([^;]+);/g, function(match, key) { if (key in htmlEntities) { return htmlEntities[key]; } return match; }); } console.log( unescapeHTML('<div>Blah blah blah</div>') ); // => <div>Blah blah blah</div> 通過key獲取相應的分組引用，然后作為對象的鍵。
5.6 匹配成對標簽
要求匹配：
<title>regular expression</title>
<p>laoyao bye bye</p>
不匹配：
<title>wrong!</p>
匹配一個開標簽，可以使用正則<[^>]+>，
匹配一個閉標簽，可以使用<\/[^>]+>，
但是要求匹配成對標簽，那就需要使用反向引用，如：
var regex = /<([^>]+)>[\d\D]*<\/\1>/; var string1 = "<title>regular expression</title>"; var string2 = "<p>laoyao bye bye</p>"; var string3 = "<title>wrong!</p>"; console.log( regex.test(string1) ); // true console.log( regex.test(string2) ); // true console.log( regex.test(string3) ); // false 其中開標簽<[^>]+>改成<([^>]+)>，使用括號的目的是為了后面使用反向引用，而提供分組。閉標簽使用了反向引用，<\/\1>。
另外[\d\D]的意思是，這個字符是數字或者不是數字，因此，也就是匹配任意字符的意思。
后記
正則中使用括號的例子那可是太多了，不一而足。