前端javaScript 之【正規表達式】

現在很多做前端的同學對于正則已經遠遠的抛于腦後，這篇文章簡單寫一下正則，幫助大家回顧，同時也是小白學習的好地方。

正規表達式的基本表示：這個表很重要，争取多看幾遍，最好背下來。

^          // 說明字元串的開始
$          // 說明字元串的結束
\b         // 表示一個單詞的開始或結束
\w         // 表示：數字、字母、下劃線
\s         // 表示任意一個空白字元
\d         // 可以代表任意一個數字
.          // 點代表一個非換行的任意字元
[]         // 字元類 ，例如[a-z]，注意：反過來[z-a]會報錯
*          // 表示0～無窮多次
{n}        // 表示重複n次
{n,m}      // 表示重複n～m次
{n,}       // 表示重複n～無窮多次
+          // 代表重複1～無窮多次
?          // 代表重複0或1次 ，可用于懶惰比對
|          // 或
()         // 分組

// [email protected]
// wx:VillinWeChat           

定義一個正規表達式兩種方法：

1. 放在

/ /

之中來書寫

2.

var regExp = new RegExp('正規表達式')

兩種方法一樣，本次先用第一種方法舉例

例如：

var num = /^\d{3}$/

num值驗證的是三位數字，

^

代表字元串開始

$

代表字元串結束，

\d

代表數字，

{3}

重複3次。

驗證正則test()：可用test()方法來驗證是否含有符合要求的字元，傳回值為布爾值（true/false），如：

num.test(123)

我們來寫一個驗證手機号輸入正确與否的案例：

開發思考：

1. 目前手機号都是以1開頭，是以1要寫成固定。
2. 第二位目前手機号可以是345678都可以。
3. 剩下的九位數，0～9都可以，是以

   \d

   重複9次。

可以寫成：

/^1[345678]\d{9}$/

[]是字元類，可以驗證是否存在[]中所擁有的字元。

标簽部分

<input type="number" id="tel"><span>請輸入正确的手機号碼</span>           

js部分

// 取到input輸入的值，丢失焦點後，開始驗證手機号碼，用onblur
document.querySelector(#tel).onblur = function() {

  var val = this.value // 取到input輸入的value值
  
  var mobileReg = /^1[345678]\d{9}$/ //驗證手機号正則
  
  if(mobileReg.test(val)){
  
    // 此時驗證成功，寫下想要執行的方法
    
  }else{
  
    // 此時驗證失敗，寫下要執行的方法
    
  }
}           

以上就是簡單的正規表達式，如果你有興趣可以簡單的進階一下：

剛才的例子是判斷一個字元串是否符合要求，但正則不僅僅這麼簡單，還可以進行

分組提取

。

正則給我們提供了一個

exec()

方法，如果比對成功，傳回一個數組

Array

，比對失敗會傳回

null

我們可以利用此方法提取電話号的區号和本地号碼，如：

var tel = '0434-123456';   // 簡單寫一個電話号
var reg = /^(\d{3}|\d{4})-(\d{0,})$/  // 用（）進行分組，區号可以是3位或4位，号碼0～n個數值
var resule = reg.exec(tel)  // 結果指派           

上述的

reg

所包含的正則帶有

()

，可以為其

分組

，

(\d{3}|\d{4})

為一組，

(\d{0,})

為一組。

成功列印出來，傳回數組格式，這樣我們就可以輕松拿到想要的号段。

console.log(resule)
// ["0434-123456", "0434", "123456"]           

正則捕獲

正規表達式中如果有分組,那麼分組比對的内容，就會被儲存到RegExp.$1-RegExp.$99中，這種現象叫做正規表達式的捕獲

可能會有些不清楚，解釋一下：

RegExp

代表的就是正則，

$1-$99

代表的是捕獲到的每個字段，存在1-99當中。

那麼

RegExp.$1

代表的就是第一個字段，

RegExp.$2

代表的是第二個字段。

舉個例子，還拿剛才的電話号來說，他有分組，一個是區号，一個是本地号碼，列印出來是一個數組，那麼我們就可以通過

RegExp.$1

和

RegExp.$2

捕獲到這兩個分組的值。

var tel = '0434-123456';   // 簡單寫一個電話号
var reg = /^(\d{3}|\d{4})-(\d{0,})$/  // 用（）進行分組，區号可以是3位或4位，号碼0～n個數值
reg.exec(tel)

console.log(RegExp.$1)   // "0434"
console.log(RegExp.$2)   // "123456"           

正則修飾符

常用的修飾符有三個，分别為

i

：忽略大小寫

m

：執行多次

g

：全局比對

用法：

如：

var num = /\d{3}/g

var num = new RegExp('\\d{3}', 'g');

這三個修飾符放在後邊就可以。

仔細看會發現

new

構造出的正則中，

\b

，寫成了

\\b

，這個不是錯誤，編輯器會轉義成

\

用

g

舉例說明：

var str = '小白，13987654321234567;小林，13898765433;小張，13798765432!!!'；
var reg = /1\d{10}/g;

var arr = str.match(reg)
console.log(arr);  // ["13987654321", "13898765433", "13798765432"]           

此時會列印出三個數值，如果不加全局修飾符

g

，會列印出一條。

舉例中的

match()

方法可在字元串内檢索指定的值，或找到一個或多個正規表達式的比對。

上述例子全局找到符合正則reg的的字段。

與此類似的方法還有：

1. replace()

2. split()

3. search()

舉一個

split()

例子：

普通js方法

'a b   c'.split(' '); // ['a', 'b', '', '', 'c']           

空格也會列印出來，加正則看一下：

'a b   c'.split(/\s+/); // ['a', 'b', 'c']           

再例如：

'a,b, c  d'.split(/[\s\,]+/); // ['a', 'b', 'c', 'd']           

以上就是今天介紹的正則驗證，還有關于更多的知識，感興趣的同學可以去官網查閱，正則的功能很強大，不僅局限于這些……

感興趣的同學可以評論交流，或與我聯系。

e-mail:[email protected]

weChat:VillinWeChat

若您有收獲，也可請部落客喝茶：