教你輕鬆搞定javascript中的正則

1 正則表達式概述 1.1 什麼是正則表達式正則表達式（Regular Expression）是用於匹配字元串中字元組合的模式。在Javascript中，正則表達式也是對象。正則表通常被用來檢索，替換那些符合某個模式（規則）的文本，例如驗證表單：用戶名錶單隻能輸入英文字母、數字或者下劃線，昵稱輸入 ...

1 正則表達式概述

1.1 什麼是正則表達式

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

1.2 正則表達式特點

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

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

2.1 創建正則表達式
通過RegExp對象的構造函數創建

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

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

通過字面量創建

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

用戶名驗證

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

用戶名驗證分析：

用戶名只能為英文字母,數字,下劃線或者短橫線組成, 並且用戶名長度為 6~16位.
首先準備好這種正則表達式模式 /^[a-zA-Z0-9-_]{6,16}$/
當表單失去焦點就開始驗證.
如果符合正則規範, 則讓後面的span標簽添加 right 類.
如果不符合正則規範, 則讓後面的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 括弧總結

大括弧：量詞符裡面表示重覆次數
中括弧：字元集合。匹配方括弧中的任意字元
小括弧：表示優先順序

//中括弧
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)

第一個參數：被替換的字元串或者正則表達式
第二個參數：替換為的字元串
返回值是一個替換完畢的新字元串

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中正則的一些知識點及用法，如果想瞭解更多，請掃描二維碼：