在 HTML input 輸入中，判斷數字、字串，是製作網頁必備技能，尤其前端，還得處裡各種顯示模式，比如價格、補0…等等，這時就是用到正規表達式(regex)的時候了。
什麼是正規表達式
正規表達式，英文 Regular Expression，又常簡稱為 RegExp, RegEx，有的簡稱為 RE (縮寫有時就是這麼樸實無華)，中文又稱【規則運算式】、【正規表示式】。
正規表達式，白話說，主要用在有規律的資料判斷，比如一組電話、身分證字號是否正確，常見的輸入是否全是數字等等，更多的運用會在資料數值的分析上，想看官方說明可以到 維基百科 – 正規表達式。
有曾經聽人說這叫「正則表達式」，網路上找也的確找的到資料，but 隨著時間推移，你會發現該說法變少了，可能是翻譯或教學單位一時口誤問題的影響(無從口考證)，所以想找相關範例，還是建議搜尋正規表達式。
正規表達式 RegExp 中的特殊符號
有意義的特殊符號很多，以下整理較為常用的特殊符號，並用簡短的白話解釋，希望新手能比較看得懂 :
| 特殊字元 | 說明 |
|---|---|
| \ | 一般作為跳脫字元，但 \b 與 \n 除外，\b 可以當作空白，\n 當作換行，例如 /\bis\b/，判斷 “It is” 是 true ，判斷 “It’s ” 是 false。 |
| ^ | 匹配開頭，要以某個條件為開頭 但擺放在中間，則是另一個否定的意思，如 [^A]代表開頭不為A。 |
| $ | 匹配結尾，要以某個條件為結尾 |
| [] | 一個判斷的集合，看你要判斷什麼 如[0-9]代表判斷是否有 0~9 如[AB]代表判斷是否有 A,B |
| \d | 代表著數字 [0~9] |
| \w | 代表著[A-Za-z0~9_] |
| {x,y} | 限制一個長度，{ 最小長度，最大長度 }，最大長度非必填，如 {2} 代表至少長度 2，不能負數。 |
| * | 匹配前一個字元 0 次到 n 次。 |
| + | 匹配前一個字元 1 次到 n 次，等同於 {1}。 |
| ? | 匹配前一個字元 0 ~ 1 次，等同 {0,1}。 |
如果想看完整的官方介紹版本，可以參照 維基百科 與 MDN，這兩個是個人看過，覺得寫得還算清楚的。
如何使用 JS 正規表達式 RegExp
說明
RegExp 的使用以 /為開始，/ 為結束，例如：
let regex = new RegExp(/你的正規表達式/);注意事項 – Regular Expression flags 修飾詞
這英文稱之為 Regular Expression flags，flags 中文翻譯為修飾詞，所以你也可以簡稱為 RegExp flags。
RegExp flags 的部分，就是你需要注意的，最平常的是以 / 做結尾，但很多時候你會看到 /g 或是 /i，這兩個意思大不同。
所以在此之前，你需要先知道各個結尾的表示，代表著不同的含意，千萬不要用錯了。
| RegExp Flags | 說明 |
|---|---|
| /g | 全域搜尋，你可以想成是全部字串。 |
| /i | 不分大小寫的搜尋 |
| /m | 多行搜尋 |
其他的還有像是 /u , /y，如果你想看詳細的官方說明，可以到 MDN 去觀看。
RegExp Flags g 範例
let s = " 123 abc ";
s1 = s.replace(/ /g, '');
console.log(s1)
// 執行結果 "123abc"RegExp Flags i 範例
let s = " 123 abc ";
s2 = s.replace(/ /i, '');
console.log(s2)
// 執行結果 "123 abc "教學
JS 的用法不多說，直接來看例子吧。
假如我們要判斷輸入的金額，不能超過1000元，可以這麼寫。
// 宣告判斷一個百位數字以內的值
let regex = new RegExp(/^\d{1,3}$/);然後我們分別輸入不同解數值來看看結果。
// 輸入 1000 以內數字
console.log(regex.test(999));
// 輸入 1000 數字
console.log(regex.test(1000));
// 輸入 1000 字串
console.log(regex.test('1000'));
// 輸入以內數字 + 字串
console.log(regex.test('dec999abc'));
// 輸入開頭、結尾都是數字的字串
console.log(regex.test('999abc123'));執行結果：
// 輸入 1000 以內的數字
true
// 輸入 1000 數字
false
// 輸入 1000 字串
false
// 輸入以內數字 + 字串
false
// 輸入開頭、結尾都是數字的字串
false教學 – 空值與錯誤輸入
我們再來輸入 JS 中常見的幾種空值與錯誤輸入時的狀態:
// 輸入 NULL
console.log(regex.test(null));
// 輸入 空字串
console.log(regex.test(''));
// 輸入 undefined
console.log(regex.test(undefined));
// 輸入 NaN
console.log(regex.test(NaN));執行結果：
// 輸入 NULL
false
// 輸入 空字串
false
// 輸入 undefined
false
// 輸入 NaN
false以上是簡單的範例，由此範例可以看出，只要你熟練地運用 RegExp ，在面對 JS 相關輸入時，不論其結果如何，都能有效判斷是否正確。
正規表達式 RegExp 常用表單驗證
電話驗證
// 台灣手機驗證
let regex = new RegExp(/^09[0-9]{8}$/)數字驗證
// 最少 6 位數字
let regex = new RegExp(/^[0-9]{6}$/)信用卡卡號驗證
// 4組 4位數字
let regex = new RegExp(/^\d-\d-\d-\d$/)帳號驗證
// 6 ~ 20 字中英文組成
// 開頭英文大寫
// 至少包含 1 個大小寫英文
// 至少包含 1 個數字
let regex = new RegExp(/^[A-Z]{1}(?=.*\d)(?=.*[a-zA-Z]).{6,20}$/)密碼驗證
// 6 ~ 16 字中英文組成
// 至少包含 1 個大寫英文 與 小寫英文
// 至少包含 1 個數字
let regex = new RegExp(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/)Email 驗證
let regex = new RegExp(/^[^@\s]+@[^@\s]+\.[^@\s]+$/)
1 則自動引用通知