正則表達(dá)式之前學(xué)習(xí)的時(shí)候，因?yàn)楹芫脹](méi)怎么用，或者用的時(shí)候直接找網(wǎng)上現(xiàn)成的，所以都基本忘的差不多了。所以這篇文章即是筆記，也讓自己再重新學(xué)習(xí)一遍正則表達(dá)式。
????其實(shí)平時(shí)在操作一些字符串的時(shí)候，用正則的機(jī)會(huì)還是挺多的，之前沒(méi)怎么重視正則，這是一個(gè)錯(cuò)誤。寫(xiě)完這篇文章后，發(fā)覺(jué)工作中很多地方都可以用到正則，而且用起來(lái)其實(shí)還是挺爽的。

正則表達(dá)式作用

????正則表達(dá)式，又稱規(guī)則表達(dá)式，它可以通過(guò)一些設(shè)定的規(guī)則來(lái)匹配一些字符串，是一個(gè)強(qiáng)大的字符串匹配工具。

正則表達(dá)式方法

基本語(yǔ)法，正則聲明

js中，正則的聲明有兩種方式

1. 直接量語(yǔ)法：

   1	var reg = /d+/g/

2. 創(chuàng)建RegExp對(duì)象的語(yǔ)法

   1	var reg = new RegExp("\\d+", "g");

這兩種聲明方式其實(shí)還是有區(qū)別的，平時(shí)的話我比較喜歡第一種，方便一點(diǎn)，如果需要給正則表達(dá)式傳遞參數(shù)的話，那么只能用第二種創(chuàng)建RegExp的形式
格式：var pattern = new RegExp('regexp','modifier');
regexp： 匹配的模式，也就是上文指的正則規(guī)則。
modifier: 正則實(shí)例的修飾符,可選值有：
i : 表示區(qū)分大小寫(xiě)字母匹配。
m ：表示多行匹配。
g : 表示全局匹配。

傳參的形式如下：
我們用構(gòu)造函數(shù)來(lái)生成正則表達(dá)式

 

這里需要注意，反斜杠需要轉(zhuǎn)義，所以，直接聲明量中的語(yǔ)法為\d，這里需要為 \\d
那么，給它加變量，就和我們前面寫(xiě)的給字符串加變量一樣了。

 

 

支持正則的STRING對(duì)象方法

1. search 方法
   作用： 該方法用于檢索字符串中指定的子字符串，或檢索與正則表達(dá)式相匹配的字符串
   基本語(yǔ)法： stringObject.search(regexp);
   返回值： 該字符串中第一個(gè)與regexp對(duì)象相匹配的子串的起始位置。如果沒(méi)有找到任何匹配的子串，則返回-1；
   注意點(diǎn)： search()方法不執(zhí)行全局匹配，它將忽略標(biāo)志g，

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   var str = "hello world,hello world"; // 返回匹配到的第一個(gè)位置(使用的regexp對(duì)象檢索) console.log(str.search(/hello/)); // 0 // 沒(méi)有全局的概念 總是返回匹配到的第一個(gè)位置 console.log(str.search(/hello/g)); //0   console.log(str.search(/world/)); // 6   // 如果沒(méi)有檢索到的話，則返回-1 console.log(str.search(/longen/)); // -1   // 我們檢索的時(shí)候 可以忽略大小寫(xiě)來(lái)檢索 var str2 = "Hello"; console.log(str2.search(/hello/i)); // 0

 

1. match()方法
   作用： 該方法用于在字符串內(nèi)檢索指定的值，或找到一個(gè)或者多個(gè)正則表達(dá)式的匹配。類(lèi)似于indexOf()或者lastIndexOf();
   基本語(yǔ)法： stringObject.match(searchValue) 或者stringObject.match(regexp)
   返回值：
   ??存放匹配成功的數(shù)組; 它可以全局匹配模式，全局匹配的話，它返回的是一個(gè)數(shù)組。如果沒(méi)有找到任何的一個(gè)匹配，那么它將返回的是null；
   ??返回的數(shù)組內(nèi)有三個(gè)元素，第一個(gè)元素的存放的是匹配的文本，還有二個(gè)對(duì)象屬性
   ??index屬性表明的是匹配文本的起始字符在stringObject中的位置，input屬性聲明的是對(duì)stringObject對(duì)象的引用

   1 2 3 4 5 6 7

   var str = "hello world"; console.log(str.match("hello")); // ["hello", index: 0, input: "hello world"] console.log(str.match("Helloy")); // null console.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"]

 

1. replace()方法
   作用： 該方法用于在字符串中使用一些字符替換另一些字符，或者替換一個(gè)與正則表達(dá)式匹配的子字符串；
   基本用法： stringObject.replace(regexp/substr,replacement);
   返回值： 返回替換后的新字符串
   注意： 字符串的stringObject的replace()方法執(zhí)行的是查找和替換操作，替換的模式有2種，既可以是字符串，也可以是正則匹配模式，如果是正則匹配模式的話，那么它可以加修飾符g,代表全局替換，否則的話，它只替換第一個(gè)匹配的字符串；

• ??replacement 既可以是字符串，也可以是函數(shù)，如果它是字符串的話，那么匹配的將與字符串替換，replacement中的$有具體的含義，如下：
• ??$1,$2,$3….$99 含義是：與regexp中的第1到第99個(gè)子表達(dá)式相匹配的文本?？梢钥聪旅娴睦?/li>
• ??$& 的含義是：與RegExp相匹配的子字符串。
• ??lastMatch或RegExp[“$_”]的含義是：返回任何正則表達(dá)式搜索過(guò)程中的最后匹配的字符。
• ??lastParen或 RegExp[“$+”]的含義是：返回任何正則表達(dá)式查找過(guò)程中最后括號(hào)的子匹配。
• ??leftContext或RegExp[“$`”]的含義是：返回被查找的字符串從字符串開(kāi)始的位置到最后匹配之前的位置之間的字符。
• ??rightContext或RegExp[“$’”]的含義是：返回被搜索的字符串中從最后一個(gè)匹配位置開(kāi)始到字符串結(jié)尾之間的字符。

REGEXP對(duì)象方法

1. test()方法
   作用： 該方法用于檢測(cè)一個(gè)字符串是否匹配某個(gè)模式；
   基本語(yǔ)法： RegExpObject.test(str);
   返回： 返回true，否則返回false；

   1 2 3 4 5 6 7

   var str = "longen and yunxi"; console.log(/longen/.test(str)); // true console.log(/longlong/.test(str)); //false   // 或者創(chuàng)建RegExp對(duì)象模式 var regexp = new RegExp("longen"); console.log(regexp.test(str)); // true

 

1. exec()方法
   作用： 該方法用于檢索字符串中的正則表達(dá)式的匹配
   基本語(yǔ)法： RegExpObject.exec(string)
   返回值： 返回一個(gè)數(shù)組，存放匹配的結(jié)果，如果未找到匹配，則返回值為null；
   注意點(diǎn)： 該返回的數(shù)組的第一個(gè)元素是與正則表達(dá)式相匹配的文本
   該方法還返回2個(gè)屬性，index屬性聲明的是匹配文本的第一個(gè)字符的位置；input屬性則存放的是被檢索的字符串string；該方法如果不是全局的話，返回的數(shù)組與match()方法返回的數(shù)組是相同的。

   1 2 3 4 5 6

   var str = "longen and yunxi"; console.log(/longen/.exec(str)); // 打印 ["longen", index: 0, input: "longen and yunxi"]   // 假如沒(méi)有找到的話，則返回null console.log(/wo/.exec(str)); // null

正則表達(dá)式類(lèi)型

元字符

用于構(gòu)建正則表達(dá)式的符號(hào)，常用的有

其實(shí)常用的幾個(gè)可以簡(jiǎn)單記為下面的幾個(gè)意思:
\s : 空格
\S : 非空格
\d : 數(shù)字
\D : 非數(shù)字
\w : 字符 ( 字母 ，數(shù)字，下劃線_ )
\W : 非字符例子：是否有不是數(shù)字的字符

量詞

用于限定子模式出現(xiàn)在正則表達(dá)式的次數(shù)。

位置符號(hào)

注意點(diǎn)： 
??剛開(kāi)始學(xué)習(xí)正則的時(shí)候，是比較容易混淆 ^ : 放在正則的最開(kāi)始位置，就代表起始的意思,放在中括號(hào)里，表示排除的意思。也就是說(shuō)，/[^a]/和/^[a]/是不一樣的，前者是排除的意思，后者是代表首位
??$:正則的最后位置,就代表結(jié)束的意思.

分組

字符類(lèi)

??()分組符號(hào)可以理解為，數(shù)學(xué)運(yùn)算中的括號(hào)，用于計(jì)算的分組使用。[]可以理解為，只要滿足括號(hào)里面其中的某種條件即可。比如[abc],意思是滿足abc中的某一個(gè)，這樣比較好記。

貪婪模式和非貪婪模式

??其實(shí)可以簡(jiǎn)單的理解，貪婪模式就是盡可能多的匹配，非貪婪模式就是盡可能少的匹配.
貪婪模式量詞： {x,y} , {x,} , ? , * , 和 +
非貪婪模式量詞： {x,y}?，{x,}?，??，*?，和 +?,所以非貪婪模式就是在貪婪模式后面加了一個(gè)問(wèn)號(hào)

我們用代碼來(lái)理解一下貪婪模式和非貪婪模式的區(qū)別

 

??從上面的代碼中，我們可以看到，非貪婪模式，當(dāng)它匹配到它需要的第一個(gè)滿足條件之后，他就會(huì)停止了。而貪婪模式則會(huì)繼續(xù)向右邊進(jìn)行匹配下去。
注意點(diǎn)：?號(hào)在一些量詞后面才是指非貪婪模式，如果直接在一些字符串的后面，表示的是匹配0次或1次。如下所示

 

零寬正向斷言和負(fù)向斷言

• (?=)零寬正向斷言: 括號(hào)內(nèi)表示某個(gè)位置右邊必須和=右邊匹配上
• (?!)負(fù)向斷言: 括號(hào)內(nèi)表示某個(gè)位置右邊不和!后的字符匹配。
  概念很抽象，直接看代碼：

  1 2 3 4 5 6 7 8

  var 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)); // null console.log("string_x".match(/string(?=s)/)); // null

如果理解了(?=),那么(?!)就很好理解了

 

正則表達(dá)式實(shí)戰(zhàn)練習(xí)

??上面講的基本都是理論，下面我們來(lái)實(shí)戰(zhàn)一番，以此來(lái)鞏固我們正則表達(dá)式的學(xué)習(xí)，學(xué)習(xí)的過(guò)程以demo的形式，對(duì)我們的知識(shí)點(diǎn)進(jìn)行鞏固。
??下面的實(shí)例是參考這篇文章，有興趣可以看 原文,不過(guò)我整理了一下，個(gè)人覺(jué)得，把下面的例子都實(shí)踐一遍，那么就基本掌握正則的使用了，滿足平時(shí)的工作基本夠了。

demo1: 
要求：匹配結(jié)尾的數(shù)字，例如：取出字符串最后一組數(shù)字，如：30CACDVB0040 取出40
分析：匹配數(shù)組字符為\d,匹配1次或多次為 +，以什么結(jié)尾為 $,全局匹配為 g
結(jié)果：

 

如果我們只想要最后結(jié)尾的最后兩個(gè)數(shù)字，則可以使用量詞 {n,m},所以結(jié)果為：

 

demo2: 
要求:統(tǒng)一空格個(gè)數(shù),例如：字符串內(nèi)字符鍵有空格，但是空格的數(shù)量可能不一致，通過(guò)正則將空格的個(gè)數(shù)統(tǒng)一變?yōu)橐粋€(gè)。
分析： 匹配空格的字符為 \s
結(jié)果：

 

demo3: 
要求：判斷字符串是不是由數(shù)字組成
分析：我們可以這樣匹配，以數(shù)字 \d 開(kāi)頭^,以數(shù)字結(jié)尾 $,匹配零次或多次 *
結(jié)果：

 

demo4: 
要求：驗(yàn)證是否為手機(jī)號(hào)
分析：現(xiàn)在手機(jī)開(kāi)頭的范圍比較多，第一位是【1】開(kāi)頭，第二位則則有【3,4,5,7,8】，第三位則是【0-9】并且匹配9個(gè)數(shù)字。
結(jié)果：

 

demo5: 
要求：刪除字符串兩端的空格
分析：跟demo2類(lèi)似，匹配空格 ^\s開(kāi)頭，空格結(jié)尾 \s$
結(jié)果：

 

demo6: 
要求：只能輸入數(shù)字和小數(shù)點(diǎn)
分析：開(kāi)頭需要匹配為數(shù)字，結(jié)尾也應(yīng)為數(shù)字，然后再加個(gè)點(diǎn),點(diǎn)必須轉(zhuǎn)義，匹配0次或一次
結(jié)果：

 

demo7: 
要求：只能輸入小寫(xiě)的英文字母和小數(shù)點(diǎn)，和冒號(hào)，正反斜杠(：./)
分析：這幾個(gè)要求組成一個(gè)分組，把他們放在一個(gè)分組里,點(diǎn)，正反斜杠，冒號(hào)需要轉(zhuǎn)義
結(jié)果：

 

demo8: 
要求：去掉所有的html標(biāo)簽
分析：html標(biāo)簽的形式為

,所以我們可以匹配<開(kāi)始，然后一些內(nèi)容，再加上結(jié)束符 >
結(jié)果：

 

demo9: 
要求：絕對(duì)路徑變相對(duì)路徑
分析： 比如: <img src="http://m.163.com/images/163.gif" /> 替換成 <img src="/images/163.gif" />.
我們要替換http:// 和后面的域名，第一個(gè) / 為止，
結(jié)果：

 

demo10: 
要求：用于用戶名注冊(cè)，戶名只能用中文、英文、數(shù)字、下劃線、4-16個(gè)字符。
分析： 匹配中文的正則為 /[\u4E00-\u9FA5\uf900-\ufa2d]/,英文，數(shù)字的元字符為 \w,量詞 {4,16}
結(jié)果：

 

demo11 : 
要求：匹配身份證號(hào)
分析：身份證為15為或者18位，最后一位為數(shù)字或者x
結(jié)果：

 

demo12: 
要求：驗(yàn)證郵箱
分析：郵箱的形式可能為 234564@qq.com; fasdfja@163.com，可以看到，前面為字母或者數(shù)字，然后加@,@后面可能是數(shù)字或者是其他，然后再加 . 再然后是一些com或者其他字符，我們用()來(lái)進(jìn)行分組；
結(jié)果：

 

demo13: 
要求：匹配源代碼中的鏈接
分析：a標(biāo)簽中有href，也可能有class ,id等其他屬性，而且不確定a標(biāo)簽后面是否有空格，所以要考慮的東西比較多。
結(jié)果：

 

demo14: 
要求：匹配a標(biāo)簽里面的內(nèi)容
分析：上面的demo中，我們匹配到了a標(biāo)簽，這里的話我們匹配a標(biāo)簽里面的內(nèi)容，這里要學(xué)習(xí)一個(gè)符號(hào)?:表示不匹配，所以我們?cè)谇懊娴睦ㄌ?hào)中加上?:去掉a標(biāo)簽的匹配，然后再a標(biāo)簽內(nèi)容里加個(gè)括號(hào)，表示分組。
結(jié)果：

 

demo15： 
要求：獲取url的指定參數(shù)的值
分析： url帶參數(shù)類(lèi)似為這樣：http://www.?type=1&value=789; 所以，要獲取的參數(shù)要么是在?或者&開(kāi)頭，到下一個(gè)&或者直接后面什么都不跟為止。這里我們用new RegExp的形式，因?yàn)檫@樣可以傳參。
結(jié)果：

 

稍微改編一下，我們就可以弄一個(gè)獲取指定參數(shù)值的函數(shù)了

 

demo16: 
要求：將數(shù)字 15476465轉(zhuǎn)變?yōu)?5,476,465
分析：我們可以這樣，匹配一個(gè)數(shù)字，然后它的后面緊跟著三個(gè)數(shù)字，并且結(jié)尾也是要有三個(gè)數(shù)字，比如 12345689我們找到 12 345 689,符合條件的是數(shù)字2和5，因?yàn)樗竺婢o跟著三個(gè)數(shù)字，并且這樣結(jié)尾也是三個(gè)數(shù)字。然后我們?cè)?和5的后面加個(gè),,就達(dá)到了我們的目的12,345,689;
知識(shí)補(bǔ)充：這里我們需要介紹正則的一個(gè)知識(shí)點(diǎn)，斷言?=,它只匹配一個(gè)位置。假如匹配一個(gè)“人”字，但是你只想匹配中國(guó)人的人字，不想匹配法國(guó)人的人(?=中國(guó))人;
結(jié)果：

 

進(jìn)一步講解：/(\d)(?=(\d{3})+$)/匹配的是一個(gè)數(shù)字，即(\d),
它后面的字符串必須是三的倍數(shù)，這個(gè)表達(dá)就是(?=(\d{3})+$),且最后一次匹配以 3 個(gè)數(shù)字結(jié)尾
$1,表示在第一個(gè)分組表達(dá)式匹配的字符后面加,，這里其實(shí)只有一個(gè)(\d)，問(wèn)號(hào)后面的可以看成它的定語(yǔ)。/(\d)(?=(\d{3})+$)/g
這個(gè)表達(dá)式通俗來(lái)說(shuō)是：要找到所有的單個(gè)字符，這些字符的后面跟隨的字符的個(gè)數(shù)必須是3的倍數(shù)，并在符合條件的單個(gè)字符后面添加,

demo17： 
要求：將阿拉伯?dāng)?shù)字替換為中文大寫(xiě)形式
分析：我們可以用replace來(lái)弄這個(gè)，replace中的function可以獲取到匹配的每一個(gè)內(nèi)容，比如返回匹配數(shù)字188，那么就會(huì)依次返回1,8,8
結(jié)果：

 

 

 

 

 

 

1. 分組和分支結(jié)構(gòu)

這二者是括號(hào)最直覺(jué)的作用。

1.1 分組

我們知道/a+/匹配連續(xù)出現(xiàn)的“a”，而要匹配連續(xù)出現(xiàn)的“ab”時(shí)，需要使用/(ab)+/。

其中括號(hào)是提供分組功能，使量詞“+”作用于“ab”這個(gè)整體，測(cè)試如下：

var regex = /(ab)+/g;
var string = "ababa abbb ababab";
console.log( string.match(regex) ); // ["abab", "ab", "ababab"]

1.2 分支結(jié)構(gòu)

而在多選分支結(jié)構(gòu)(p1|p2)中，此處括號(hào)的作用也是不言而喻的，提供了子表達(dá)式的所有可能。

比如，要匹配如下的字符串：

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

如果去掉正則中的括號(hào)，即/^I love JavaScript|Regular Expression$/，匹配字符串是"I love JavaScript"和"Regular Expression"，當(dāng)然這不是我們想要的。

2. 分組引用

這是括號(hào)一個(gè)重要的作用，有了它，我們就可以進(jìn)行數(shù)據(jù)提取，以及更強(qiáng)大的替換操作。

而要使用它帶來(lái)的好處，必須配合使用實(shí)現(xiàn)環(huán)境的API。

以日期為例。假設(shè)格式是yyyy-mm-dd的，我們可以先寫(xiě)一個(gè)簡(jiǎn)單的正則：

var regex = /\d{4}-\d{2}-\d{2}/;

然后再修改成括號(hào)版的：

var regex = /(\d{4})-(\d{2})-(\d{2})/;

為什么要使用這個(gè)正則呢？

2.1 提取數(shù)據(jù)

比如提取出年、月、日，可以這么做：

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è)數(shù)組，第一個(gè)元素是整體匹配結(jié)果，然后是各個(gè)分組（括號(hào)里）匹配的內(nèi)容，然后是匹配下標(biāo)，最后是輸入的文本。（注意：如果正則是否有修飾符g，match返回的數(shù)組格式是不一樣的）。

另外也可以使用正則對(duì)象的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"]

同時(shí)，也可以使用構(gòu)造函數(shù)的全局屬性$1至$9來(lái)獲?。?/p>

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中的，第二個(gè)參數(shù)里用$1、$2、$3指代相應(yīng)的分組。等價(jià)于如下的形式：

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"

也等價(jià)于：

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. 反向引用

除了使用相應(yīng)API引用分組，也可以在正則里引用分組。但只能引用之前出現(xiàn)的分組，即反向引用。

還是以日期為例。

比如要寫(xiě)一個(gè)正則支持匹配如下三種格式：

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

其中/和.需要轉(zhuǎn)義。雖然匹配了要求的情況，但也匹配"2016-06/12"這樣的數(shù)據(jù)。

假設(shè)我們想要求分割符前后一致怎么辦？此時(shí)需要使用反向引用：

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，表示的引用之前的那個(gè)分組(-|\/|\.)。不管它匹配到什么（比如-），\1都匹配那個(gè)同樣的具體某個(gè)字符。

我們知道了\1的含義后，那么\2和\3的概念也就理解了，即分別指代第二個(gè)和第三個(gè)分組。

看到這里，此時(shí)，恐怕你會(huì)有兩個(gè)問(wèn)題。

括號(hào)嵌套怎么辦？

以左括號(hào)（開(kāi)括號(hào)）為準(zhǔn)。比如：

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

我們可以看看這個(gè)正則匹配模式：

第一個(gè)字符是數(shù)字，比如說(shuō)1，

第二個(gè)字符是數(shù)字，比如說(shuō)2，

第三個(gè)字符是數(shù)字，比如說(shuō)3，

接下來(lái)的是\1，是第一個(gè)分組內(nèi)容，那么看第一個(gè)開(kāi)括號(hào)對(duì)應(yīng)的分組是什么，是123，

接下來(lái)的是\2，找到第2個(gè)開(kāi)括號(hào)，對(duì)應(yīng)的分組，匹配的內(nèi)容是1，

接下來(lái)的是\3，找到第3個(gè)開(kāi)括號(hào)，對(duì)應(yīng)的分組，匹配的內(nèi)容是23，

最后的是\4，找到第3個(gè)開(kāi)括號(hào)，對(duì)應(yīng)的分組，匹配的內(nèi)容是3。

這個(gè)問(wèn)題，估計(jì)仔細(xì)看一下，就該明白了。

另外一個(gè)疑問(wèn)可能是，即\10是表示第10個(gè)分組，還是\1和0呢？答案是前者，雖然一個(gè)正則里出現(xiàn)\10比較罕見(jiàn)。測(cè)試如下：

var regex = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/;
var string = "123456789# ######"
console.log( regex.test(string) );

4. 非捕獲分組

如果只想要分組的功能，但不會(huì)引用它，即，既不在API里引用分組，也不在正則里反向引用。此時(shí)可以使用非捕獲分組(?:p)，例如本文第一個(gè)例子可以修改為：

var regex = /(?:ab)+/g;
var string = "ababa abbb ababab";
console.log( string.match(regex) ); // ["abab", "ab", "ababab"]

5. 相關(guān)案例

至此括號(hào)的作用已經(jīng)講完了，總結(jié)一句話，就是提供了可供我們使用的分組，如何用就看我們的。

5.1 字符串trim方法模擬

trim方法是去掉字符串的開(kāi)頭和結(jié)尾的空白符。有兩種思路去做。

第一種，匹配到開(kāi)頭和結(jié)尾的空白符，然后替換成空字符。如：

function trim(str) {
	return str.replace(/^\s+|\s+$/g, '');
}
console.log( trim("  foobar   ") ); // "foobar"

第二種，匹配整個(gè)字符串，然后用引用來(lái)提取出相應(yīng)的數(shù)據(jù)：

function trim(str) {
	return str.replace(/^\s+(.*?)\s+$/g, "$1");
}
console.log( trim("  foobar   ") ); // "foobar"

這里使用了惰性匹配*?，不然也會(huì)匹配最后一個(gè)空格之前的所有空格的。

當(dāng)然，前者效率高。

5.2 將每個(gè)單詞的首字母轉(zhuǎn)換為大寫(xiě)

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"

思路是找到每個(gè)單詞的首字母，當(dāng)然這里不使用非捕獲匹配也是可以的。

5.3 駝峰化

function camelize(str) {
	return str.replace(/[-_\s]+(.)?/g, function(match, c) {
		return c ? c.toUpperCase() : '';
	});
}
console.log( camelize('-moz-transform') ); // MozTransform

首字母不會(huì)轉(zhuǎn)化為大寫(xiě)的。其中分組(.)表示首字母，單詞的界定，前面的字符可以是多個(gè)連字符、下劃線以及空白符。正則后面的?的目的，是為了應(yīng)對(duì)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

駝峰化的逆過(guò)程。

5.5 html轉(zhuǎn)義和反轉(zhuǎn)義

// 將HTML特殊字符轉(zhuǎn)換成等值的實(shí)體
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>

其中使用了用構(gòu)造函數(shù)生成的正則，然后替換相應(yīng)的格式就行了，這個(gè)跟本文沒(méi)多大關(guān)系。

倒是它的逆過(guò)程，使用了括號(hào)，以便提供引用，也很簡(jiǎn)單，如下：

// 實(shí)體字符轉(zhuǎn)換為等值的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>

通過(guò)key獲取相應(yīng)的分組引用，然后作為對(duì)象的鍵。

5.6 匹配成對(duì)標(biāo)簽

要求匹配：

<title>regular expression</title>

<p>laoyao bye bye</p>

不匹配：

<title>wrong!</p>

匹配一個(gè)開(kāi)標(biāo)簽，可以使用正則<[^>]+>，

匹配一個(gè)閉標(biāo)簽，可以使用<\/[^>]+>，

但是要求匹配成對(duì)標(biāo)簽，那就需要使用反向引用，如：

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

其中開(kāi)標(biāo)簽<[^>]+>改成<([^>]+)>，使用括號(hào)的目的是為了后面使用反向引用，而提供分組。閉標(biāo)簽使用了反向引用，<\/\1>。

另外[\d\D]的意思是，這個(gè)字符是數(shù)字或者不是數(shù)字，因此，也就是匹配任意字符的意思。

后記

正則中使用括號(hào)的例子那可是太多了，不一而足。

 轉(zhuǎn)自https://www.cnblogs.com/libin-1/p/7004546.html