正則表達式之初入江湖

爲何要學正則表達式

不少人對正則表達式的認知只是在進行表單驗證的時候在網上搜一段正則表達式進行copy，實際工做上好像很難遇到大段的正則表達式

我第一次看到大量的正則使用是在jQuery源碼中，當時看的頭疼只好草草的看下大概思路不了了之，可是到今天我依然不認爲這種作法是錯誤的，jQuery早期爲了兼容性代碼不少地方太髒，不如在網上搜搜源碼架構。拿jQuery舉例子只想說明你總會在一些陰暗的角落遇到正則表達式，爲了到時候不至於一頭霧水，咱們最好簡單的瞭解一下正則表達式的使用。

看完本文你不會稱爲正則專家，實際你也不須要精通正則，能看懂別人寫的正則和能寫一些簡單的正則便可

以前在網上搜過一些文章，感受寫的都不太好把個人耐心都磨沒了因此我決定寫一篇符合「人」學習直覺的文章

建立正則表達式

在JavaScript中與大多數其餘對象類型同樣，有兩種方法能夠建立正則表達式好比咱們要匹配一個"test"字符串

• 經過正則表達式字面量

var pattern = /test/;

• 經過構造RegExp實例

var pattern = new RegExp("test");

前者直接在//中寫匹配規則就Ok了，後者須要調用RegExt構造方法，並把匹配規則用""包起來，很明顯第一種更加清晰，反正我每次都記不住"RegExp"，每次用都要現查，因此咱們接下來用第一種就行了（RegExp有它的好處可是目前不須要知道）

如今你必定想知道/test/表達的是什麼意思？

這種一個接一個的字符，隱式的表達了"followed by"這樣一個操做也就是一個挨着一個

1. 't'後面跟着'e'
2. 'e'後面跟着's'
3. 's'後面跟着't'

正則表達式的威力僅此而已嗎？若是隻是這樣就太讓人失望了，由於徹底可使用indexOf進行判斷

接下來咱們額外學習三個英文字母，在正則中他們有各自的含義

• i 讓正則表達式不分大小寫 /test/i 表示不只能夠匹配'test'還能夠匹配'TeSt'
• g 全局匹配 默認狀況正則只匹配第一次出現的結果好比'testkdgyitest' 找到第一個'test'就算完成工做了，而g能夠找到全部符合條件的匹配值
• m 容許匹配多個行好比匹配textarea中的值

請記住這些字母跟在//後面 如/test/i

接下來讓咱們作個小練習，有以下字符串，將字符串中的test(不區分大小學)替換成「啊哈正則」 提示：js替換字符串經常使用replace方法而且replace第一個參數接收正則表達式

var str =  "sjufhsufhTesT";//將test（不論大小寫）替換成「啊哈正則」

答案：

var str =  "sjufhsufhTesT";
var pattern = /test/i;
var newStr = str.replace(pattern, "啊哈正則");

前面說了默認狀況正則只匹配第一次出現的結果，咱們來測試一下

var str =  "testsjufhsufhTesT";
var pattern = /test/i;
var newStr = str.replace(pattern, "啊哈正則");// 結果以下"啊哈正則sjufhsufhTesT"

咱們加上g試試

var str =  "testsjufhsufhTesT";
var pattern = /test/ig;
var newStr = str.replace(pattern, "啊哈正則");// 結果以下"啊哈正則sjufhsufh啊哈正則"

匹配一類字符

有時候咱們想更靈活一些，不想只匹配某個特定的字符串，而是想匹配集合中的某一個字符，好比咱們只想匹配「a」 「b」 「c」中任何一個字符 咱們能夠這麼寫[abc]

[]中能夠指定一個集合好比[abc]，那麼若是想指定一個從a到z的集合，難道咱們把26個英文字母一個一個寫一遍嗎？固然不須要！咱們能夠在[]中指定範圍[a-z]

沒懂？看下面的例子就行了

var str1 = "ak恩ebc";
var pattern1 = /[abc]/;
var newStr1 = str1.replace(pattern1,"雅兒");
console.log(newStr1);//雅兒k恩ebc
咱們看到咱們想要abc之中的任何一個字符，即便中間隔着其餘字符也不要緊，可是默認狀況是若是找到了a就中止往下繼續匹配b和c了，若是沒匹配到a，那麼將匹配b，以此類推

若是想所有匹配請加上在//後加上"g"

如今有個新需求，匹配除abc以外的字符，咱們怎麼辦呢？能夠在集合中插入一個"^" ¹

"^" 表示除...以外

var str2 = "ak恩ebc";
var pattern2 = /[^abc]/g;
var newStr2 = str2.replace(pattern2,"雅兒")
console.log(newStr2);//a雅兒雅兒雅兒bc

各位看客看到這裏想必也累了，餘下的內容之後再說。先把此次的內容複習一下

• 正則表達式的兩種建立方式
• i g m 三個字母表明的特殊含義 i表示不區分大小寫 g表示全局匹配 m表示容許匹配多個行 （別忘了寫在//後 如/test/i）
• 能夠用[]匹配集合中的某個字符串
• 能夠^實現反選，表示除...以外

最後推薦一個正則可視化工具，能夠在上面練習正則，經過可視化的方式更輕鬆的理解

https://regex101.com/

---

1. abc ↩