從零開始學正則（四）

壹 ❀ 引

我在 從零開始學正則（三）這篇博客中介紹了分組引用與反向引用的概念，靈活利用分組能讓咱們的正則表達式更爲簡潔。在文章結尾咱們留下了兩個問題，一問使用正則模擬實現 trim方法；二問將my name is echo每一個單詞首字母轉爲大寫。

咱們先來分析第一個問題，trim屬於String方法，能去除字符串頭尾空格，因此咱們只須要寫一個正則匹配頭尾空格將其替換成空便可。空格屬於空白符，因此這裏須要使用字符組  \s ，空格可能有多個，因此要使用量詞 + ；其次咱們須要匹配緊接開頭後與結尾前的空格，因此須要使用^與$；最後將空格替換成空字符串，因此須要使用replace方法，綜合起來，就應該是這樣：

var str = '  聽風 是風  ';
var regex = /^\s+|\s+$/g;
var result = str.replace(regex, ''); //聽風 是風

有人確定就納悶了，「聽風」與「是風」中間的空格怎麼沒被去除呢？常理上來講，聽風后的空格也算開頭位置^以後，結束位置$以前啊；其實經過圖解已經很清楚，能被匹配的空格必定是緊接開頭位置以後，再到「聽風」時，以後的空格像是被「聽風」打斷了同樣，已經不具有被匹配的資格了。關於^$如有疑問，能夠閱讀博主 JS 正則表達式^$詳解，脫字符^與美圓符$同時寫表示什麼意思？這篇博客。

咱們再來看第二個問題，將my name is echo首字符轉爲大寫，縱觀首字符出現的位置要麼在^以後，要麼在空格以後，因此只要匹配這兩個位置以後的字符，再利用String方法toUpperCase方法轉爲大寫便可，因此能夠這麼寫：

var result = 'my name is echo'.replace(/(^|\s)\w/g, function (word) {
    return word.toUpperCase();
});
console.log(result); //My Name Is Echo

注意，(^|\s) 因爲是一個分組，因此正則仍是會存儲此分組所匹配的信息，但咱們只是須要使用此分組來肯定字符的位置，因此此分組匹配結果保存起來也是無心義的，浪費內存，因此更優的寫法是這樣：

var result = 'my name is echo'.replace(/(?:^|\s)\w/g, function (word) {
    return word.toUpperCase();
});

仔細對比兩張圖解能夠發現，在添加非捕獲括號後，(?:^|\s) 只是單純起到匹配做用，失去了組的含義。

那麼關於題目解析就說到這裏，讓咱們開始本篇學習。說在前面，正則學習系列文章均爲我閱讀 老姚《JavaScript正則迷你書》的讀書筆記，文中全部正則圖解均使用regulex製做。那麼本文開始！

 貳 ❀ 理解正則的回溯

回溯屬於正則匹配原理上的東西，但理解並不難，咱們經過一個簡單的例子先來了解什麼是回溯。

好比，咱們如今有這樣一個正則 /ab{1,3}c/ ，它表示匹配 a加上1-3個b再加上c這樣的字符串。

咱們假設如今使用此正則匹配字符串 abbbc ，它的匹配過程是這樣，這裏直接引用原書的圖：

而當咱們使用此正則匹配字符串 abbc 時，它的匹配過程倒是這樣：

仔細對比兩次匹配圖解能夠發現，儘管字符串 abbc 只有兩個字母b，但因爲量詞範圍是 {1,3} ，因此匹配過程當中仍是作了第三次匹配的嘗試，只是匹配失敗了。因而匹配狀態回到了第二次字母b匹配成功時的樣子，而後開始接下來的匹配。能夠看到第6步與第4步是徹底相同的，咱們將第6步稱爲回溯。

咱們再來看個例子加深回溯的印象，假設如今有這段正則 /ab{1,3}bbc/ ，咱們用於匹配字符串 abbbc ，它的匹配過程是這樣：

請留意圖解中第7步與第10步的回溯，由於正則默認就是貪婪匹配，對於量詞 {1,3} 而言，它一開始就把三個字母 b 給匹配完了，但正則匹配要顧全大局，後面 bb 還須要匹配，沒辦法只能回溯，將量詞 {1,3} 匹配的b先吐一個出來讓給第一個字母b；緊接着又匹配，發現又不夠，因而再次回溯，量詞 {1,3} 又得吐一個出來，此次回溯的起點要更早，直接回到量詞 {1,3} 只匹配了一個字母b的步驟，而後從新匹配直至結束。

咱們總結起來講就是量詞 {1,3} 就是先下手爲強，強佔三個b，但正則爲顧全大局，批評了量詞的貪婪行爲讓其爲後面的字段讓位（回溯），因此最後量詞 {1,3} 只對應了一個字母b。

最後看個由於不良寫法致使大量回溯的例子，如今使用正則 /".*"/ 匹配字符 "abc"de，圖解過程是這樣：

咱們是但願匹配出 "abc"，但因爲使用了通配符 . 加上量詞 * ，因爲貪婪的本性，直接將整個字符匹配了一遍，直接匹配完成後，正則發現我還有個雙引號要匹配，因而一次次回退，直到回到被 .* 匹配過的雙引號，從新再匹配。

記住 .* 很是影響性能，既然咱們但願匹配一對雙引號加上中間若干不是引好的字符，將正則改成 /"[^"]*"/ 會好不少。

 叄 ❀ 常見的回溯形式

正則匹配字符的整個流程有個專業的名詞叫回溯法。咱們能夠看看百度百科的官方解釋：

回溯法（探索與回溯法）是一種選優搜索法，又稱爲試探法，按選優條件向前搜索，以達到目標。但當探索到某一步時，發現原先選擇並不優或達不到目標，就退回一步從新選擇，這種走不通就退回再走的技術爲回溯法，而知足回溯條件的某個狀態的點稱爲「回溯點」。

這很是相似深度優先算法，先從一條線走到底，發現行不通了再回溯到分支點，嘗試其它路線。

1.貪婪量詞

在上文中咱們已經展現了幾個由於量詞貪婪致使回溯的例子。好比量詞 {1,3} 一開始就霸佔了三個字母b，但因爲正則得顧全大局，後面還有兩個b須要匹配，致使量詞須要吐出兩個字母b，從而形成兩次回溯。

那如今有個問題，若是量詞緊跟量詞貪婪性會怎麼樣呢？咱們來看個簡單的例子：

var string = "1234";
var regex = /(\d{1,3})(\d{1,3})/;
console.log( regex.exec(string) );// ["1234", "123", "4", index: 0, input: "1234", groups: undefined]

經過結果123與4能夠看出若是存在多個量詞，前面的量詞老是先下手爲強，雖然你們都很貪婪，但由於近水樓臺先得月，在前面的老是拿本身能拿的極限。

2.惰性量詞

咱們知道能夠經過添加?將匹配模式改變成惰性匹配，咱們來看個簡單的例子：

var string = "1234";
var regex = /(\d{1,3}?)(\d{1,3})/;
console.log(regex.exec(string)); //  ["1234", "1", "234", index: 0, input: "1234", groups: undefined

能夠看到經過添加了?，分組1果真只匹配了一個數字1，變得再也不貪婪。

不過即便是惰性匹配，它也有身不禁己的狀況，咱們來個有趣的例子：

var string = "12345";
var regex = /^(\d{1,3}?)(\d{1,3})$/;
console.log(regex.test(string)); //true

能夠看到咱們使用 test方法 檢驗結果仍是true，哎？exec方法匹配的結果是1和234，加起來才四個數字，怎麼在test 12345時還爲true呢，由於此時的匹配過程是這樣的：

分組 (\d{1,3}?) 確實不貪婪，一開始也只匹配了一個數字，但匹配到5時，發現還差一個數字咱們才能成功匹配到尾部，爲了顧全大局，那就只能麻煩不貪婪的分組1再多匹配一個數字，顧全大局嘛，不寒磣。

3.分支結構

咱們在第一篇文章中也有提到分支結構也是惰性匹配，看個例子：

var regex = /hello|helloEcho/g;
var result = 'helloEcho'.match(regex);
console.log(result);//["hello"]

對於分支而言，由於hello這條分支能走通，那麼後面的分支就再也不嘗試了。固然也存在前面的分支走不通，因而回溯走另外一條分支的狀況。好比這個例子：

var regex = /^(?:can|candy)$/g;
var result = regex.test('candy');
console.log(result);//true

它的匹配過程是這樣：

當can分支走不通了，回溯並切換到candy分支嘗試。

 肆 ❀ 總

那麼到這裏，關於回溯相關的知識就介紹完了，好消息是沒有思考題，畢竟這個點太晚了，我也有點困了....那麼咱們回顧一下知識點。

貪婪老是盡本身所能拿最多，但正則顧全大局，有時候它得把已經吞下去的再給吐出來。

惰性老是能少拿就少拿點，但正則顧全大局，有時惰性仍是得多拿一點。

分支老是先將前面的分支走到底，走不通了再回到分支的岔口，再嘗試其它分支的可能性。

那麼到這裏，本文結束，我得去看第五章了！