[JavaScript] 來寫正規表達式 Regex
Outline:
- 正規表達式是什麼?
- JS 怎麼寫?
- 規則有什麼?
- 什麼時候會用到?正規表達式是什麼？
作為一位前端要做表單驗證是常有的事，正規表達式 Regular Expression，又簡稱為 Regex 或 RegExp，是一種以數學邏輯來幫你做判斷，用得熟悉自己就可以少寫很多判斷的利器。
JS 怎麼寫？
在定義正規表達式上，可以用兩個 / 夾住條件：(效能較佳)
const rules = /[a-z]/也可以新增一個 RegExp 物件：
var rules = new RegExp('[0-9]')有一個 test() method 可以拿來測試用：
var str = 'emma';
// 驗證字串為 a~z 的字母
const rules = /[a-z]/;
console.log(rules.test(str));// true
也可以把條件直接拿去 test()：
console.log(/\d/.test(str));
// false規則有什麼？
其實理解使用的原理，可以在需要的時候再來查表拼湊就可以了，完整的規則可以看 MDN官方文件，這邊列舉幾個比較常用的：
小撇步：大小寫的英文單字都是相對的意思
驗證字元：
/./：任意字元。符合範例：「emma@」
/a/：字串含 a。符合範例： 「aa」、「dfas」
/a./：字串含 a，以及其後面任一字元。不符合範例：「fa」
特定字元：
[A-Z]：大寫英文字母
[a-z]：小寫英文字母
[0–9]：數字 0–9
\d：數字
\D：非數字
\w：數字字母與底線，等同 [A-Za-z0–9_]
\W：非數字字母與底線，等同 [^A-Za-z0–9_]
\s：空白字元
\S：非空白字元
開頭結尾：
^：比對內容的開始位置
$：比對內容的結束位置/^em/：開頭是 em/ma$/：結尾是 ma/^emma$/：是否有 emma/^em|ma$/：開頭是 em，結尾是 ma
多個字元：
[]：驗證括弧內的每一個字元
[^]：反過來/[abc]/：包含 a 或 b 或 c/[^abc]/：不包含 a 或 b 或 c
次數：
*：0次以上
+：1次以上
?：0次或1次
{m}：m次
{n,}：最少n次
{m,n}：m次到n次
{m,n}?：m次到n次之間最少次的注意：條件上時常要記得在開頭加上 ^，結尾加上 $，否則會在開頭達成條件之後就當作達成條件了，沒有驗證完整的字串
/^a{1,3}$/：a 出現了 1~3 次/emm+/ ：emm 後面出現一個以上的 a。如：「emma」、「asdfemmasdf」
什麼時候會用到？
這邊再嘗試看看幾種常會用到的情境：
Apple 密碼格式：
1. 至少 8 個字元
2. 要有大小寫字母
3. 至少一個數字寫出來會是這樣：
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/嗄，好複雜，一個一個來看：
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/一個括弧是一個 group，?= 的意思是後面加誰，x(?=y) 的意思是有 x 且後面接 y ，.* 則是任何字元出現 0 次以上的，[a-z] 則是小寫英文。
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/[A-Z] 大寫英文，\d 數字
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/大小寫英文字，數字，符合至少 8 次
所以整段話我理解為，?= 沒有設定在誰後面，但是一定要接符合條件的字元，可以當作一定要有的意思，最後的 [a-zA-Z\d]{8,} 則再個別驗證符合三個 group 條件後，每一個字元符合條件及次數。
或是這也是一種常見的密碼規定：
至少8碼，要有大寫英文、小寫英文、數字，和特殊符號跟剛剛有一點點不太一樣：
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/不一樣的地方是：
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/一樣道理，@$!%*?& 就是要包含這些特殊符號的意思。
Email：
/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/手機號碼：
/^09\d{8}$/身分證字號：
/^[A-Z]{1}[1-2]{1}[0-9]{8}$/這邊推薦一個可以自己動手玩的網站：regex101
有很多可以線上測試自己的條件的地方，這個網站可以把你寫的條件規則寫出來，如果是在別的地方找到的條件，可以拿來這邊試著解讀
內容若有任何錯誤，歡迎留言交流指教！ 🐬ref:
[實用] 用 Regular Expression 做字串比對
[Javascript] 初探Regex 正規表達式
正規表示式 Regular Expression
動動手來學 Regular Expression 正規表達式
