iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
0
自我挑戰組

花三十天找到 JavaScript 沙漠中的綠洲系列 第 26

26 正則表達式

前言

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

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

語法

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

寫法規則如下:

  1. 將尋找/取代/驗證/擷取的標準,放在兩個正斜線 / 裡
    例如字串是 abc ,要取出 a 時:
console.log("abc".match(/a/)); 
  1. 要直接匹配時,寫在兩個正斜線中即可。但如果要匹配的是特殊字元,例如本來就代表特殊意義的字母,或 &%[ 這種,則必須要加上一個反斜線
    例如字串是 abc&svferq34[iuweh%f ,要取出 & 時:
console.log("abc&svferq34[iuweh%f".match(/\&/));  
  1. 在(雞婆的) JS 中,特殊意義字母會自動變成普通字(不管你有沒有打反斜線)。如果你的確是故意要打特殊意義字母,請打兩次反斜線
//上面第二題,如果這樣打也會顯示&
console.log("abc&svferq34[iuweh%f".match(/&/)); 
  1. 特殊意義字母如下:
\d : 匹配任意數字
\D : 匹配任意非數字字元
\w : 匹配所有文字字元
\W : 匹配所有非文字字元
\s : 匹配空白字元
\S : 匹配所有非空白字元
\b : 匹配字元邊界(空格或開頭/)
\B : 匹配字元邊界
  1. 一個字元只會匹配一次,若要多次匹配可運用以下符號
* : 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


上一篇
25 Ajax 、 JSON 與 axios (下)
下一篇
27 Token
系列文
花三十天找到 JavaScript 沙漠中的綠洲35
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言