JavaScript高級——正則表達式（包括：正則表達式的概述、創建正則表達式、測試正則表達式、正則表達式中的特殊字符、正則表達式的替換）

正則表達式的概述

1.什麼是正則表達式

• 正則表達式是用於匹配字符串中字符組合的模式。在JavaScript中，正則表達式也是對象。

• 作用：正則表達式通常被用來檢索、替換那些符合某個模式（規則）的文本，例如：驗證表單：用戶名錶單隻能輸入英文字母、數字或者下劃線，暱稱輸入框中可以輸入中文（匹配）。此外，正則表達式還常用於過濾頁面內容中的一些敏感詞（替換），或從字符串中獲取我們想要的特定部分（提取）。

• 其他編程語言也一樣會有正則表達式。

2.正則表達式的特點

（1）靈活性、邏輯性和功能性非常的強。

（2）可以迅速地用極簡單的方式達到字符串的複雜控制。

（3）對於剛接觸的人來說，比較晦澀難懂。

（4）實際開發，一般都是直接複製寫好的正則表達式，但是要求會使用正則表達式並且根據實際情況修改正則表達式。

正則表達式在JavaScript中的使用

1.創建正則表達式

• 在JavaScript中，可以通過以下兩種方式創建正則表達式：

  （1）通過調用RegExp對象的構造函數創建

  var 變量名 = new RegExp(/表達式/)
  //舉例：
  var reg = new RegExp(/123/);
  console.log(reg);		//輸出結果爲：/123/
  

  （2）通過字面量創建

  var reg = /123/;
  

2.測試正則表達式test

• test()正則對象方法，用於檢測字符串是否符合該規則，該對象會返回true或false，其參數是檢測字符串。

regexObj.test(str)

（1）regexObj 是寫的正則表達式。

（2）str 是我們要測試的文本。

（3）該方法就是檢測str文本是否符合我們寫的正則表達式規範。

• 舉例：

var reg = /123/;
console.log(reg.test(123));		//輸出結果爲：true

正則表達式中的特殊字符

1.正則表達式的組成

• 一個正則表達式可以由簡單的字符構成，比如：/abc/；也可以是簡單和特殊字符的組合，比如：/ab*c/。其中，特殊字符也被稱爲元字符，在正則表達式中是具有特殊意義的專用符號，如：^、$、+等。

• 特殊字符非常多，可以參考：

  MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

  jQuery手冊：正則表達式部分

  正則測試工具：http://tool.oschina.net/regex

2.邊界符

• 正則表達式中的邊界符（位置符）用來提示字符所處的位置，主要有兩個字符。

邊界符	說明
^	表示匹配行首的文本（以誰開始）
$	表示匹配行尾的文本（以誰結束）

var rg = /abc/;		//正則表達式裏面不需要加引號，不管是數字型還是字符串型
//該正則表達式表示只要包含abc這個字符串，並且abc要連起來的，不能分開，返回的就是true
console.log(re.test('abc'));		//輸出結果爲：true
console.log(re.test('abcd'));		//輸出結果爲：true
console.log(re.test('aabcd'));	//輸出結果爲：true
console.log(re.test('ahbgc'));	//輸出結果爲：true

console.log('----------------------');

var reg = /^abc/;		//表示必須以abc開頭，返回的纔是true
console.log(reg.test('abc'));		//輸出結果爲：true
console.log(reg.test('abcd'));	//輸出結果爲：true
console.log(reg.test('aabcd'));	//輸出結果爲：false

console.log('----------------------');

var reg = /^abc$/;		//精確匹配，要求必須是abc字符串才符合規範，才返回true，其他都是false
console.log(reg.test('abc'));		//輸出結果爲：true
console.log(reg.test('abcd'));	//輸出結果爲：false
console.log(reg.test('aabcd'));	//輸出結果爲：false
console.log(reg.test('abcabc'));//輸出結果爲：false

3.字符類

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

var rg = /[abc]/;	//只要包含有a或者b或者c，都返回true（可以包含多個不同字符，同個字符也可以多次出現）
console.log(rg.test('andy'));		//輸出結果爲：true
console.log(rg.test('baby'));		//輸出結果爲：true
console.log(rg.test('color'));	//輸出結果爲：ture
console.log(rg.test('red'));		//輸出結果爲：false

var rg = /^[abc]$/;		//表示只能三選一，即'a'或'b'或'c'，才返回true
console.log(rg.test('aa'));		//輸出結果爲：fasle
console.log(rg.test('a'));		//輸出結果爲：true
console.log(rg.test('b'));		//輸出結果爲：true
console.log(rg.test('c'));		//輸出結果爲：true
console.log(rg.test('abc'));	//輸出結果爲：false

• [-]：方括號內部的範圍符-

var reg = /^[a-z]$/;
console.log(reg.test('a'));		//輸出結果爲：true
console.log(reg.test('z'));		//輸出結果爲：true
console.log(reg.test(1));			//輸出結果爲：false
console.log(reg.test('A'));		//輸出結果爲：false

• 字符組合

var reg = /^[a-zA-Z0-9_-]$/

• [^]方括號內部的取反符 ^

var reg = /^[^a-zA-Z0-9_-]$/

4.量詞符

• 量詞符用來設定某個模式出現的次數。

量詞	說明
*	重複零次或更多次
+	重複一次或更多次
?	重複零次或一次
{n}	重複n次
{n,}	重複n次或更多次
{n,m}	重複n到m次，注意逗號左右不要留有空格

• *舉例：

var reg = /^a*$/;
console.log(reg.test(''));		//輸出結果爲：true
console.log(reg.test('a'));		//輸出結果爲：true
console.log(reg.test('aaa'));	//輸出結果爲：true
console.log(reg.test('b'));		//輸出結果爲：false

5.括號總結

（1）大括號：量詞符，裏面表示重複的次數。

（2）中括號：字符集合，匹配方括號中的任意字符。

（3）小括號：表示優先級。

• 在線測試：https://c.runoob.com/

6.預定義類

• 預定義類指的是某些常見模式的簡寫方式。

預定義	說明
\d	匹配0-9之間的任一數字，相當於[0-9]
\D	匹配所有0-9以外的字符，相當於[ ^0-9]
\w	匹配任意的字母、數字和下劃線，相當於[A-Za-z0-9_]
\W	除所有字母、數字和下劃線以外的字符，相當於[ ^A-Za-z0-9_]
\s	匹配空格（包括換行符、製表符、空格符等），相當於[\t\r\n\v\f]
\S	匹配非空格的字符，相當於[ ^\t\r\n\v\f]

7.補充

• 或者符號爲：|

var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;

正則表達式中的替換

1.replace替換

• replace()方法可以實現替換字符串操作，用來替換的參數可以是一個字符串或是一個正則表達式。

stringObject.replace(regexp/substr,replacement)

（1）第一個參數：被替換的字符串或者正則表達式。

（2）第二個參數：替換爲的字符串。

（3）返回值是一個替換完畢的新字符串。

//第一個參數爲字符串：
var str = 'andy和red';
var newStr1 = str.replace('andy','baby');
console.log(newStr1);		//輸出結果爲：baby和red
//第一個參數爲正則表達式：
var str = 'andy和red';
var newStr2 = str.replace(/andy/,'baby');
console.log(newStr2);		//輸出結果爲：baby和red

2.正則表達式參數

/表達式/[switch]

• switch（也稱爲修飾符）按照什麼樣的模式來匹配。值如下：

  （1）g：全局匹配

  （2）i：忽略大小寫

  （3）gi：全局匹配 + 忽略大小寫

• 應用舉例：

<body>
  <textarea name="" id="message"></textarea>
  <button>
    提交
  </button>
  <div>
  </div>
</body>

<script>
	var text = document.querySelector('textarea');
  var btn = document.querySelector('button');
  var div = document.querySelector('div');
  btn.onclick = function(){
    div.innerHTML = text.value.replace(/神經|滾/g,'**');		//會把輸入textarea的語句中所有“神經”和“滾”的字符替代爲“**”；如果沒有加g，並且用“|”連起來多個字符，則只會替換一次（不是每個的第一次都替換，而是全部的第一個出現被替換而言）
  }
</script>

---

微信公衆號也會定期更新，覺得文章寫得還可以的，可以加個關注！點個贊！謝謝！