摘要：正則表達式使用單個字符串來描述匹配一系列匹配某個句法規則的字符串。接下來，是在手機正則里面已經出現了。序列匹配而則匹配。分組與反向引用分組，又稱為子表達式。把正則表達式拆分成小表達式。

本文轉載自網絡。轉載編輯過程中，可能有遺漏或錯誤，請以原文為準。
原文作者：水墨寒湘
原文鏈接：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數字結尾

/is/

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

/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

到現在已經能結合圖形化工具看懂正則表達式表達式了，如果想自己寫，還要在正則語法上下點功夫

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

const reg =/is/g

const reg = new RegExp("is", "g")

修飾符與其他語法特殊，字面量方法聲名的時候放到//后，構造函數聲明的時候，作為第二個參數傳入。整個正則表達式可以理解為正則表達式規則字符串+修飾符

g：global 執行一個全局匹配

i：ignore case執行一個不區分大小寫的匹配

m: multiple lines多行匹配

修飾符可以一起用

const reg =/is/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位數字這樣寫就可以/ffffdd/, 如果匹配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,")

如果你覺得此文對你有一定的幫助，可以點擊下方的【贊】收藏備用