前言

不知道你是否想過，註冊帳號時系統是如何判斷你有沒有亂輸不符規則的符號，並跳出提醒呢？今天就要聊一聊驗證密碼的好朋友：正則表達式。

欸欸欸先別急著吐槽我，說什麼之前不是說最後關卡是 ajax ，怎麼突然又跑來講一些有的沒的。其實是因為我想要運用正則表達式，來幫我們分析用 axios 或 Ajax 抓到的資料啦！

語法

正則表達式又稱 Regex (Regular Expression) ，可以用來尋找或取代匹配字串，驗證使用者輸入欄位，或擷取某段想要的資訊。例如找字串裡是否有一個數字，或一個大寫字母等等。

寫法規則如下：

1. 將尋找/取代/驗證/擷取的標準，放在兩個正斜線 / 裡
   例如字串是 abc ，要取出 a 時：

console.log("abc".match(/a/)); 

2. 要直接匹配時，寫在兩個正斜線中即可。但如果要匹配的是特殊字元，例如本來就代表特殊意義的字母，或 &%[ 這種，則必須要加上一個反斜線
   例如字串是 abc&svferq34[iuweh%f ，要取出 & 時：

console.log("abc&svferq34[iuweh%f".match(/\&/));  

3. 在(雞婆的) JS 中，特殊意義字母會自動變成普通字(不管你有沒有打反斜線)。如果你的確是故意要打特殊意義字母，請打兩次反斜線

//上面第二題，如果這樣打也會顯示&
console.log("abc&svferq34[iuweh%f".match(/&/)); 

4. 特殊意義字母如下：

\d ： 匹配任意數字
\D ： 匹配任意非數字字元
\w ： 匹配所有文字字元
\W ： 匹配所有非文字字元
\s ： 匹配空白字元
\S ： 匹配所有非空白字元
\b ： 匹配字元邊界(空格或開頭/)
\B ： 匹配字元邊界

5. 一個字元只會匹配一次，若要多次匹配可運用以下符號

* ： 0 或更多次
+ ： 1 或更多次
? ： 0 或 1 次
{m} ： m 次
{n,} ： 至少 n 次
{m,n} ： 從 m 次到 n 次
{m,n}? ： 從 m 次到 n 次，選匹配次數最少次的

應用

事不宜遲就趕緊來練習吧！假如我今天手上有一筆 API ，然後我想要用圓餅圖來分析，姓名長度在 6 個(含)字元數以下的參賽者和 6 個字元以上的參賽者比例，要怎麼寫哩？

會用到 c3.js 和 d3.js，別忘了載入：

https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.css
https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.min.js

• html

<div id="pie"></div>

• js

var url = "https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json";
var under6Num = 0;  // 宣告姓名在6個(含)字元數以下的參賽者一開始的數字為0
var moreThan7Num = 0; // 宣告姓名在7個(含)字元數以上參賽者一開始的數字為0

axios.get(url)
 	.then( function(res){
    data = res.data;
    data.forEach(function(item,index){
      var name = item.name.replace(/[\s|\~|`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]/g,""); 
      /* 上面這行同時運用了正則表達式和replace()兩種觀念
      用白話文解釋是：如果item.name裡有空白(\s)或其他符號如~`!@#$%^&*()等...就用空值取代
      正則的介紹可在這裡看：https://medium.com/@moojing/javascript-%E5%88%9D%E6%8E%A2regex-%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F-1da2f4d94795 */
      var name_length = name.replace(/[^\x00-\xff]/g,"**").length; //計算姓名長度
      if (name_length <=6){
        under6Num++;
      }else{
        moreThan7Num++;
      }
    })
    chart()
  }) 

function chart() {
	var chart = c3.generate({ //c3.js 起手式
		bindto: '#pie', // 要放的位置的 id 名
		data: {
			columns: [
        ["姓名在6個(含)字元數以下的參賽者",under6Num], //圖表參數
				["姓名在7個(含)字元數以上參賽者",moreThan7Num] //圖表參數
			],
			//自訂圖表類型
			type: 'pie' //圖表種類是 pie
		}
	});
}

聰明的你也可以用正則表達式為昨天的註冊登入面板，加上一些判斷規則，例如密碼不能有空白、帳號是否為 email 格式等等喔！

學習與參考資料

JS 學徒特訓班教學影片及練習題 34 關
正規表達式： https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions
[Javascript] 初探Regex 正規表達式： https://medium.com/@moojing/javascript-%E5%88%9D%E6%8E%A2regex-%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F-1da2f4d94795