JavaScript || 正則表達(dá)式

edgardeng 發(fā)布于2019-08-20 15:11 / 2071人閱讀

摘要：方法的參數(shù)正則表達(dá)式是變量，必須使用方式創(chuàng)建方法的第二個(gè)參數(shù)可以是回調(diào)函數(shù)，其參數(shù)是每次匹配成功獲取的字符串。

1 為什么要用正則表達(dá)式？

學(xué)習(xí)之前，多想想為什么要使用正則表達(dá)式，有助于理解。

正則表達(dá)式regular expression使用單個(gè)字符串來(lái)描述某個(gè)句法規(guī)則，計(jì)算機(jī)根據(jù)規(guī)則去匹配字符串中的內(nèi)容。

正則表達(dá)式的性能高于常規(guī)字符串操作（省略循環(huán)、遍歷等操作）

正則表達(dá)式僅用于字符串的操作

2 常規(guī)字符串操作與正則表達(dá)式的比較

要提取出字符串中"ashx521dasbx34sasdz275dasdzxd897"中連續(xù)的數(shù)字，并將結(jié)果保存在數(shù)組中["521", "34", "275", "897"]

傳統(tǒng)字符串操作：需要遍歷整個(gè)字符串，判斷每個(gè)字符是否在"0"-"9"之間再進(jìn)行相應(yīng)的操作

/**
 * 使用一個(gè)暫時(shí)變量tmp保存連續(xù)為數(shù)值時(shí)的字符串，間斷后再統(tǒng)一加入數(shù)組內(nèi)；
 * 可能會(huì)出現(xiàn)最后一位是數(shù)字的情況，所以使用i<=str.length多走一次循環(huán)的else路徑，將最后一組數(shù)組加入數(shù)組
 * 
 */
function findNum_two(str) {
    var arr = [];
    var tmp = "";
    // 遍歷字符串，取出需要的數(shù)字
    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" ]

使用正則表達(dá)式：只需使用字符串的match()方法去匹配指定的規(guī)則（正則表達(dá)式即可）

function findNum (str) {
    return str.match(/d+/g);
}

console.log(findNum(str));   // [ "521", "34", "275", "897" ]

3 正則表達(dá)式寫(xiě)法

字面量寫(xiě)法：var re = /d+/gi;

構(gòu)造函數(shù)寫(xiě)法：var re = new RegExp("d+", "gi");注意兩個(gè)，因?yàn)镴avaScript中需要轉(zhuǎn)義

3.1 正則表達(dá)式中的轉(zhuǎn)義字符

轉(zhuǎn)義字符：多帶帶使用字母本身有意義；在前面加上后改變?cè)幸饬x

3.2 量詞

用來(lái)描述相鄰的前面的單個(gè)字符匹配規(guī)則出現(xiàn)的次數(shù)

量詞使用{a, b}表示，其中b可以省略，意義不同

3.3 字符類(lèi)

使用[]描述一類(lèi)字符，整體只代表一個(gè)字符，表示該字符在某個(gè)范圍內(nèi)。

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

[]多種規(guī)則是或 |的關(guān)系：[0-9a-zA-Z]等

整個(gè)字符類(lèi)[0-9a-zA-Z]只代表一位字符

注意，字符類(lèi)中的^表示非的意思，不在某個(gè)范圍內(nèi)：[^d]表示非數(shù)字的字符

3.4 修飾符

g--global：全局匹配，找到所有的匹配項(xiàng)，不是在第一個(gè)匹配后停止

i--ignored：忽略大小寫(xiě)

m：多行，將開(kāi)始字符^和結(jié)束字符$視為在多行上工作（每匹配一行的開(kāi)始和結(jié)束以和分割）

u：將模式視為Unicode序列點(diǎn)的序列

3.5 匹配子項(xiàng)

對(duì)于復(fù)雜的正則表達(dá)式，可以使用()將其拆分為多個(gè)部分，在replace(re, fn)回調(diào)函數(shù)中可以簡(jiǎn)化匹配內(nèi)容的操作

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

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

$0代表正則表達(dá)式本身匹配到的內(nèi)容：(d+)(w)(S)

$1代表正則表達(dá)式的第一個(gè)匹配子項(xiàng)：(d+)

$2代表正則表達(dá)式第二個(gè)匹配子項(xiàng)：(w)

...

3.6 重復(fù)子項(xiàng)

主要用于匹配字符串中重復(fù)的字符

var re = /(a)(b)(c)1/; ：1表示重復(fù)的第一個(gè)子項(xiàng)(b)，第4個(gè)位置的字符與第1個(gè)位置的字符相同

var re = /(a)(b)(c)2/; ：2表示重復(fù)的第二個(gè)子項(xiàng)(b)，第4個(gè)位置的字符與第2個(gè)位置的字符相同

var re = /(a)(b)(c)3/; ：3表示重復(fù)的第三個(gè)子項(xiàng)(c)，第4個(gè)位置的字符與第3個(gè)位置的字符相同

...

3.7 邏輯或|

使用|代表邏輯或，|左右兩個(gè)操作數(shù)只要有一個(gè)滿(mǎn)足要求即可

3.8 開(kāi)始、結(jié)束標(biāo)記

不在[]中使用^，^表示以最近的匹配字符規(guī)則開(kāi)始整個(gè)匹配；

$表示以最近的匹配規(guī)則結(jié)束匹配

作用范圍只是^之后的第一個(gè)子項(xiàng)；$前的第一個(gè)子項(xiàng)

4 正則表達(dá)式的方法

主要有4中方法用于操作正則表達(dá)式：

match()、replace()、search()是字符串的操作方法

test()、exec()是正則表達(dá)式對(duì)象的操作方法

4.1 test()

根據(jù)RegExp去匹配字符串，如果匹配成功，返回true；匹配失敗返回false。主要用于邏輯判斷

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

re.test(str);   // true

4.2 search()

根據(jù)RegExp去匹配字符串，返回第一個(gè)匹配成功字符串的首字符的索引；匹配失敗返回-1。用于查找字符的索引，類(lèi)似字符串的indexOf()方法

str.search(re)

4.3 match()

根據(jù)RegExp去匹配字符串，如果匹配成功，將匹配的結(jié)果保存在數(shù)組中返回；匹配失敗返回null。默認(rèn)第一次匹配后便停止繼續(xù)匹配，使用修飾符g進(jìn)行全局匹配

str.match(re)

4.4 replace(re, newstr)方法

根據(jù)RegExp去匹配字符串，如果匹配成功，將匹配的字符串更換為新的字符串newstr。
replace()方法的參數(shù)re正則表達(dá)式是變量，必須使用new RegExp()方式創(chuàng)建re

var str = "a23gb";
var re = /d+/;

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

replace()方法的第二個(gè)參數(shù)可以是回調(diào)函數(shù)，其參數(shù)是每次匹配成功獲取的字符串。每次匹配成功都會(huì)執(zhí)行一次回調(diào)函數(shù)

5 實(shí)踐 5.1 找到一個(gè)字符串中出現(xiàn)次數(shù)最多的字符及其出現(xiàn)的次數(shù)

var str = "1231asdaegj71836178asdhasssasalsdhdzxbczaslazxcnnffajshdhgagsgdssssasdzzxda";

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

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

var length = 0;
var val = "";   // 保存出現(xiàn)次數(shù)最多的字符

// $0代表每次匹配到的字符，$1代表第一個(gè)正則表達(dá)式子項(xiàng)(w)
str.replace(re, function ($0, $1) {  // 可以將匹配的字符當(dāng)做變量操作
    if($0.length > length) {
        length = $0.length;
        val = $1;    // $1代表每次匹配的字符
    }
});
console.log(length);
console.log(val);

5.2 去掉字符串前后的空格

var re = /^s+|s+$/g;，使用字符串應(yīng)用正則即可:str.replace(re, "")

5.3 常用正則匹配規(guī)則

QQ號(hào)：var re = /^[1-9]d{4,11}$/; ：第一位是1-9中的數(shù)字，最后也是數(shù)字，總共5-12位

中文匹配：var re = /[u4e00-u9fa5]/;：使用Unicode編碼進(jìn)行匹配

email：var re = /w+@[a-z0-9]+(.[a-z]+){1,3}/;：可能出現(xiàn).com.cn.net

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

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

5.3 將常用正則表達(dá)式封裝在一個(gè)對(duì)象中便于使用

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+$/
}