有看沒有懂的正規表達式

發表於 更新於 分類於
今天要來探討的就是處理驗證的時候必備的正規表達式，落落長的一大段就像亂碼一樣讓人有看沒有懂，一直以來都是直接copy&paste，但有時候需要微調規則的時候就愣在那邊了，逃避了許久，今天終於要來面對這一長串的像是亂碼的東西，究竟，我到底該怎麼看懂它？

今天要來探討的就是處理驗證的時候必備的正規表達式，落落長的一大段就像亂碼一樣讓人有看沒有懂，一直以來都是直接 copy&paste，但有時候需要微調規則的時候就愣在那邊了，逃避了許久，今天終於要來面對這一長串的像是亂碼的東西，究竟，我到底該怎麼看懂它？

首先，先花點時間整理一下正規表達式(Regular Expression)的規則

exec
以陣列的方式回傳符合條件的結果，如果不符合則回傳 null

1
2
3
4
5
6
let reg = /^a\\d{2,5}k$/;
reg.exec("a456k");
//["a456k", index: 0, input: "a456k", groups: undefined]

reg.exec("c33k");
//null

test

是回傳字串內”是否”含有正規表達式指定的字元，回傳結果為 true or false。

1
2
3
4
let pattern = new RegExp("[0–9]{4}-[0–9]{2}-[0–9]{2}");

let birthday = "1992–10–22";
let result = pattern.test(birthday); //true

match

會根據正規表達式回傳符合字串的陣列。

1
2
3
4
5
6
7
"995A 996B 881C".match(/99\\w/);
// ["995", index: 0, input: "995A 996B 881C", groups: undefined]
僅回傳找到的第一個字串陣列(不過我沒預期後面會帶出那一大串…)

"995A 996B 881C".match(/99\\w/g);
// \["995A","996B"\]
回傳所有符合條件的字串陣列

replace

也可以搭配正則表達式來取代想要取代的字串

1
2
3
4
5
6
"supergogo".replace(/go/g, "GO");
// "superGOgo"
僅會取代找到的第一個字串;

"supergogo".replace(/go/g, "GO");
// "superGOGO"

所有符合的目標字串均會取代

另外，再舉幾個生活中可能會用到的驗證規則

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 信箱 xxx@yyy.zzz
/^\\w+@\\w+\\.\\w+/

// 身分證字號 A123456789
/^\[A-Z\]\\d{9}$/

// 手機號碼 0987987987
/09\\d{8}$/

// 西元生日格式 1993–10–10
/^\\d{4}-\\d{2}-\\d{2}$/

// 16 進位的色碼 #ffaa00
/#(\[0–9a-fA-F\]{6}|\[0–9a-fA-F\]{3})/g;

另外附上一個連結，我覺得在練習的時候很有幫助。

https://regex101.com/