JavaScript高級04

1.正則表達式概述

1.1什麼是正則表達式

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

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

其餘語言也會使用正則表達式，本階段咱們主要是利用JavaScript 正則表達式完成表單驗證。

1.2 正則表達式的特色

1. 靈活性、邏輯性和功能性很是的強。

2. 能夠迅速地用極簡單的方式達到字符串的複雜控制。

3. 對於剛接觸的人來講，比較晦澀難懂。好比：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$

4. 實際開發,通常都是直接複製寫好的正則表達式. 可是要求會使用正則表達式而且根據實際狀況修改正則表達式. 好比用戶名: /^[a-z0-9_-]{3,16}$/

2.正則表達式在js中的使用

2.1正則表達式的建立

在 JavaScript 中，能夠經過兩種方式建立一個正則表達式。

方式一：經過調用RegExp對象的構造函數建立

var regexp = new RegExp(/123/);
console.log(regexp);

方式二：利用字面量建立 正則表達式

 var rg = /123/;

2.2測試正則表達式

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

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

3.正則表達式中的特殊字符

3.1正則表達式的組成

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

特殊字符很是多，能夠參考：

MDN

jQuery 手冊：正則表達式部分

正則測試工具

3.2邊界符

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

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

若是 ^和 $ 在一塊兒，表示必須是精確匹配。

var rg = /abc/; // 正則表達式裏面不須要加引號 無論是數字型仍是字符串型
// /abc/ 只要包含有abc這個字符串返回的都是true
console.log(rg.test('abc'));
console.log(rg.test('abcd'));
console.log(rg.test('aabcd'));
console.log('---------------------------');
var reg = /^abc/;
console.log(reg.test('abc')); // true
console.log(reg.test('abcd')); // true
console.log(reg.test('aabcd')); // false
console.log('---------------------------');
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

3.3字符類

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

3.3.1 [] 方括號

表示有一系列字符可供選擇，只要匹配其中一個就能夠了

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 的範圍  
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

3.3.2量詞符

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

量詞	說明
*	重複0次或更屢次
+	重複1次或更屢次
?	重複0次或1次
{n}	重複n次
{n,}	重複n次或更屢次
{n,m}	重複n到m次

3.3.3用戶名錶單驗證

功能需求:

1. 若是用戶名輸入合法, 則後面提示信息爲: 用戶名合法,而且顏色爲綠色

2. 若是用戶名輸入不合法, 則後面提示信息爲: 用戶名不符合規範, 而且顏色爲紅色

分析:

1. 用戶名只能爲英文字母,數字,下劃線或者短橫線組成, 而且用戶名長度爲6~16位.

2. 首先準備好這種正則表達式模式/$[a-zA-Z0-9-_]{6,16}^/

3. 當表單失去焦點就開始驗證.

4. 若是符合正則規範, 則讓後面的span標籤添加 right類.

5. 若是不符合正則規範, 則讓後面的span標籤添加 wrong類.

<input type="text" class="uname"> <span>請輸入用戶名</span>
 <script>
 // 量詞是設定某個模式出現的次數
 var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 這個模式用戶只能輸入英文字母 數字 下劃線 中劃線
 var uname = document.querySelector('.uname');
 var span = document.querySelector('span');
 uname.onblur = function() {
   if (reg.test(this.value)) {
   console.log('正確的');
   span.className = 'right';
   span.innerHTML = '用戶名格式輸入正確';
   } else {
   console.log('錯誤的');
   span.className = 'wrong';
   span.innerHTML = '用戶名格式輸入不正確';
   }
 }
</script>

3.3.4 括號總結

1.大括號 量詞符. 裏面表示重複次數

2.中括號 字符集合。匹配方括號中的任意字符.

3.小括號表示優先級

正則表達式在線測試

3.4預約義類

預約義類指的是某些常見模式的簡寫方式.

案例:驗證座機號碼

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

表單驗證案例

//手機號驗證:/^1[3|4|5|7|8][0-9]{9}$/;
//驗證經過與不經過更換元素的類名與元素中的內容
 if (reg.test(this.value)) {
    // console.log('正確的');
    this.nextElementSibling.className = 'success';
    this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您輸入正確';
   } else {
       // console.log('不正確');
      this.nextElementSibling.className = 'error';
      this.nextElementSibling.innerHTML = '<i class="error_icon"></i>格式不正確,請重新輸入 ';
 }

//QQ號驗證: /^[1-9]\d{4,}$/; 
//暱稱驗證:/^[\u4e00-\u9fa5]{2,8}$/
//驗證經過與不經過更換元素的類名與元素中的內容 ,將上一步的匹配代碼進行封裝,屢次調用便可
 function regexp(ele, reg) {
    ele.onblur = function() {
      if (reg.test(this.value)) {
        // console.log('正確的');
        this.nextElementSibling.className = 'success';
        this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您輸入正確';
   } else {
     // console.log('不正確');
     this.nextElementSibling.className = 'error';
     this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 格式不正確,請重新輸入 ';
            }
        }
 };

//密碼驗證:/^[a-zA-Z0-9_-]{6,16}$/
//再次輸入密碼只需匹配與上次輸入的密碼值 是否一致

3.5正則替換replace

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

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/a,'哈哈')
console.log(nStr) //哈哈bc哈哈bc
//忽略大小寫i
var str = 'aAbcAba';
var newStr = str.replace(/a/gi,'哈哈')//"哈哈哈哈bc哈哈b哈哈"

案例:過濾敏感詞彙

<textarea name="" id="message"></textarea> <button>提交</button>
<div></div>
<script>
    var text = document.querySelector('textarea');
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    btn.onclick = function() {
    	div.innerHTML = text.value.replace(/激情|gay/g, '**');
    }
</script>