教你輕鬆搞定javascript中的正則

1 正則表達式概述

1.1 什麼是正則表達式

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

1.2 正則表達式特點

1. 靈活性、邏輯性和功能性非常強
2. 可以迅速地用極其簡單的方式達到字符串的複雜控制
3. 比較難懂
   

2 正則表達式在Javascript中的使用

2.1 創建正則表達式

1. 通過RegExp對象的構造函數創建

var 變量名 = new RegExp(/表達式/)

// 利用RegExp創建對象
var regexp = new RegExp(/123/)
console.log(regexp)

2. 通過字面量創建

var 變量名 = /表達式/

var rg = /123/
console.log(rg)

2.2 測試正則表達式 test

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

regexObj.test(str)

• regexObj是寫的正則表達式
• str 我們要測試的文本
• 就是檢測str文本是否符合我們寫的正則表達式規範

var rg = /123/
console.log(rg.test(123)) //true
console.log(rg.test('abc')) //false 

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

3.1 正則表達式的組成

一個正則表達式可以由簡單的字符構成，比如/abc/，也可以是簡單和特殊字符的組合，比如/ab*c/。其中特殊字符也被稱爲元字符，在正則表達式中是具有特殊意義的專用符號。
由於特殊字符比較多，在這裏不再一一列舉，可以參考：
MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
在這裏可以把元字符劃分爲幾類學習：

3.2 邊界符

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

如果^和$同時存在，則達到精確匹配

var rg= /abc/ //正則表達式裏面不需要加引號
// /abc/ 只要包含有abc這個字符串返回的都是true
console.log(rg.test('abc')) // true
console.log(rg.test('abcd')) // true
console.log(rg.test('aabcd')) // true

var reg = /^abc/
console.log(rg.test('abc')) // true
console.log(rg.test('abcd')) // true
console.log(rg.test('aabcd')) // false

var reg = /^abc$/ //精確匹配，要求必須是abc字符串才符合規範
console.log(rg.test('abc')) // true
console.log(rg.test('abcd')) // false
console.log(rg.test('aabcd')) // false
console.log(rg.test('abcabc')) // false

3.3 字符類

表示有有一系列字符可供選擇，只要匹配其中一個就可以了，所有可供選擇的字符都放在方括號內

var rg = /[abc]/; //只要包含有a 或者b 或者c 都返回true
console.log(rg.test('andy')) //true
var rg = /[abc]/; //只要包含有a 或者b 或者c 都返回true
console.log(rg.test('baby')) //true
console.log(rg.test('color')) //true
console.log(rg.test('red')) //false

var rg = /^[abc]$/ //三選一 只有a 或者是b 或者是c, 這三個字母才返回true
console.log(rg.test('aa')) //false
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 rg = /^[a-z]$/ //26個英文字母任何一個字母返回true

var rg = /^[a-zA-Z]$/ //26個英文字母(大寫小寫)任何一個字母返回true

var rg = /^[a-zA-Z0-9_-]$/
console.log(rg.test('c')) //true
console.log(rg.test('B')) //true
console.log(rg.test('_')) //true
console.log(rg.test('8')) //true
console.log(rg.test('-')) //true

//如果中括號裏面有^，表示取反的意思，要和邊界符^別混淆
var rg = /^[^a-zA-Z]$/

3.4 量詞符

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

var reg = /^a*$/
console.log(reg.test(''))// true
console.log(reg.test('a'))// true
console.log(reg.test('aaa'))// true


var reg = /^a+$/
console.log(reg.test(''))// false
console.log(reg.test('a'))// true
console.log(reg.test('aaa'))// true

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

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


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


var reg = /^a{3,5}$/ //{3,5} 逗號後不要空格
console.log(reg.test(''))// false
console.log(reg.test('a'))// false
console.log(reg.test('aaa'))// true
console.log(reg.test('aaaaa'))// true

用戶名驗證

1. 如果用戶名輸入合法，則後面提示信息爲： 用戶名合法，並且顏色爲綠色
2. 如果用戶名輸入不合法，則後面提示信息爲：用戶名不符合規範，並且顏色爲綠色

用戶名驗證分析：

1. 用戶名只能爲英文字母,數字,下劃線或者短橫線組成, 並且用戶名長度爲 6~16位.
2. 首先準備好這種正則表達式模式
3. 如果符合正則規範, 則讓後面的span標籤添加 right 類.
4. 如果不符合正則規範, 則讓後面的span標籤添加 wrong 類.

<input type="text" class="uname"> <span>請輸入用戶名</span>
<style>
        span {
            color: #aaa;
            font-size: 14px;
        }
        
        .right {
            color: green;
        }
        
        .wrong {
            color: red;
        }
    </style>

var reg=/^[a-zA-Z0-9-_]{6,16}$/
var uname = doucument.querySelector('.uname');
var spn = doucument.querySelector('span');
uname.onblur = function() {
	if(res.test(this.value)){
    span.className='right'
    span.innerHTML = '用戶名輸入格式正確'
  } else {
  	span.className='wrong'
    span.innerHTML = '用戶名輸入格式錯誤'
  }
}

3.5 括號總結

1. 大括號：量詞符 裏面表示重複次數
2. 中括號 ： 字符集合。匹配方括號中的任意字符
3. 小括號：表示 優先級

//中括號
var reg = /^[abc]$/  //a||b||c

//大括號
var reg = /^abc{3}$/  //它只是讓c重複三次

//小括號
var reg = /^(abc){3}$/  //abc重複三次

3.6 預定義類

預定義類指的時候某些常見模式的簡寫方式

座機號碼驗證

var reg= /^\d{3}-\d{8}|\d{4}-\d{7}$/ // |是或的意思
var reg= /^\d{3,4}-\d{7,8}|\d{4}-\d{7}$/ 

4 正則表達式中的替換

4.1 replace 替換

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

stringObject.replace(regxp/substr, replacement)

1. 第一個參數：被替換的字符串或者正則表達式
2. 第二個參數：替換爲的字符串
3. 返回值是一個替換完畢的新字符串

var str = 'lanfeng和qianduan'
var newStr = str.replace('front', 'qianduan')
console.log(newstr)

留言過濾敏感詞

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

var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var div = doucment.querySelector('div');
btn.onclick = function () {
	div.innerHTML = text.value.replace(/激情/g, '**')
}

4.2 正則表達式參數

/表達式/[switch]

switch（也稱爲修飾符）按照什麼樣的模式來匹配，有三種值

• g: 全局匹配
• i：忽略大小寫
• gi: 全局匹配+忽略大小寫
  

總結

本篇文章主要分享了javascript中正則的一些知識點及用法。