60分鐘正則從入門到深刻

本文轉載自網絡。轉載編輯過程當中，可能有遺漏或錯誤，請以原文爲準。
原文做者：水墨寒湘
原文連接： https://juejin.im/post/582dfc...

正則表達式對於我來講一直像黑暗魔法同樣的存在。手機正則去網上搜，郵箱正則去網上搜，複雜點的看看文檔拼湊一下，再複雜只能厚着臉皮讓其餘同事給寫一個,歷來沒有系統的學習過。關於做者這幾句話，我是深有感觸，有幸暢遊網絡看到這篇博文和對應的慕課網視頻，讓我收穫頗多，在此轉載，但願給更多須要的朋友帶來幫助。

視頻

視頻地址

---

文檔

一. 學習目標：

• 瞭解正則表達式語法
• 在IDE中使用正則表達式
• 在javascript 中使用正則表達式處理字符串

二. 什麼是正則表達式

正則表達式，又稱正規表示式、正規表示法、正規表達式、規則表達式、常規表示法（英語：Regular Expression，在代碼中常簡寫爲regex、regexp或RE），計算機科學的一個概念。正則表達式使用單個字符串來描述、匹配一系列匹配某個句法規則的字符串。在不少文本編輯器裏，正則表達式一般被用來檢索、替換那些匹配某個模式的文本。

通俗的講就是按照某種規則去匹配符合條件的字符串

三. 利用圖形化工具理解正則表達式

輔助理解正則表達的在線工具 https://regexper.com/ 咱們利用這個工具輔助理解，正則表達式。語法沒懂表着急，後面會有，這裏只是學會用工具幫助咱們學習。

手機號正則

/^1[34578][0-9]{9}$/

tips:以1開頭，第二位爲3 4 5 7 9 其中一個，以9位（自己1次加劇復8次）0-9數字結尾

單詞邊界

/\bis\b/

tips: is先後都是單詞的邊界，比較晦澀難懂？感覺下二者的區別，b 會方道語法部分講解

URL分組替換

/http:(\/\/.+\.jpg)/

看不懂的不要慌語法部分後面會有介紹，這裏只是展現利用可視化的圖形幫助咱們理解正則表達式，能夠回來再看木有關係

正則表達式中括號用來分組，這個時候咱們能夠經過用$1來獲取 group#1的內容

說下這個正則的意義，若是網站用了https，網站引用靜態資源也必須是https，不然報錯。若是寫成 // 會自動識別 http 或者 https

日期匹配與分組替換

/^\d{4}[/-]d{1,2}[/-]\d{1,2}$/

這個正則比較複雜，畫符唸咒的地方太多了，一一分析：

• Start of line 是由^生效的表示以此開頭
• 對應結尾End of line 由$生效表示以此結尾
• 接着看digit 由 d 生效表示數字
• 3times 由{4} 生效表示重複4次，開始的時候有疑問，爲何不是 4times 。後來明白做者的用意，正則表達式是一個規則，用這個規則去從字符串開始匹配到結束（注意計算機讀字符串但是不會分行的，都是一個串，咱們看到的多行，人家會認爲是個 t ）這裏設計好像小火車的軌道一直開到末尾。digit 傳過一次，3times表示再來三次循環，共4次，後面的once同理。 本身被本身囉嗦到了。
• 接下來，是 one of 在手機正則裏面已經出現了。表示什麼都行。只要符合這兩個都讓經過。

好了這個正則解釋完了，接下來用它作什麼呢？

咱們能夠驗證日期的合法性
結合URL分組替換所用到的分組特性，咱們能夠輕鬆寫出日期格式化的方法
改造下這個正則

/^(\d{4})[/-](\d{1,2})[/-](\d{1,2})$/

輕鬆的能夠拿到 group#1 #2 #3 的內容，對應 $1 $2 $3

到如今已經能結合圖形化工具看懂正則表達式表達式了，若是想本身寫，還要在正則語法上下點功夫

四. JS中REGEXP對象

Javascript 經過內置對象RegExp支持正則表達式，有兩種方法實例化RegExp對象

字面量方法

const reg =/\bis\b/g

構造函數

const reg = new RegExp('\\bis\\b', 'g')

5、正則表達式語法

修飾符（三個 g 、i、m）

修飾符與其餘語法特殊，字面量方法聲名的時候放到//後，構造函數聲明的時候，做爲第二個參數傳入。整個正則表達式能夠理解爲正則表達式規則字符串+修飾符

• g：global 執行一個全局匹配
• i：ignore case執行一個不區分大小寫的匹配
• m: multiple lines多行匹配

修飾符能夠一塊兒用

const reg =/\bis\b/gim

來講說他們有什麼做用

有g和沒有g的區別

沒有g只替換了第一個，有g 全部的都換了

有i和沒有i的區別

有i忽略大小寫，沒有i嚴格區分大小寫

元字符

正則表達式由兩種基本字符組成：

• 原義字符
• 非打印字符
• 元字符 (* + ? $ ^ . | ( ) { } [ ])

原義字符

這個沒什麼好解釋的，咱們一直在舉例的 /is/ 匹配字符串'is'
將下一個字符標記爲一個特殊字符、或一個原義字符、或一個向後引用、或一個八進制轉義符。例如，n」匹配字符「n」。「n」匹配一個換行符。序列「\」匹配「」而「(」則匹配「(」。

非打印字符

非打印字符，以n爲例

其餘的在前端引用比較少，應該在後端處理文本文件的時候會用到

字符類 []

在前面的手機號正則例子?中，咱們已經使用過[] /^134578{9}$/
[34578]表示34578任意一個數字便可。在日期匹配與分組替換例子?中 /^d{4}[/-]d{2}[/-]d{2}$/ 表示符合 ／ - 均可以

字符類取反 [^]

表示不屬於此類

空格也不屬於，好多狗

範圍類[-]

正則表達式支持必定範圍規則好比 [a-z] [A-Z] [0-9] 能夠連寫[a-z0-9] 若是你只是想匹配-在 範圍類最後加-便可。請看實例。

預約義類

經常使用爲了方便書寫

有了這些預約義類，寫一些正則就很方便了，好比咱們但願匹配一個 ab+數字+任意字符 的字符串，就能夠這樣寫了 /abd./

邊界

邊界顧名思義即定義匹配的邊界條件，上面基本都在前面的例子碰到了，這裏演示下b與B 的區別

量詞

若是沒有量詞，要匹配4位數字這樣寫就能夠/dddd/, 若是匹配50位100位呢？那不是要瘋掉了？
有了量詞，就能夠這樣寫/d{100}/, 量詞的使用咱們在手機號中使用過，表如今可視化中就是循環多少次。
湊一個上面都包含的實例/d?@d*@d+@d{10}@d{10,20}@d{10,}@d{0,10}/

貪婪與懶惰（非貪婪）

正則表達式默認會匹配貪婪模式，什麼是貪婪模式呢？如其名儘量多的匹配。咱們看個例子

/\d{3,6}/

貪婪模式下，匹配的了最多的狀況。
與貪婪對應就是懶惰模式，懶惰對應的就是匹配的儘量少的狀況。如何開啓懶惰模式？ 在量詞後面加?。繼續上面的例子

/\d{3,6}?/

若是想知道，正則表達式是如何匹配量詞的，請看進階正則表達式文中有介紹，正則是如何回溯的。

分組與反向引用

分組，又稱爲子表達式。把正則表達式拆分紅小表達式。概念枯燥，說個例子爲嘛用分組：

不分組

/abc{2}/

量詞僅做用到最後的c

分組

/(abc){2}/

注意這裏 group #1
分組雖然和運算符() 很像，可是分組在正則表達式中，注意理解組的含義。常常有人濫用分組
/^(http|https)/ 真的須要這樣麼？其實 /^https?/就能夠了，你正則寫的特別長的時候，會出現一堆沒用的結果，看着都頭疼吧。
分組每每和反向引用一塊兒使用，別被概念嚇到：當一個正則表達式被分組後，每一個分組自動被賦予一個組號，一左到右分別是 $1 $2…
再把以前的例子拿出來

/^(\d{4})[/-](\d{2})[/-](\d{2})$/

輕鬆的能夠拿到 group#1 #2 #3 的內容，對應 $1 $2 $3

若是在反向引用中不想捕獲年該如何操做? 加上 ?:便可

/^(?:\d{4})[/-](\d{2})[/-](\d{2})$/

前瞻

這部分爲進階部分—選看

正則表達式中有前瞻（Lookahead）和後顧（Lookbehind）的概念，這兩個術語很是形象的描述了正則引擎的匹配行爲。須要注意一點，正則表達式中的前和後和咱們通常理解的先後有點不一樣。一段文本，咱們通常習慣把文本開頭的方向稱做「前面」，文本末尾方向稱爲「後面」。可是對於正則表達式引擎來講，由於它是從文本頭部向尾部開始解析的（能夠經過正則選項控制解析方向），所以對於文本尾部方向，稱爲「前」，由於這個時候，正則引擎還沒走到那塊，而對文本頭部方向，則稱爲「後」，由於正則引擎已經走過了那一塊地方。

注意：後顧性能損耗比較大，js只支持前瞻（知乎上看到的，具體緣由不詳）

上面的比較概念話，嘗試用大白話講講，就說皇上選妃吧，先行條件得是美女吧，長得「如花」那樣皇上可不要，漂亮這關過了，皇上想要這個美女也不行，皇室有規矩，必須是貴族血統。

那麼「漂亮」就是正常的匹配，匹配到了，還得看看家室是否是貴族。"貴族"至關於前瞻條件

前瞻分兩種一種是正向前瞻(?=xxx), 另外一種是負向前瞻(?!xxx)

是否是很簡單？那咱們來玩個好玩的。
題目：如何將'123456'轉成貨幣帶逗號的。'123,456'。這個是很常規格式化金額的需求。

若是在沒有學習正則以前，個人思路是：

• 字符串轉數組
• 反轉數組
• 每隔三個添加個逗號
• 添加完了反轉數組
• 數組轉字符串

好累～～～
今天學習了正則，能夠一步到位 '123456789'.replace(/(d)(?=(?:d{3})+$)/g, '$1,')

若是你以爲此文對你有必定的幫助，能夠點擊下方的【贊】收藏備用