1. 程式人生 > >懵逼的JavaScript大白(四)——正則

懵逼的JavaScript大白(四)——正則

正則:你好,我叫正則。
大白:你好,我叫不會。

一、正則簡介

1、作用:正則表示式是一組用於對字串進行操作的工具。
2、正則表示式不是js中的一個特有組成部分。而是一個單獨的功能,大多數程式語言都會對正則進行實現。
3、建立方式:在js中正則表示式使用的是內建物件設定方式。
① 建構函式建立方式:new RegExp(‘abc’);
② /abc/

二、正則匹配

1、簡單類和正則方法test()

簡單類:正則最簡單的使用方式
功能:按照內部字元進行匹配操作。

var reg = /abc/;

正則方法test():用於對某個字串進行匹配操作,返回布林型別值,true表示匹配成功,false表示匹配失敗。

var reg = /abc/;
		console.log(reg.test('xxxabcxxx'));//true
		console.log(reg.test('abcxxx'));//true
		console.log(reg.test('xxxabc'));//true
		console.log(reg.test('xxxabxcxxx'));//false

2、字元類

1、字元類標識方式:在正則內部使用[]標識,[]整體表示某一位字元,內部的多個字元表示某個位置的多個情況

		var reg = /[abc]/;
		console.log(reg.test('a'));//true
		console.log(reg.test('b'));//true
		console.log(reg.test('c'));//true
		console.log(reg.test('abc'));//true
		console.log(reg.test('xxaxx'));//true
		console.log(reg.test('xxxx'));//false

3、反向類

:反向類功能是基於字元類的,是對字元類的功能擴充套件。
標識方式:在[]最開始位置書寫一個 ^ , 表示反向,可以匹配除內部字元以外的其他字元。沒說不能有abc,關鍵是有沒有其他字元。

		var reg = /[^abc]/;
		console.log(reg.test('abc')); // false
		console.log(reg.test('xxxx')); // true
		console.log(reg.test('xxax')); // true 只要函式abc以外的其他字元即可
		console.log(reg.test('123')); // true

4、範圍類

		var reg = /[d-h]/;
		console.log(reg.test('f'));//true
		console.log(reg.test('a'));//false
		console.log(reg.test('123'));//false
		console.log(reg.test('ABWDW'));//false

		// 常見的範圍類:
		//   /[a-z]/ - 匹配任意小寫字母
		//   /[A-Z]/ - 匹配任意大寫字母
		//   /[0-9]/ - 匹配數字字元
		//	 /[\u4e00-\u9fa5]/ - 匹配中文字元

5、組合類

組合類:允許同時設定多種匹配規則

var reg = /[a-z0-9A-Z]/;
var reg = /[[email protected]]/;

6、預定義類

正則中提前設定的匹配方式。

		//  \d - 用於匹配數字字元
		var reg = /\d/;
		console.log(reg.test('100'));//true
		console.log(reg.test('abc'));//false
		console.log(reg.test('[email protected]#$'));//false
		//  \D - 用於匹配非數字字元
		var reg = /\D/;
		console.log(reg.test('100')); // false
		console.log(reg.test('abc')); //true
		console.log(reg.test('[email protected]#$'));//true
		//  \w - 用於匹配單詞字元  [a-zA-Z0-9_]
		var reg = /\w/;
		console.log(reg.test('123'));//true
		console.log(reg.test('abc'));//true
		console.log(reg.test('ABC'));//true
		console.log(reg.test('___'));//true
		console.log(reg.test('[email protected]#$%^&*()<>?-={}[]|\\')); // false
		//  \W - 用於匹配非單詞字元
		var reg = /\W/;
		console.log(reg.test('123'));// false
		console.log(reg.test('abc'));// false
		console.log(reg.test('ABC'));// false
		console.log(reg.test('___'));// false
		console.log(reg.test('[email protected]#$%^&*()<>?-={}[]|\\')); // true
		//  \s - 用於匹配不可見字元(通常用來匹配空格、換行)
		var reg = /\s/;
		console.log(reg.test('\n')); // true
		console.log(reg.test(' ')); // true
		console.log(reg.test('\t')); // true
		console.log(reg.test('abc123QWE_+=')); // false
		//  \S - 用於匹配可見字元(通常不使用)
		var reg = /\S/;
		console.log(reg.test('\n')); // false
		console.log(reg.test(' ')); // false
		console.log(reg.test('\t')); // false
		console.log(reg.test('abc123QWE_+=')); // true
		//  .  - 用於匹配可見字元(推薦使用的方式)
		//  注意:在正則中.符號直接表示匹配含義,如果希望匹配.這個符號,使用\.
		//	注意與\S的區別:認為空格屬於可見字元
		var reg = /./;
		console.log(reg.test(' ')); // true
		console.log(reg.test('abc')); // true
		console.log(reg.test('123')); // true
		console.log(reg.test('\n')); // false

匹配可見字元使用.符號
匹配不可見字元使用\s

7、邊界

① 起始位置匹配:標識方式:在正則最開始位置書寫^

		var reg = /^abc/;
		console.log(reg.test('abcxxx'));// true
		console.log(reg.test('xxxabcxxx'));// false
		console.log(reg.test('xxxabc'));// false

② 結束位置匹配:標識方式:在正則最後位置書寫$

		var reg = /abc$/;
		console.log(reg.test('abcxxx'));// false
		console.log(reg.test('xxxabcxxx'));// false
		console.log(reg.test('xxxabc')); // true

③ 嚴格匹配方式:同時使用^$表示嚴格匹配,必須與內部內容完全一致才可以匹配成功。

		var reg = /^abc$/;
		console.log(reg.test('abc')); // true
		console.log(reg.test('abcabc')); // false

注意:所謂的完全一致,指的是規則相同,不是每個字都一樣

		var reg = /^a[qwe]c$/;
		console.log(reg.test('a[qwe]c')); // false
		console.log(reg.test('aqc')); // true
		console.log(reg.test('awc')); // true
		console.log(reg.test('aec')); // true

8、量詞

量詞,用於指定某個部分的重複次數,讓書寫變得簡便

1、自定義量詞

① {n} 表示重複指定的次數

		var reg = /^a{3}$/;
		console.log(reg.test('a'));//false
		console.log(reg.test('aa'));//false
		console.log(reg.test('aaa')); // true
		console.log(reg.test('aaaa'));//false
		console.log(reg.test('aaaaaaa'));//false

② {n,} 表示重複至少n次

		var reg = /^a{3,}$/;
		console.log(reg.test('a'));//false
		console.log(reg.test('aa'));//false
		console.log(reg.test('aaa')); // true
		console.log(reg.test('aaaa')); // true
		console.log(reg.test('aaaaaaa')); // true

③ {n,m} 表示重複的次數範圍

		var reg = /^a{3,5}$/;
		console.log(reg.test('a'));
		console.log(reg.test('aa'));
		console.log(reg.test('aaa')); // true
		console.log(reg.test('aaaa')); // true
		console.log(reg.test('aaaaaaa'));
2、預定義量詞

* 出現至少0次(出不出現均可)

		var reg = /^a*$/;
		console.log(reg.test(''));
		console.log(reg.test('a'));
		console.log(reg.test('aa'));
		console.log(reg.test('aaa'));
		console.log(reg.test('aaaa')); 
		console.log(reg.test('aaaaaaa'));

+ 出現至少1次

		var reg = /^a+$/;
		console.log(reg.test('')); // false
		console.log(reg.test('a'));
		console.log(reg.test('aa'));
		console.log(reg.test('aaa'));
		console.log(reg.test('aaaa')); 
		console.log(reg.test('aaaaaaa'));

? 出現0次或1次

		var reg = /^a?$/;
		console.log(reg.test('')); // true
		console.log(reg.test('a')); // true
		console.log(reg.test('aa'));

9、或者

或者:表示多種情況選擇某一種
標識方式:|

var reg = /a|b|c|d|e|f|g/; // 相當於/[a-g]/,但是字元類書寫更簡便
		var reg = /abc|efg|xyz/;
		console.log(reg.test('abc'));//true
		console.log(reg.test('efg'));//true
		console.log(reg.test('xyz'));//true

如果為單個字元位置的多種情況,使用字元類。
如果為多個字元的多種情況,使用或者操作。

10、括號

括號: 表示某個部分為一個整體,先進行操作

		var reg = /(ab|ef|xy)cd/;
		console.log(reg.test('abcd'));//true
		console.log(reg.test('efcd'));//true
		console.log(reg.test('xycd'));//true
		console.log(reg.test('xy'));//false
		console.log(reg.test('ab'));//false

三、其他功能

正則對字串的操作功能一共為三種:匹配test(),替換replace(),提取。

1、替換操作:replace()

字串的替換方法
引數1:要匹配的內容,不僅可以使用字串,還可以傳入正則表示式
引數2:要替換為的內容
匹配模式
① 書寫位置: /abc/gi new RegExp(‘abc’, ‘ig’)
② 匹配模式g : 全域性匹配,用於找到所有滿足規則的字串部分
③ 匹配模式i : 忽略大小寫

2、提取操作

① 字串的match()
引數:正則表示式

var str = '小明的郵箱為:[email protected]小明的郵箱為:[email protected]小明的郵箱為:[email protected]小明的郵箱為:xi[email protected]小明的郵箱為:[email protected]';
console.log(str.match(/\[email protected]\w+\.\w+/g));

在這裡插入圖片描述
② 正則的exec()
引數:字串
使用同一個正則對一個字串進行多次提取操作,結果每次都是不同的。
當一輪提取操作完畢後,再次進行提取,返回null,表示提取已經一輪結束

var str = '小明的郵箱為:[email protected]小明的郵箱為:[email protected]小明的郵箱為:[email protected]小明的郵箱為:[email protected]小明的郵箱為:[email protected]';
var reg = /(\w+)@(\w+\.\w+)/g;
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));

在這裡插入圖片描述
如果我們在條件中和迴圈體中分別進行exec呼叫,結果多次是不同的,導致跳項

		while (reg.exec(str) !== null) {
			console.log(reg.exec(str));
		}
		//一執行電腦就開始響,再晚一會就沒救了,你們千萬別試

提取結果為null或者陣列,轉換為布林型別,一個為false一個為true
將結果儲存在result變數中,迴圈體內使用result變數進行操作即可。

		var result;
		while (result = reg.exec(str)) {
			console.log(result);
		}