JavaScript || 正則表達式

1 爲何要用正則表達式?

學習以前,多想一想爲何要使用正則表達式,有助於理解。正則表達式

正則表達式regular expression使用單個字符串來描述某個句法規則,計算機根據規則去匹配字符串中的內容。express

  • 正則表達式的性能高於常規字符串操做(省略循環、遍歷等操做)數組

  • 正則表達式僅用於字符串的操做函數

2 常規字符串操做與正則表達式的比較

要提取出字符串中'ashx521dasbx34sasdz275dasdzxd897'中連續的數字,並將結果保存在數組中['521', '34', '275', '897']性能

  1. 傳統字符串操做:須要遍歷整個字符串,判斷每一個字符是否在'0'-'9'之間再進行相應的操做學習

    /**
     * 使用一個暫時變量tmp保存連續爲數值時的字符串,間斷後再統一加入數組內;
     * 可能會出現最後一位是數字的狀況,因此使用i<=str.length多走一次循環的else路徑,將最後一組數組加入數組
     * 
     */
    function findNum_two(str) {
        var arr = [];
        var tmp = '';
        // 遍歷字符串,取出須要的數字
        for(var i=0; i<=str.length; i++) {   
            if(str.charAt(i) <= '9' && str.charAt(i) >= '0') {
                tmp += str[i];
            } else {
                if(tmp) {   // 若是tmp不爲空
                    arr.push(tmp);
                    tmp = '';
                }
            }
        }
    
        return arr;
    }
    console.log(findNum_two(str));    //  [ '521', '34', '275', '897' ]
  2. 使用正則表達式:只需使用字符串的match()方法去匹配指定的規則(正則表達式便可)編碼

    function findNum (str) {
        return str.match(/\d+/g);
    }
    
    console.log(findNum(str));   // [ '521', '34', '275', '897' ]

3 正則表達式寫法

  1. 字面量寫法:var re = /\d+/gi;spa

  2. 構造函數寫法:var re = new RegExp('\\d+', 'gi');注意兩個\\,由於JavaScript中\須要轉義.net

圖片描述

3.1 正則表達式中的轉義字符

轉義字符:單獨使用字母自己有意義;在前面加上\後改變原有意義code

圖片描述

3.2 量詞

用來描述相鄰的前面的單個字符匹配規則出現的次數

  • 量詞使用{a, b}表示,其中b能夠省略,意義不一樣

![圖片描述

3.3 字符類

  • 使用[]描述一類字符,總體只表明一個字符,表示該字符在某個範圍內。

  • /a[0-9]c/匹配三位字符串,第一位是a,第三位是c,第二位是'0'-'9'之間的任何一位均可以匹配成功

  • []多種規則是或 |的關係:[0-9a-zA-Z]

整個字符類[0-9a-zA-Z]只表明一位字符

注意,字符類中的^表示非的意思,不在某個範圍內[^\d]表示非數字的字符

3.4 修飾符

  1. g--global:全局匹配,找到全部的匹配項,不是在第一個匹配後中止

  2. i--ignored:忽略大小寫

  3. m:多行,將開始字符^和結束字符$視爲在多行上工做(每匹配一行的開始和結束以\n\r分割)

  4. u:將模式視爲Unicode序列點的序列

3.5 匹配子項

對於複雜的正則表達式,可使用()將其拆分爲多個部分,replace(re, fn)回調函數中能夠簡化匹配內容的操做

var re = /(\d+)(\w)(\S)/;

fn($0, $1, $2 ...)

  • $0表明正則表達式自己匹配到的內容:(\d+)(\w)(\S)

  • $1表明正則表達式的第一個匹配子項:(\d+)

  • $2表明正則表達式第二個匹配子項:(\w)

  • ...

3.6 重複子項

主要用於匹配字符串中重複的字符

  • var re = /(a)(b)(c)\1/;\1表示重複的第一個子項(b),第4個位置的字符與第1個位置的字符相同

  • var re = /(a)(b)(c)\2/;\2表示重複的第二個子項(b),第4個位置的字符與第2個位置的字符相同

  • var re = /(a)(b)(c)\3/;\3表示重複的第三個子項(c),第4個位置的字符與第3個位置的字符相同

  • ...

3.7 邏輯或|

  • 使用|表明邏輯或,|左右兩個操做數只要有一個知足要求便可

3.8 開始、結束標記

  • 不在[]中使用^^表示以最近的匹配字符規則開始整個匹配;

  • $表示以最近的匹配規則結束匹配

做用範圍只是^以後的第一個子項;$前的第一個子項

4 正則表達式的方法

主要有4中方法用於操做正則表達式:

  1. match()replace()search()是字符串的操做方法

  2. test()exec()是正則表達式對象的操做方法

4.1 test()

根據RegExp去匹配字符串,若是匹配成功,返回true;匹配失敗返回false主要用於邏輯判斷

var str = "abxe2312dafxz";
var re = /\d+/;

re.test(str);   // true

4.2 search()

根據RegExp去匹配字符串,返回第一個匹配成功字符串的首字符的索引;匹配失敗返回-1用於查找字符的索引,相似字符串的indexOf()方法

  • str.search(re)

4.3 match()

根據RegExp去匹配字符串,若是匹配成功,將匹配的結果保存在數組中返回;匹配失敗返回null默認第一次匹配後便中止繼續匹配,使用修飾符g進行全局匹配

  • str.match(re)

4.4 replace(re, newstr)方法

根據RegExp去匹配字符串,若是匹配成功,將匹配的字符串更換爲新的字符串newstr

replace()方法的參數re正則表達式是變量,必須使用new RegExp()方式建立re

var str = 'a23gb';
var re = /\d+/;

str.replace(re, "xy");   //  'axygb'

replace()方法的第二個參數能夠是回調函數,其參數是每次匹配成功獲取的字符串。每次匹配成功都會執行一次回調函數

5 實踐

5.1 找到一個字符串中出現次數最多的字符及其出現的次數

var str = '1231asdaegj71836178asdhasssasalsdhdzxbczaslazxcnnffajshdhgagsgdssssasdzzxda';

var str = str.split('').sort().join('');   // 按順序的字符序列

var re = /(\w)\1+/g;

var length = 0;
var val = '';   // 保存出現次數最多的字符

// $0表明每次匹配到的字符,$1表明第一個正則表達式子項(\w)
str.replace(re, function ($0, $1) {  // 能夠將匹配的字符當作變量操做
    if($0.length > length) {
        length = $0.length;
        val = $1;    // $1表明每次匹配的字符
    }
});
console.log(length);
console.log(val);

5.2 去掉字符串先後的空格

  • var re = /^\s+|\s+$/g;,使用字符串應用正則便可:str.replace(re, '')

5.3 經常使用正則匹配規則

  1. QQ號:var re = /^[1-9]\d{4,11}$/; :第一位是1-9中的數字,最後也是數字,總共5-12位

  2. 中文匹配:var re = /[\u4e00-\u9fa5]/;:使用Unicode編碼進行匹配

  3. emailvar re = /\w+@[a-z0-9]+(\.[a-z]+){1,3}/;:可能出現.com.cn.net

  4. 身份證:var re = /[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x/i;

  5. 郵編:var re = /[1-9]\d{5}/;

5.3 將經常使用正則表達式封裝在一個對象中便於使用

var re = {
    email: /\w+@[a-z0-9]+(\.[a-z]+){1,3}/,
    chinese: /[\u4e00-\u9fa5]/,
    qq: /^[1-9]\d{4,11}$/,
    id: /[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x/i,
    trim: /^\s+|\s+$/
}
相關文章
相關標籤/搜索