從零開始學正則（六）

 壹 ❀ 引

我在 從零開始學正則（五）這篇文章中介紹了正則常見結構與操做符，在瞭解操做符的優先級後，知曉瞭如何去拆分一個看似複雜的正則表達式。正則除了會看會讀，會寫一個正則每每更重要。那麼要去寫一個正則就面臨了諸多問題，何時該用正則？怎麼保證正則的準確性？正則如何提高性能？那麼本篇文章將從這三個點出發，讓咱們在會寫正則的前提下寫的更好。

說在前面，正則學習系列文章均爲我閱讀 老姚《JavaScript正則迷你書》的讀書筆記，文中全部正則圖解均使用regulex製做。那麼本文開始！

 貳 ❀ 該不應使用正則？

看到這個標題你確定納悶，學的就是正則，怎麼還該不應用正則？但在實際開發中，一個問題能夠用正則解決，其實也可使用其它方法解決。咱們學正則不必定要死板的想要用正則解決全部問題，或許使用其它作法更棒呢？

好比咱們如今有字段 2019-12-24 ，我想分別取出年月日，使用正則可使用match方法配合分組獲取實現：

var result = '2019-12-24'.match(/^(\d{4})-(\d{2})-(\d{2})$/);
console.log(RegExp.$1, RegExp.$2, RegExp.$3); //2019 12 24

有沒有其它作法呢？別忘了字符串的 split 切割方法，好比：

var arr = '2019-12-24'.split('-');
console.log(arr[0], arr[1], arr[2]);//2019 12 24

相比之下你以爲哪一種更簡單呢？

再如咱們想驗證字符串中是否包含「:」，咱們可使用正則實現：

var result = /\:/.exec('12:34');
console.log(result); //[":", index: 2, input: "12:34", groups: undefined]

更簡單的作法，咱們能夠直接使用indexOf檢查索引，若是沒有返回-1，若是有返回第一個匹配的字符下標。

var result = '12:34'.indexOf(":");
console.log(result); //2

最後看個截止字段的例子，相比使用正則，使用字符串方法substr或substring都會簡單不少。固然若你對這兩個方法有疑惑，能夠讀讀博主這篇文章  substring和substr以及slice和splice的用法和區別。

var string = "hello,聽風是風";
var result = /.{6}(.+)/.exec(string)[1];
console.log(result); //聽風是風
var result = string.substr(6);
console.log(result); //聽風是風
var result = string.substring(6);
console.log(result); //聽風是風

經過以上三個例子能夠看出，在一些更偏於字符操做的狀況下，該使用字符串方法就得用，學會靈活變通。

 叄 ❀ 正則的準確性

何爲準確性，一段正則除了能匹配咱們所須要的，還得保證不會匹配那些咱們不須要的，假設咱們如今要匹配以下三種座機（固定電話）號碼，該如何寫這個正則呢：

var num1 = '055188888888';
var num2 = '0551-88888888';
var num3 = '(0551)88888888';

科普一下，座機號碼由 區號+座機號 組成，且區號長度爲3-4位數字且首位數字必須爲0，而座機號由7-8位數字組成，且首數字不能爲0。

嘗試分析上面三種座機號碼格式，第一種爲區號直接拼號碼，第二種使用了拼接符 - ，第三種使用了圓括號包裹區號，很明顯這是三種分支狀況，因此咱們能夠先寫匹配數字的正則，再加分支條件。

只是匹配數字這也太簡單了，不假思索的寫出  /^\d{3,4}\d{7,8}$/ ，那麼這段正則就是不具有準確性的正則，別忘了咱們在前面有提到區號與號碼首數字的問題，因此改改應該是這樣：

var regexp = /^0\d{2,3}[1-9]\d{6,7}$/;

固然這個正則只能匹配區號直接緊接號碼的狀況，有拼接符的狀況就是這樣：

var regexp = /^0\d{2,3}-[1-9]\d{6,7}$/;

帶圓括號的格式就是這樣：

var regexp = /^\(0\d{2,3}\)[1-9]\d{6,7}$/;

咱們仔細對比這三段正則，能夠發現正則後半段是徹底相同的，區別也只是在前半段，因此將前部分以分支表示，改寫正則後應該是這樣：

var regexp = /^(?:0\d{2,3}|0\d{2,3}-|\(0\d{2,3}\))[1-9]\d{6,7}$/;

還能不能簡寫？仔細觀察前兩種分支狀況，一個是無拼接符一個是有拼接符，除此以外其它部分都同樣，這不又能夠組合成拼接符無關緊要的狀況了，因此咱們再次簡化：

var regexp = /^(?:0\d{2,3}-?|\(0\d{2,3}\))[1-9]\d{6,7}$/;

咱們簡單測試下，發現徹底沒問題

console.log(regexp.test(num1)); //true
console.log(regexp.test(num2)); //true
console.log(regexp.test(num3)); //true

說到拼接符無關緊要，可能有的同窗就想到了，我圓括號也能夠寫成無關緊要，這樣正則不是看着更精簡了，像這樣：

var regexp = /^\(?0\d{2,3}\)?-?[1-9]\d{6,7}$/;

但這樣就形成了一個問題，你會發現同時有括號和拼接符，或者說有一半括號的格式都能匹配：

console.log(regexp.test('(0551-88888888')); //true
console.log(regexp.test('(0551)-88888888')); //true
console.log(regexp.test('0551)88888888')); //true

很明顯這不是咱們想要的狀況，這段正則就缺失了很重要的精準性。

咱們來看第二個例子，寫一個匹配浮點數的正則，要求能匹配以下幾種數據類型：

1.2三、+1.2三、-1.23
十、+十、-10
.二、+.二、-.2

咱們結合這三種數據來作個分析，首先關於正負符號很明顯是無關緊要，毋庸置疑能夠寫成 [+-]?；而後是整數部分，多是多位整數也可能沒有，因此是 (\d+)?；最後是小數點部分，由於可能不存在小數點，因此能夠寫成 (\.\d+)?，因此結合起來就是：

var regexp = /^[+-]?(\d+)?(\.\d+)?$/;

這個正則有個最大的弊端，由於三個條件後面都有?表示無關緊要，極端一點，三個都爲無，因此這個正則能夠匹配空白：

/^[+-]?(\d+)?(\.\d+)?$/.test("");//true

可能有同窗敏銳的發現了，.2，+.2這種狀況都是整數部分爲0的狀況，那能不能爲寫成這樣 /^[+-]?(0?|[1-9]+)(\.\d+)?$/ ，很明顯也不行，好比10，+10這種整數用到了0，因此沒法經過分支來控制0的顯示隱藏。

那怎麼作呢？仍是與匹配座機號碼同樣，咱們針對三種狀況分開寫正則，好比匹配 "1.23"、"+1.23"、"-1.23"，正則能夠這樣寫：

var regexp = /^[+-]?\d+\.\d+$/;

匹配 "10"、"+10"、"-10" 的正則能夠寫成：

var regexp = /^[+-]?\d+$/;

匹配 ".2"、"+.2"、"-.2" 正則能夠寫成：

var regexp = /^[+-]?\.\d+$/;

咱們提取三個正則的共用部分，很明顯就是 [+-]? 這一部分，其它部分採用分支表示，綜合起來就是這樣：

var regexp = /^[+-]?(\d+\.\d+|\d+|\.\d+)$/;

簡單測試，徹底沒問題：

regexp.test("+.2"); //true
regexp.test("-.2"); //true
regexp.test("10.2"); //true
regexp.test("+10.2"); //true

雖然這種分狀況寫，再抽出共用部分，將非共用分支表示的作法有點繁瑣，但對於正則新手來講確實是最爲穩妥保證精準性的作法。

 肆 ❀ 正則的效率

在確保正則的精準性以後，剩下的就是如何提高正則的效率性能了（固然對於我這樣的新手，能寫出來就不錯了...）。

如何提高正則性能，咱們通常從正則的運行階段下手，正則完整的運行分爲以下幾個階段：編譯 --- 設定起始位置 --- 嘗試匹配 --- 匹配失敗的話，從下一位開始繼續第 3 步 --- 最終結果：匹配成功或失敗。

咱們能夠經過下面這個例子模擬這個過程：

var regex = /\d+/g;
console.log(regex.lastIndex, regex.exec("123abc34def")); //0 ["123", index: 0, input: "123abc34def", groups: undefined]
console.log(regex.lastIndex, regex.exec("123abc34def")); //3 ["34", index: 6, input: "123abc34def", groups: undefined]
console.log(regex.lastIndex, regex.exec("123abc34def")); //8 null
console.log(regex.lastIndex, regex.exec("123abc34def")); //0 ["123", index: 0, input: "123abc34def", groups: undefined]

是的你沒看過，明明都是輸出相同的東西，每次輸出的內容竟然還不同。這是由於當使用 test 或者 exec 方法且正則尾部有 g 時，好比像上面執行屢次，下次執行時匹配的起始位置是從上次失敗的位置。說直白點，使用這兩個方法就像有記憶功能同樣，每次執行都是從上次結束的位置開始，好比咱們用match方法就不會有這個問題：

var regex = /\d+/g;
console.log(regex.lastIndex, "123abc34def".match(regex));//0 ["123", "34"]
console.log(regex.lastIndex, "123abc34def".match(regex));//0 ["123", "34"]
console.log(regex.lastIndex, "123abc34def".match(regex));//0 ["123", "34"]
console.log(regex.lastIndex, "123abc34def".match(regex));//0 ["123", "34"]

咱們就經過上面exec來分析正則執行階段。第一次執行匹配從字符串索引0開始，由於是全局匹配，因此一直匹配到了3，因此匹配結果爲123，匹配到a時由於不知足，因此失敗了。

第二次開始就是從上次失敗的地方開始，因此是從索引3開始，在經歷了abc三次失敗後，終於遇到了數字34，匹配成功，再往下走時是d，因此又失敗了。

第三次匹配開始的起點就是索引8，但由於def都是字母，所有不符合，匹配結果，最後返回了一個null，此時索引被重置爲0。

由於起始位置被重置，因此第四次匹配重複了第一次匹配的操做，又是一輪新的開始。

其實看上面exec的例子就反應出了一個問題，每次執行正則都有記錄最後匹配失敗的位置供下次匹配使用，回溯也是如此，正則會記錄多種可能中何嘗試過的狀態以便回溯使用，這是很是消耗內存的。咱們來綜合給出幾點優化建議：

1.儘可能使用具體的字符來替代通配符，減小回溯

好比咱們想匹配 123"abc"456 中的 "abc"，使用正則 /"[^"]*"/ 的性能要遠高於 /".*"/，使用/"\w{3}"/固然更好。

2.使用非捕獲型分組

在介紹分組時咱們已經說過，正則會記錄每一個分組的匹配結果。若是咱們的分組只是爲了單純起到匹配的做用，而不喜歡正則默認去幫咱們記錄分組的匹配結果，可使用非捕獲型分組。

'123abc456'.match(/(\w{3})/);
console.log(RegExp.$1);//134

//使用非捕獲型分組
'123abc456'.match(/(?:\w{3})/);
console.log(RegExp.$1);//爲空，未記錄

3.獨立出肯定字符

好比咱們有正則 /a+/ 能夠修改成 /aa*/，由於後者在匹配時能比前者多肯定一個字符，不論是失敗仍是成功，都能更快一部=步確認。

4.提取分支

咱們在介紹匹配座機號碼與浮點數已經有闡述這一點，將正則共用部分抽離出來，不一樣部分做爲分支，好比將 /this|that/ 修改成 /th(?:is|at)/，這樣能減小重複匹配。

5.減小分支數量，縮小匹配範圍

雖然推薦抽出共用後使用分支，但有些特殊分支狀況能簡寫複用的仍是推薦簡寫，好比 /red|read/ 能夠修改爲 /rea?d/。由於分支若是匹配失敗，切換到另外一條分支時也須要回溯。

 伍 ❀ 總

那麼到這裏，第六章節全部知識所有介紹完畢了。這一章節主要是站在能寫正則的基礎上，進一步優化正則寫法，提高正則匹配的精準性，以及正則運行的性能。共用部分正則，將不一樣進行分支算是我讀下來最大感觸的地方，對於優化而言仍是須要必定的實戰積累，不過先創建優化的觀念也不是壞事。那麼就說到這裏了，今天聖誕節，原本想早點睡覺，結果又寫到12點了....晚安，聖誕快樂，本文結束。