前言

作為一個正在學習前端的小白，感覺學到面向物件編程略微的有點吃力，好記性不如爛筆頭，記錄下來準是沒錯的，多寫幾篇博客好好記錄我的學習！這一篇主要是從正則運算式總結一下，

概念及作用

• 概念：用于匹配字串中字串的組合模式；
• 作用：匹配文本 / 替換關鍵詞 / 提取特定部分的字符

創建正則運算式

• 通過呼叫RegExp物件的建構式創建 ： var regexp=new RegExp（/ 正則運算式的內容/）；
• 利用字面量創建 正則運算式 ： var regexp=/ 正則運算式的內容 /；

方式一：通過呼叫RegExp物件的建構式創建 
var regexp = new RegExp(/123/);
console.log(regexp);


方式二：利用字面量創建 正則運算式
 var rg = /123/;

檢測正則運算式

• test() 方法可以檢測檢測字串是否符合該規則；
• 回傳值：true/false；
• 引數：測驗字串；
• 語法：obj.test(檢測字串)

var rg = /123/;
console.log(rg.test(123));//匹配字符中是否出現123  出現結果為true
console.log(rg.test('abc'));//匹配字符中是否出現123 未出現結果為false

常見特殊字符

邊界符

正則運算式中的邊界符（位置符）用來提示字符所處的位置，主要有兩個字符^和 $ ，如果 ^和 $ 在一起，表示必須是精確匹配，

var rg = /abc/; // 正則運算式里面不需要加引號 不管是數字型還是字串型
// /abc/ 只要包含有abc這個字串回傳的都是true
console.log(rg.test('abc'));//true
console.log(rg.test('abcd'));//true
console.log(rg.test('aabcd'));//true


var reg = /^abc/;// /^abc/ 只要abc字串開頭回傳的都是true
console.log(reg.test('abc')); // true
console.log(reg.test('abcd')); // true
console.log(reg.test('aabcd')); // false


var reg1 = /^abc$/; // 精確匹配 要求必須是 abc字串才符合規范
console.log(reg1.test('abc')); // true
console.log(reg1.test('abcd')); // false
console.log(reg1.test('aabcd')); // false
console.log(reg1.test('abcabc')); // false

字符類

字符類表示有一系列字符可供選擇，只要匹配其中一個就可以了，所有可供選擇的字符都放在方括號內，

方括號

[ ] 方括號表示有一系列字符可供選擇，只要匹配其中一個就可以了

var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都回傳為true
console.log(rg.test('andy'));//true
console.log(rg.test('baby'));//true
console.log(rg.test('color'));//true
console.log(rg.test('red'));//false
----------------------------------------------------------------------------------
var rg1 = /^[abc]$/; // 三選一 只有是a 或者是 b  或者是c 這三個字母才回傳 true
console.log(rg1.test('aa'));//false
console.log(rg1.test('a'));//true
console.log(rg1.test('b'));//true
console.log(rg1.test('c'));//true
console.log(rg1.test('abc'));//true
----------------------------------------------------------------------------------
var reg = /^[a-z]$/ //26個英文字母任何一個字母回傳 true  -表示鏈接 a-z表示的是a 到z 的范圍  
console.log(reg.test('a'));//true
console.log(reg.test('z'));//true
console.log(reg.test('A'));//false
-----------------------------------------------------------------------------------
//字符組合
var reg1 = /^[a-zA-Z0-9]$/; // 26個英文字母(大寫和小寫都可以)任何一個字母回傳 true  
------------------------------------------------------------------------------------
//取反 方括號內部加上 ^ 表示取反，只要包含方括號內的字符，都回傳 false ，
var reg2 = /^[^a-zA-Z0-9]$/;
console.log(reg2.test('a'));//false
console.log(reg2.test('B'));//false
console.log(reg2.test(8));//false
console.log(reg2.test('!'));//true

量詞符

量詞符用來設定某個模式出現的次數 ，常見的量詞符如下圖：

 //* 重復0次或者多次
var rg1 = /[a-z]*/;
console.log(rg1.test('zz'));//true
console.log(rg1.test('aaa'));//true
console.log(rg1.test(''));//true

//+ 重復1次或者多次
var rg2 = /[a-z]+/;
console.log(rg2.test('zz'));//true
console.log(rg2.test('aaa'));//true
console.log(rg2.test(''));//false

//? 重復1次或者0次
var rg3 = /[a-z]?/;
console.log(rg3.test('a'));//true
console.log(rg3.test(''));//true

//{n} 重復n次
var rg4 = /[a-z]{3}/;
console.log(rg4.test('cc'));//false
console.log(rg4.test('aaa'));//true
console.log(rg4.test(''));//false

//{n,} 重復n次或者大于n次
var rg5 = /[a-z]{3,}/;
console.log(rg5.test('cc'));//false
console.log(rg5.test('aaa'));//true
console.log(rg5.test('ddddd'));//true

//{n,m} 重復n次到m次
var rg6 = /[a-z]{3,5}/;
console.log(rg6.test('cc'));//false
console.log(rg6.test('aaa'));//true
console.log(rg6.test('ddddd'));//true

小括號

小括號表示優先級

//( )提升優先級
var rg = /^abc{2}$/;
console.log(rg.test('abcabc'));//false
console.log(rg.test('abcc'));//true

| 或選擇

| 表示或或者，多選一

// | 表示或者
var rg = /^abc|ccc$/;
console.log(rg.test('abc'));//true
console.log(rg.test('ccc'));//true

預定義類

預定義內就是把我們常見的正則運算式封裝好方便使用，不再需要自己，直接呼叫即可，

正則替換replace

replace() 方法可以實作替換字串操作，用來替換的引數可以是一個字串或是一個正則運算式，替換時涉及到全域替換以及字母大小寫問題，g表示全域匹配，i表示忽略字母大小寫，gi 全域匹配+忽略大小寫，

• 語法：str.replace( / 被替換的字串/正則運算式 /gi， ”替換為的字串“)
• 回傳值：一個替換完畢的新字串

var str = 'andy和red';
var newStr = str.replace('andy', 'baby');
console.log(newStr)//baby和red

//等同于 此處的andy可以寫在正則運算式內
var newStr2 = str.replace(/andy/, 'baby');
console.log(newStr2)//baby和red


//全部替換
var str = 'abcabc'
var nStr = str.replace(/a/,'哈哈')
console.log(nStr) //哈哈bcabc


//全部替換g
var nStr = str.replace(/a/g,'哈哈')
console.log(nStr) //哈哈bc哈哈bc

//忽略大小寫i
var str = 'aAbcAba';
var newStr = str.replace(/a/gi,'哈哈')//"哈哈哈哈bc哈哈b哈哈"

常見的正則運算式

• 手機號驗證:/^1[3|4|5|7|8][0-9]{9}$/
• QQ號驗證: /^[1-9]\d{4,}$/
• 昵稱驗證:/^[\u4e00-\u9fa5]{2,8}$/
• 密碼驗證:/^[a-zA-Z0-9_-]{6,16}$/

總結

正則表示并不難，就是感覺東西挺碎的，所以我單獨寫了一篇博客記錄！