正則很煩，但有了正則，有時能把複雜的東西變得簡單。因爲正則本身就很複雜，負負得正。
有的正則雖然功能強大，但是非常長，摻雜着很多規則，讓人一看就噁心。反正我也是非常怕正則的。
正則需要花費大量的時間去學習規則，研究規則，所以有時很怕去接觸它，但是總要學會勇敢面對。
這東西又不是一天學完，就永生記得的，就算忘了然後看我做的筆記，也讓人很煩。
所以，我今天必須寫得簡單明白，也好讓自己以後容易撿起來。
鑑於內容真的實在太多，所以第一部寫些基礎用法，第二部寫些高級用法
TIP
Vue 在處理組件模板上，就使用了非常多而且複雜的正則，匹配指令，匹配子組件 等等，簡直無往不利，正則重要性可見一斑。
正則 是 對字符串的一種過濾邏輯，主要作用對象是字符串
正則的作用
1、匹配字符串位置
2、獲取特定的字符串
我打算從下面幾部分去總結正則
1、正則的基本語法
2、正則的 flags，也就是標誌位
3、正則涉及的方法和屬性
4、重複量詞
5、分組，捕獲
6、引用、反向引用
7、正向前瞻、反向前瞻
8、貪婪匹配、惰性匹配
內容很多，也很不容易理解，需要親身實踐，體會其中規則的用處。
分組捕獲、引用反向引用，正向反向前瞻，貪婪惰性匹配 會放到 下篇文章說明，這幾塊內容 比較重要 和 複雜，是使用正則必須掌握的高級內容
基本語法，就是我們經常會在正則中使用到的規則，說明的列表如下
| [xyz] | 匹配 括號內的 任意一個字符， |
| [^xyz] | 相反，不要其中的字符 |
| \s | 匹配任意空白字符 |
| \S | 不要空白字符 |
| \d | 匹配數字 |
| \D | 不要數字 |
| \w | 匹配 字母，數字，下劃線 |
| \W | 不要 字母，數字，下劃線 |
| \b | 匹配單詞邊界 |
| \B | 不要單詞邊界，匹配其他邊界 |
| ^ | 匹配起始位置 |
| $ | 匹配結束位置 |
| . | 匹配任意字符 |
根據解釋來看，是挺好理解的，直到我在項目中使用了，現在特別講一下疑惑過我的地方
1
\b 匹配單詞邊界
單詞邊界到底是什麼東西？
舉栗子
既然說匹配邊界，使用 \b 匹配 " 222 name" 得到的邊界是什麼東西？如圖
可以看到，圖中粉色的虛線，就是匹配的邊界。把111 和 word 當做一個單詞，那麼單詞的邊界，就是單詞的兩邊啦！默認是 連續數字 和 連續字母 當做一個單詞
“ 連續數字，連續字母，如果連續的詞中間加個標點符號呢？"
試試在 word 中間加一個 +
額，還是一樣，把 wo 和 rd 當成了一個單詞，所以匹配出 四條邊界
嘗試下把邊界 替換 成其他東西
2
\B 匹配非單詞邊界
這個說的是匹配非單詞邊界
同樣的例子測試
得到的邊界，是除了 單詞兩邊之外的所有的邊界。
按我的理解
每個字符都有兩邊，這兩邊就是字符的邊界
匹配結果 = 所有字符的邊界 - 所有單詞的邊界
嘗試下把邊界替換成其他東西
3
\s 匹配空白符
匹配任意空白字符，這個空白字符，可 不止是空格 而已，還包括下面這些
| \r | 回車符 |
| \t | 製表符 |
| \n | 換行符 |
| \f | 換頁符 |
這些 一開始我也不知道的，以爲只匹配 空格而已，真是無奈
來，我們使用 \s 嘗試匹配上面的的空白符，發現都可以被匹配到，好的，沒有被騙
4
. 不匹配 換行符
. 可以匹配任意字符，卻不包括 換行符，現場試驗
一個含有 換行符 的字符串打印如下
開始匹配，發現 \n 沒有被替換，坐實了坐實了
正則有三個標誌位
1、ignoreCase，簡寫爲 i
2、muitiline，簡寫爲 m
3、global，簡寫爲 g
1
ignoreCase
正則加上 i，那麼就 不區分大小寫
對比 有 i 和 沒 i 的區別
2
global
正則加上 g，就會 全局匹配
對比 有 g 和 沒 g 的區別
3
multiline
正則加上 m，就會 多行匹配
而往往多行匹配也要加上 g 纔行
A：" 那我直接用 g 不就好了？還能 m 幹嘛？"
B：" 恩，如果你想匹配多行的開頭時，就有用了 "
對比 有 m 和 沒 m 的區別
哈哈
用 g 不用 m，你一樣匹配不到其他行的開頭， gm 缺一不可
正則可以調用哪些方法 和屬性？
1、方法：test 、exec
2、屬性：source、ignoreCase、multiline、global
1
方法 test
驗證字符串是否可以匹配正則
返回 布爾值，常用於表單驗證
2
方法 exec
找出字符串中的 匹配項
返回一個數組，數組 包含 第一個匹配項，index（匹配項在字符串中的位置），input（匹配的字符串）
exec 需要記住兩個點
1、常用於正則捕獲時
捕獲就是把特定的字符串抓出來，在後面會詳細說
2、不管是否設置 全局搜索 g，都只會返回 一個匹配項
a. 沒有設置全局匹配 g
不管你調用多少次，都只會返回 第一個 匹配項
var str="abc"
var reg1=/\w/reg1.exec(str)
reg1.exec(str)
reg1.exec(str)
b. 設置了全局匹配 g
var str="abc"
var reg1=/\w/greg1.exec(str)
reg1.exec(str)
reg1.exec(str)
看到了把，如果設置了 全局搜索 g，那麼 exec 會在字符串上 繼續 去匹配
到底是什麼魔力？歡迎來到本期探索未知的世界
答案是 對象的屬性 - lastIndex！
如果我每次調用 exec 都重置一次 lastIndex 的話
var str="abc"
var reg1=/\w/g
reg1.exec(str)
reg1.lastIndex = 0
reg1.exec(str)
reg1.lastIndex = 0
reg1.exec(str)結局和 沒有放 g 是一樣的結果，事實證明了是 lastIndex 在作祟，保存了上一次匹配的位置，然後下次匹配時，從上一次位置開始，而不是從頭開始了
所以說，哪有從頭開始的愛情，不過是 從上一個傷疤 繼續。
3
屬性 source
返回 正則 的 字符串形式
4
屬性 ignoreCase
返回 當前正則是否設置 忽略大小寫
5
屬性 multiline
返回 當前正則是否設置 多行匹配
6
屬性 global
返回 當前正則 是否設置 全局匹配
字符串在哪些方法中可以使用正則 ？
match，replace，split，search
1
match
這個方法很奇怪，返回的東西跟正則是否設置全局有關
a. 沒有設置了全局
var str="abc"
var reg1=/\w/
console.log(str.match(reg1))返回的內容和 正則 的 exec 方法一毛一樣
b. 設置全局
返回一個數組，裏面存放所有匹配項
這樣是不是感覺挺爽的哦，把所有匹配項都放在一個數組，就像是....
把石榴全都剝出來放在一個碗裏的感覺一樣
但是這個方法，想使用分組，以爲可以把所有 括號匹配項 放進去的時候，哎，人算不如天算啊......
2
replace
正則替換，感覺沒什麼好說的....
說明一下，replace 不會改變原來字符串，而是返回替換後的字符串
3
split
把不是匹配項的放在一個數組裏面
有人說，那我這麼做效果是一樣的啊，爲毛還要用正則？
正則當然是爲了處理複雜的情況，比如你的字符串中有很多個 空格，你說要怎麼匹配
正則這時候不就起作用了嗎？現在就算你有幾百個 空格 ，都一樣正常匹配，這就是正則的作用場景。
感覺像是容錯匹配一樣
4
search
返回匹配項 在 字符串中的 起始位置，如果找不到就返回-1
恩 ，bc的起始位置 在 字符串中的 第一個位置（從 第0 個位置開始的）
上面這些方法，都可以使用 字符串 代替 正則 去 進行 replace，split，但是 使用字符串，匹配的情況太少，而使用正則，可以適用很多種情況，完成更加複雜的功能。
| * | 0 次或更多次 |
| ？ | 1次 或者 沒有 |
| + | 一次 或者更多 |
| {n} | 重複 n 次 |
| {n,} | 重複 n 次以上 |
| {n,m} | 重複 n次 到 m 次之間 |
量詞挺簡單的一個東西，理解起來好像沒什麼問題，無非就是匹配多少次的問題
我現在學一樣東西，不求自己馬上掌握，也不要求自己總是複習，因爲沒有太多的時間和耐心。
所以我現在，必須把那些容易忘而且難的東西，給簡單化地寫成一篇文章，這樣，就算忘記了，瞅一眼就能撿回來
節省自己的時間的時候，也希望能夠幫助到需要的人，大家一起進步。
未完待續........
關注我可以說是相當優秀了
本文分享自微信公衆號 - 神仙朱（skying-zhu）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。