RegExp 正規表達式 - JS 學習筆記

RegExp 為 Regular Expresssion 的縮寫，中文翻譯成「正規表達式」，又或是「正規表示法」、「正則表達式」等等。用來表達符合某個句法規則的字串。

例如你想在一份客戶的資料中，搜尋所有台灣手機號碼，你會怎麼做呢？

首先你知道手機號碼必定是數字，而且是「09」開頭的，總長度又是 10。
這時，正規表達式就派上用場了，你可以將剛剛描述台灣手機號碼的幾個規則用正規表達寫出來，用簡單一行程式碼就過濾出一篇文章中所有符合這個規則的手機號碼！

具體要怎麼做呢？

用正規表達式找出台灣手機號碼

先列出我們剛剛總結出的台灣手機號碼規則，其實就簡單兩個規則

1. 10 位數字
2. 09 開頭

要如何用正規表達式來表達數字呢？我們可以使用 \d 表示 1 個數字（d 為 digit）。那麼表達 10 個數字呢？最簡單的辦法，重複 10 遍就可以了： \d\d\d\d\d\d\d\d\d\d。

接下來，要如何表達 09 開頭個規則？其實只要將 \d 替換成我們想要符合的字元即可，符合手機號碼的正規表達式就完成了：09\d\d\d\d\d\d\d\d。

JavaScript 常用的 RegExp 函式

在 JavaScript 中，要表達一個正規表達式可以用兩道斜線 /RegExp/ 來表示，斜線中的內容就是你要寫入的規則。我們可以套用剛剛寫好的台灣手機號碼 RegExp 來過濾出想要的結果。

例如，有一份客戶文件，其字串如下：

const doc = `
First Name: John
Last Name: Doe
Cellphone: 0912345678
Address: 1F., No. 1, X Road, Y City
`;

字串 search()

我們可以用 JavaScript 字串的 search 函式，找到這個字串內的台灣手機號碼。

doc.search(/09\d\d\d\d\d\d\d\d/); // search(RegExp)

顯示的結果為 44。這代表的意思是此字串有出現符合的結果，且第一個結果出現的位置在字串的第 44 個字元處。若沒有出現的話，search() 這個函式會回傳 -1。

有了這個數字，我們就能可以用其它 JavaScript 的字串函式去取得這個手機號碼了，如

doc.substr(44, 10); // substr(from, ?length)

用 substr() 這個函式取得從第 44 個字元開始，長度為 10 的子字串，得到輸出為 0912345678。

但是你可能會發現，這樣的做法有點麻煩，不但要先找出手機號碼出現的位置，再用其它函式撈出來，還只能找出現的第一個！確實，search() 比較常用在確認「有沒有出現」這件事，如果要一次找出所有符合的結果，我們就需要更方便的函式了。

字串 match()

而使用 match() 就是更方便的函式。看一個有多個電話號碼的例子

const doc2 = `
First Name: John
Cellphone: 0912345678

First Name: Jane
Cellphone: 0987654321

First Name: Bob
Cellphone: 0911111111
`;

要找出上述自串中所有的台灣手機號碼，則可以用

doc2.match(/09\d\d\d\d\d\d\d\d/g); // match(RegExp)

輸出的結果為 ["0912345678", "0987654321", "0911111111"]，所有的手機號碼都被找到了！
你可能會注意到這次寫的正規表達法後面多了一個 g 這個字母，這是在進階搜尋（參考#2）時會加的 flag，像是 g 就是全域搜尋、i 是 case-insensitive 的意思等等。

字串 test()

（未完待續）

參考資料

1. regex101 可線上測試正規表示法的工具網站
2. MDN - Advanced searching with flags RegExp 的進階搜尋 flag 列表