從零開始學習前端JAVASCRIPT — 九、JavaScript基礎RegExp(正則表達式)

1：正則的概念

正則表達式(regular expression)是一個描述字符規則的對象。能夠用來檢查一個字符串是否含有某個子字符串，將匹配的子字符串作替換或者從某個字符串中取出符合某個條件的子串等。

爲何要用正則：前端每每有大量的表單數據校驗工做，採用正則表達式會使得數據校驗的工做量大大減輕。經常使用效果：郵箱、手機號、身份證號等。

---

 2：建立方式 

i：表示忽略大小寫。 

g：表示全局匹配，查找全部匹配並返回而非在找到第一個匹配後中止。 

m：多行匹配。 

第一種方式：var reg = new RegExp(「study」， 「ig」);   // 第二個參數爲修飾符，修飾符能夠多個連寫

第二種方式：var reg = /study/ig; 

var str = 'Good good study day day up!';
// 第一種
var regone = /good/ig;
// 第二種
var regtwo = new RegExp('good', 'ig');
console.log(str.match(regone))
console.log(str.match(regtwo))

---

 3：正則對象方法

test：檢索字符串中指定的值。返回true或false。

exec：用於檢索字符串中的正則表達式的匹配。返回一個數組，其中存放匹配的結果。若是未找到匹配，則返回值爲null。

注：若是沒有指定g修飾符，那麼每次匹配都是從頭開始匹配，若是指定g修飾符之後，下次匹配則從上次匹配的結束位置開始匹配。 

var str = 'Good good study day day up!';
// 正則表達式對象的方法
var regone = /good/ig;
var regtwo = new RegExp('good', 'ig');
console.log(regone.test(str));
console.log("——————————我是分割線——————————");
regone.lastIndex = 4;//指定索引開始匹配的位置
console.log(regone.exec(str));
console.log(regtwo.exec(str));
console.dir(regone)

 　　 

---

 

4：字符串函數

search：檢索與正則表達式相匹配的值。返回字符串中第一個與正則表達式相匹配的子串的起始位置。若是沒有找到則返回-1。

match：找到一個或多個正則表達式的匹配。

replace：替換與正則表達式匹配的子串。

replace(捕獲正則表達式,$1《對捕獲表達式的值引用》)
replace方法第二個參數支持回調函數，回調函數的參毀掉表就是正則表達式匹配到的結果

split：把字符串分割爲字符串數組。

var str = 'Good good study day day up!';
// 字符串的方法
var reg = /good/ig;
var result = str.match(reg);
console.log(result)
var result = str.search(reg);
console.log(result)
var result = str.replace(reg, '****');
console.log(result)
var str = 'a=b&c=d&e=f';
var reg = /[=&]/;
var result = str.split(reg);
console.log(result)

 　　 

---

 

5：正則表達式構成

正則表達式是由普通字符（例如字符a到z）以及特殊字符（稱爲元字符）組成的文字模式。正則表達式做爲一個模板，將某個字符模式與所搜索的字符串進行匹配。

元字符---限定符：限定符能夠指定正則表達式的一個給定組件必需要出現多少次才能知足匹配。

*：匹配前面的子表達式零次或屢次。

+：匹配前面的子表達式一次或屢次。

？：匹配前面的子表達式零次或一次。

{n}：匹配肯定n次。

{n,}：至少匹配n次。

{n, m}：最少匹配n次且最多匹配m次。

// 限定符
var str = 'google good';
var reg = /go*gle/; // 表明0到屢次
console.log(str.split(reg));
var reg = /go+gle/; // 表明1到屢次
console.log(str.split(reg));
var reg = /go?gle/; // 表明0到1次
console.log(str.split(reg));
var reg = /go{4,}gle/; // 表明最少4次
console.log(str.split(reg));
var reg = /go{3,5}gle/; // 表明最少3次,最多5次
console.log(str.split(reg));
var reg = /go{2}gle/; // 表明只有2次
console.log(str.split(reg));

 　　

　　注：在限定符後緊跟 ? 則由貪婪匹配變成非貪婪匹配。

// 貪婪匹配轉換成非貪婪匹配
var str = '<div id="box"></div><p></p>';
var regone = /<.+>/;
var regtwo = /<.+?>/;
console.log(regone.exec(str));
console.log("————————上爲貪婪匹配，下爲非貪婪匹配————————");
console.log(regtwo.exec(str));

 　　 

元字符---字符匹配符：字符匹配符用於匹配某個或某些字符。

[xyz]：字符集合。匹配所包含的任意一個字符。

[^xyz]：負值字符集合。匹配未包含的任意字符。

[a-z]：字符範圍。匹配指定範圍內的任意字符。

[^a-z]：負值字符範圍。匹配任何不在指定範圍內的任意字符。

例如：[0-9]、[0-9a-z]、[0-9a-zA-Z]

\d：匹配一個數字字符。

\D：匹配一個非數字字符。

\w：匹配包含下劃線的任何單詞字符。等價於[a-z0-9A-Z_]

\W：匹配任何非單詞字符。等價於[^a-z0-9A-Z_]

\s：匹配任何空白字符。

\S：匹配任何非空白字符。

.：匹配除」\n」以外的任何單個字符。

// 字符匹配符
var str = 'a=b&c=d&e=f';
var reg = /[=&]/; // 字符匹配符集合
console.log(reg.exec(str))
var reg = /[^=&]/; // 否值字符匹配符集合
console.log(reg.exec(str))
var reg = /[b-e]/; // 範圍字符匹配符
console.log(reg.exec(str))
var reg = /[^b-e]/; // 否值範圍字符匹配符
console.log(reg.exec(str))
var str = '2018 we are coming! \n _%$#@';
var reg = /\d{4}/g;
console.log(reg.exec(str))
var reg = /\D{4}/g;
console.log(reg.exec(str))
var reg = /\w{4}/g;
console.log(reg.exec(str))
var reg = /\W{4}/g;
console.log(reg.exec(str))
var reg = /\s{1}/g;
console.log(reg.exec(str))
var reg = /\S{1}/g;
console.log(reg.exec(str))
var reg = /.+/g;
console.log(reg.exec(str))

 　　  

元字符---定位符：定位符能夠將一個正則表達式固定在一行的開始或結束。也能夠建立只在單詞內或只在單詞的開始或結尾處出現的正則表達式。

^：匹配輸入字符串的開始位置。

$：匹配輸入字符串的結束位置。

\b：匹配一個單詞邊界，也就是單詞和空格間的位置。

\B：匹配非單詞邊界。

// 定位符
// ^ 和 $ ：限定字符串開始和結束的位置
var cellphone = '12345678901';
var reg = /^1\d{10}$/;
console.log(reg.test(cellphone));
// \b：限定單詞以什麼開頭和結尾，\B：限定單位不以什麼開頭和結尾
var str = 'good ogoodm goods sgoods';
var reg = /\bg\w+/g;
console.log(str.match(reg));
var reg = /\w+d\b/g;
console.log(str.match(reg));
var reg = /\Bg\w+/g;
console.log(str.match(reg));
var reg = /\w+d\B/g;
console.log(str.match(reg));

 　　 

元字符---轉義符：\：用於匹配某些特殊字符。

// 轉義符
var str = 'a*********b';
var reg = /\*+/;
console.log(str.match(reg));

 　　 

元字符---選擇匹配符：|：能夠匹配多個規則。

var str = 'good bad goodbad';
var reg = /good|bad/g;
console.log(str.match(reg));

 　　 

---

 

特殊用法：

()：捕獲性分組，也稱爲子表達式。使用\一、\二、\3…對子組的引用。當子組發生嵌套時，順序是從外到內。 

var str = '<div>你好</ppp>';
var reg = /<.+?>(?:.*?)<\/.+?>/g;
console.log(str.match(reg));
console.log("————————我是分割線————————")
var reg = /<(.+?)>(.*?)<\/\1>/g;
console.log(str.match(reg));
//釋義：\1或\2...表示對錶達式的引用及對字符串匹配值方式的引用，不是表義上\數值對（.+?）表達式的引用

 　　 

//()捕獲型分組表達式的應用及表達式返回值的引用
//$對()捕獲型分組返回值的引用

var str = '<div>HF胡辣湯!!!!!!</div>';
	var reg = /<div>(.*)<\/div>/;
	console.log(reg.exec(str));
	//表達式的匹配的值：<div>HF胡辣湯!!!!!!</div>
	//子表達式返回的值：HF胡辣湯!!!!!!
	console.log(str.replace(reg, '<h2>$1</h2>'));
	//$字符在此處的做用是對子表達式返回值的引用，經replace替換，將字符串改寫成<h2>HF胡辣湯!!!!!!</h2>

 

	var str = '<div>HF胡辣湯!!!!!!</div>';
	var reg = /<div>(.*)<\/div>/;
	var result = str.replace(reg, function (name, name1) {
		console.log(name, name1);
		return name1;
	});
        //replace方法第二個參數支持回調函數，回調函數的形參表對應正則表達式匹配到的返回結果
        //返回結果（表達式的返回結果及子表達式的返回結果）。        

　　

(?:pattern)：非捕獲性分組。匹配pattern但不獲取匹配結果。也就是說這是一個非獲取匹配，不進行存儲供之後使用。這在使用 "或" 字符 (|) 來組合一個模式的各個部分是頗有用。例如， 'industr(?:y|ies) 就是一個'industry|industries' 更簡略的表達式。 

	var str = '<div>HF胡辣湯!!!!!!</div>';
	var reg = /<div>(?:.*)<\/div>/;//（注意表達式內的變化）
	var result = str.replace(reg, function (name, name1) {
		console.log(name, name1);
		return name1;
	});
	console.log(result);

 

(?=pattern)：正向預查，在任何匹配 pattern 的字符串開始處匹配查找字符串。這是一個非獲取匹配，也就是說，該匹配不須要獲取供之後使用。例如， 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ，但不能匹配 "Windows 3.1" 中的 "Windows"。預查不消耗字符，也就是說，在一個匹配發生後，在最後一次匹配以後當即開始下一次匹配的搜索，而不是從包含預查的字符以後開始。

(?!pattern)：負向預查，在任何不匹配pattern 的字符串開始處匹配查找字符串。這是一個非獲取匹配，也就是說，該匹配不須要獲取供之後使用。例如‘Windows (?!95|98|NT|2000)’ 能匹配 「Windows 3.1」 中的 「Windows」，但不能匹配 「Windows 2000」 中的 「Windows」。預查不消耗字符，也就是說，在一個匹配發生後，在最後一次匹配以後當即開始下一次匹配的搜索，而不是從包含預查的字符以後開始。 

// 預查
var str = 'windowsXP windows7 windows10 windows8 windows8.1 windows97';
var regone = /windows(?=[a-z]+)/i; //正向預查
var regtwo = /windows(?![a-z]+)/i;//反向預查
console.log(str.match(regone));
console.log(str.match(regtwo));

 　　

---

 擴展： 

手機號監測

 

身份證監測

 

日期監測

 

中文監測 

unicode編碼中文監測：/^[\u2E80-\u9FFF]+$/ 

用戶名監測 

正則：/^[a-z0-9_-]{3,16}$/ 

字符串過濾 

用字符串replace方法。