Javascript教程（十二）——通俗易懂的正則運算式！！！

一、正則運算式

正則運算式用于定義一些字串的規則，計算機可以根據正則運算式，來檢查一個字串是否符合規則，獲取將字串中符合規則的內容提取出來

1、創建正則運算式的物件

• 語法：
  • var 變數 = new RegExp("正則運算式","匹配模式");
  • 使用typeof檢查正則物件，會回傳object

	var reg = new RegExp("a");     //這個正則運算式可以來檢查一個字串中是否含有a
	console.log(reg);   //結果 "/a/"
	console.log(typeof reg);   //結果 object

• 在建構式中可以傳遞一個匹配模式作為第二個引數，
• 可以是
  • i 忽略大小寫
  • g 全域匹配模式

	var reg2 = new RegExp("ab","i");

那么如何去檢測正則運算式規定的規則呢？

• 正則運算式的方法：
• test()
  • 使用這個方法可以用來檢查一個字串是否符合正則運算式的規則，
  • 如果符合則回傳true，否則回傳false

    var reg = new RegExp("a");     //這個正則運算式可以來檢查一個字串中是否含有a
	var str  = "abcd";
	var result = reg.test(str);
	console.log(result);   //true
	
	var reg2 = new RegExp("ab","i");
	console.log(reg2.test("Ac"));    // false
	console.log(reg2.test("Ab"));    // true

2、使用字面量創建正則運算式

• 語法：
  • var 變數 = /正則運算式/匹配模式
  • 使用字面量的方式創建更加簡單
    使用建構式創建更加靈活，因為可以向建構式傳一個變數，變數是什么，正則就是什么，所以更加靈活

var reg = new RegExp("a","i");
			
var reg = /a/i;

// 以上兩種寫法一模一樣

創建一個正則運算式，檢查一個字串中是否有a或b

/*
 * 使用 | 表示或者的意思
 */
reg = /a|b|c/;

創建一個正則運算式檢查一個字串中是否有字母

/*
 * []里的內容也是或的關系
 * [ab] == a|b
 * [a-z] 任意小寫字母
 * [A-Z] 任意大寫字母
 * [A-z] 任意字母
 * [0-9] 任意數字
 */
reg = /[A-z]/;
reg = /[0-9]/;

檢查一個字串中是否含有 abc 或 adc 或 aec

reg = /a[bde]c/;

除了 [^ ]

reg = /[^ab]/;   //除了ab以外的 ，都可以
console.log(reg.test("abc")) ;  //這也是true
console.log(reg.test("ab")) ;  //這是
===============================================
reg = /[^0-9]/;
console.log(reg.test("12a3456"));

3、字串和正則相關的方法

split()

• 可以將一個字串拆分為一個陣列
• 方法中可以傳遞一個正則運算式作為引數，這樣方法將會根據正則運算式去拆分字串
• 這個方法即使不指定全域匹配，也會全都插分

var str = "1a2b3c4d5e6f7";
/*
 * 根據任意字母來將字串拆分
 */
var result = str.split(/[A-z]/);
console.log(result);  //"1,2,3,4,5,6,7"

search()

• 可以搜索字串中是否含有指定內容
• 如果搜索到指定內容，則會回傳第一次出現的索引，如果沒有搜索到回傳-1
• 它可以接受一個正則運算式作為引數，然后會根據正則運算式去檢索字串
• search()只會查找第一個，即使設定全域匹配也沒用

str = "hello abc hello aec afc";
console.log(str.search("abc"));   //找到第一個str中第一個abc,索引為6，所以這行列印6
/*
 * 搜索字串中是否含有abc 或 aec 或 afc
 */
result = str.search(/a[bef]c/);
console.log(result); //會列印6，因為先找到了abc，如果沒有abc才會繼續往后找aec

match()

• 根據正則運算式，從一個字串中將符合條件的內容提取出來
• 默認情況下我們的match只會找到第一個符合要求的內容，找到以后就停止檢索
  • 我們可以設定正則運算式為全域匹配模式，這樣就會匹配到所有的內容
  • 可以為一個正則運算式設定多個匹配模式，且順序無所謂
  • match()會將匹配到的內容封裝到一個陣列中回傳，即使只查詢到一個結果

str = "1a2a3a4a5e6f7A8B9C";
result = str.match(/[A-z]/);
console.log(result);  //這是沒有設定的默認情況，只找到第一個符合要求的，也就是a		

result1 = str.match(/[a-z]/ig);  //i忽略大小寫，g全域模式
console.log(result1);  //"a,a,a,a,e,f,A,B,C"

console.log(Array.isArray(result1)); //true,  result1是一個陣列，存盤了匹配到的內容

replace()

• 將字串中指定內容替換為新的內容
• 引數：
  1. 被替換的內容，可以接受一個正則運算式作為引數
  2. 新的內容
• 默認只會替換第一個

str = "1a2a3a4";
			
result = str.replace(/[a-z]/gi , "@_@");
console.log(result); //"1@_@2@_@3@_@4"

result = str.replace(/[a-z]/gi , "");
			
console.log(result);  //"1234"	

4、正則運算式語法

量詞

/*
 * 創建一個正則運算式檢查一個字串中是否含有aaa
 */
 var reg = /aaa/;

但如果我們要很多很多a，難道要/aaaaaaaaaaaaaaaa/這樣寫嗎？
這就引入了量詞

量詞語法

• 通過量詞可以設定一個內容出現的次數
• 量詞只對它前邊的一個內容起作用
  • {n} 正好出現n次
  • {m,n} 出現m-n次
  • {m,} m次以上
  • +至少1次 相當于 {1,}
  • ? 0次或1次 相當于 {0,1}
  • *0次或多次 相當于 {0,}

//aaa
var reg = /a{3}/;
//ababab
reg = /(ab){3}/;
			
reg = /ab{1,3}c/;  //abc或abbc或abbbc

reg = /ab{3,}c/;  //ab出現3次及以上c

reg = /ab+c/; //b至少1次 

reg = /ab*c/;  //b出現0次或多次

reg = /ab?c/;  //b出現0次或1次

檢查一個字串中是否以a開頭

• ^ 表示開頭
• $ 表示結尾

reg = /^a/; //匹配開頭的a
console.log(reg.test("abcabca"));	//true
console.log(reg.test("bcabca")); //false

reg = /a$/; //匹配結尾的a
console.log(reg.test("abcabca"));	//true
console.log(reg.test("bcabc")); //false
			
/*
 * 如果在正則運算式中同時使用^ $則要求字串必須完全符合正則運算式
*/
reg = /^a$/;  //a既得是開頭也得是結尾，所以只有a符合，其他都是false
			
console.log(reg.test("aaa"));  //false
console.log(reg.test("a"));  //true	

reg = /^a|a$/;  //以a開頭或以a結尾
			
console.log(reg.test("aaa"));  //true
console.log(reg.test("bbca"));  //true	

小練習

• 創建一個正則運算式，用來檢查一個字串是否是一個合法手機號
• 手機號的規則：
• 1 3 567890123 （11位）
  1. 以1開頭
  2. 第二位3-9任意數字
  3. 三位以后任意數字9個
• ^1 [3-9] [0-9]{9}$

var phoneStr = "13067890123";
			
var phoneReg = /^1[3-9][0-9]{9}$/;
			
console.log(phoneReg.test(phoneStr)); //true

phoneStr = "11067890123";
console.log(phoneReg.test(phoneStr)); //false

轉義字符

當我們想檢查一個字串中是否含有 . 時，不能直接var reg = /./，因為 . 表示任意字符
console.log(reg.test("abc")) //這樣也是true
所以有些時候，字符代表了特殊含義，想讓他表示成原本的意義時就需要轉義

• 在正則運算式中使用 \ 作為轉義字符

  • . 來表示.

  • \ 表示\

  • 注意：使用建構式時，由于它的引數是一個字串，而\是字串中轉義字符，如果要使用\則需要使用\來代替

var reg = /\./;
reg = /\\/;
			
reg = new RegExp("\\.");  //要用兩個\\代表轉義字符\  相當于var reg = /\./;
reg = new RegExp("\\\\"); //要用兩個\\代表轉義字符\  相當于var reg = /\\/;

• \w
  • 任意字母、數字、_ 相當于 [A-z0-9_]
• \W
  • 除了字母、數字、_ 相當于 [^A-z0-9_]
• \d
  • 任意的數字 [0-9]
• \D
  • 除了數字 [^0-9]
• \s
  • 空格
• \S
  • 除了空格
• \b
  • 單詞邊界
• \B
  • 除了單詞邊界

reg = /\w/;
reg = /\W/;

reg = /\d/;
reg = /\D/;

reg = /\s/;
reg = /\S/;

/*
 * 創建一個正則運算式檢查一個字串中是否含有單詞child
 */
reg = /child/;			
console.log(reg.test("hellochildren "));  //只要含有child，結果就是true
						
reg = /\bchild\b/;
console.log(reg.test("hellochild "));  //false
console.log(reg.test("hello child "));  //true	

//接收一個用戶的輸入
//var str = prompt("請輸入你的用戶名:");

var str = "              he      llo                ";
console.log(str);

//去除掉字串中的前后的空格
//去除空格就是使用""來替換空格
// str = str.replace(/\s/g , "");
// console.log(str); //hello，它會把中間的空格也去掉，就是所有的空格都去掉了

//去除開頭的空格
str = str.replace(/^\s*/, "");  //如果不加*，只會匹配開頭的一個空格，所以是開頭的多個空格，用*


//去除結尾的空格
//str = str.replace(/\s*$/, "");


// /^\s*|\s*$/g 匹配開頭和結尾的空格，意思為去除開頭或結尾的空格
// 加全域匹配時因為，|為或的意思，如果不全域匹配，reg認為去除完前面的空格了，就不繼續匹配了
str = str.replace(/^\s*|\s*$/g,"");


console.log(str);

5、綜合練習——郵件正則

電子郵件
hello . nihao @ abc . com . cn

• 任意字母數字下劃線 .任意字母數字下劃線(整個這部分可有可無，所以用*) @ 任意字母數字(至少1位，所以用+) .任意字母（2-5位） .任意字母（2-5位） //后兩部分整體出現1-2次，所以整體{1,2}
• \w{3,} (.\w+)* @ [A-z0-9]+ (.[A-z]{2,5}){1,2}

	
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
			
var email = "abc.hello@163.com";

console.log(emailReg.test(email)); //true

常用正則運算式