JavaScript 中特別的類型 —— RegExp類型 正則表達式

第一次接觸正則表達是在上學期編譯原理的課上,這個課裏有講正則表達的。當時就是隨便聽聽,也瞭解一些,這幾天學習了JavaScript中的正則表達,大概的內容都是一樣的,具體有什麼不同,暫時不知道哎,因爲課上學的都忘記的差不多了(尷尬),目前記得的都是重新輸入的知識,咯咯咯咯咯。

正則表達在很多語言中都有,它是一個獨立的存在。正則表達這個名字聽起來很高級的樣子,其他它簡單來說就是匹配字符串,按照自定義的匹配模式去匹配符合匹配模式的字符。那什麼叫匹配模式呢,就是檢測字符的標準,比如檢測字符串中是否含有abc字符串,其中abc就是一個匹配模式。
ok,接下來就一點一點的介紹正則了啊。

匹配模式的三種標誌

g:表示全局模式,就是會檢測整個全部的字符串,在發現第一個匹配項後不返回。
i:表示忽略大小寫,在這個模式下A和a是一樣的。
m:表示多行模式,在這個模式下可以匹配含有換行的字符串。

創建正則表達式

創建正則表達式有兩種方式,第一字面量;第二使用RegExp類型。
字面量://匹配模式。//之間寫匹配的字符。

        //看str字符串中是否含有abc字符串
        var reg = /abc/;
        var str = "abcabc";
        console.log(reg.test(str));

RegExp類型:new RegExp(字符串,“匹配模式”)
RegExp本質是一個函數,支持正則表達的構造函數,使用new關鍵字,來實例化對象。
在這裏插入圖片描述
上面reg變量的創建,換成RegExp創建。

        var str = new RegExp("abc","g");

正則中的元字符

        //  元字符
        // \w === [0-9A-z_]
        // \W === [^\w]
        // \d === [0-9]
        // \D === [^\d]
        // \s === [\r\n\t\v\f ] --> 查找空白字符 行結束符、換行、tab鍵、空格、\v \f
        // \S === [^\s]
        // \b === 單詞邊界 單詞邊界是指字旁邊的光標位置
        // \B === 非單詞邊界
        // . === [^\r\n] \r -->行結束符 \n --> 換行 
        // ^開頭,結尾$

舉個栗子:

        var reg = /\s/g;
        var str = "abc123"; // str中沒有空白字符
        console.log(reg.test(str)); // false

正則中的量詞

下面的n表示的是任意字符或者字符串。

        //  量詞 貪婪匹配 能多就不少
        // n* {0,} 0-無窮
        // n+ {1,無窮} 1-無窮
        // n? {0,1}
        // n{x} x個
        // n{x,y} x-y個 --> 能匹配到y個就不會匹配x個
        // n{x,} x-無窮個

在任何正則後面加?就會去除貪婪匹配 加?就會能少就不多
a?? 第一個?是量詞指0-1個 ;第二個?是去除貪婪匹配在0-1之間取0 ——> 空

舉個栗子:

        var reg3 = /a?/g;
        var str = "abcabc";
        console.log(reg3.test(str)); // true 永遠爲true

		var reg3 = /d?/g;
        console.log(reg3.test(str));

正則中的正向預查

正向預查的名字依然是這麼高大上,它的本質含義就是限定條件。
n?=:表示匹配後面緊跟的是指定字符的字符。n代表的是字符。

  • eg:/a(?=b)/g
    表示匹配後面緊跟着的是b字符的字符a。也就是說a字符後面緊跟着的必須是b才能匹配上。這就是正向預查,其中b字符也就是“ = ”後面的字符不參與匹配只參與限定。 正向預查還用一種形式,就是非的狀態。

n?!:表示匹配後面緊跟的是非指定字符的字符。n代表的是字符。

  • eg:/a(?!b)/g
    表示匹配後面緊跟着非b字符的字符a。也就是說匹配的a字符是後面緊跟着除了b以外其他的任何字符。

正則中的表達式

[ ] :表示一位數,[]裏面的字符表示範圍
{ }:表示位數,{ }裏面的數字表示字符的位數
( ):普通的數學符號,有提高權重先運算的標誌。()後面可以用作反向引用。
書上介紹說()包含的字符是捕獲組,我看的視頻裏的老師說()包含的字符叫子表達式。emmmm,我偏向於理解子表達式,我感覺捕獲組不理解不知道是什麼意思。大家可以根據自己的理解看是記子表達式還是記捕獲組。

匹配字符串中2或者9。

        var part = /[2,9]/g;
        var strPart = "12";
        console.log(part.test(strPart));

匹配由字母和數字以及下劃線組成的6-16位字符串。

        var regMod = /^\w{6,16}$/g;
        var modStr = "12345_";
        console.log(regMod.test(modStr));

正則表達常用的方法

test(字符串):檢測字符串是否與匹配模式匹配,匹配則返回true,否則返回false。
exec(字符串):檢測字符串是否與匹配模式匹配,返回值是含有匹配項的數組。

test方法比較簡單,就不演示了。最重要的是exec方法。
exec()方法跟一個屬性是配套使用的。
lastIndex:表示匹配項位置的索引。這個屬性在g標誌下是會發生變化的。

        var reg = /.bc/g;
        var str = "abcbbccbc";
        // 在全局模式下 可以尋找多個匹配項 返回數組中的index值取的是lastIndex的值
        // lastIndex的值在全局下是會變化的
        console.log(reg.lastIndex);
        console.log(reg.exec(str));
        console.log(reg.lastIndex);
        console.log(reg.exec(str));
        console.log(reg.lastIndex);
        console.log(reg.exec(str));

其中數組中index屬性的值就是取的lastIndex的值。當再在控制檯輸出lastIndex的值時,會發現lastIndex的值會自動到下一個匹配項的位置。這就體現了lastIndex在g標誌下會發生變化的效果。但是當我們把g標誌去掉時,index值會一直是0,因爲只匹配了一個符合的字符串。
在這裏插入圖片描述

lastIndex屬性我們也可以修改,當修改後exec方法會自動的給我們返回對應的數組。
在這裏插入圖片描述

字符類型支持正則的方法

replace

正則使用最多的是字符串的方法。其中最常用的是replace方法。
replace(“替換的字符串”,“被替換的字符串”)。
replace()方法有兩個參數,第一個參數:表示要替換爲的字符串;第二個參數:表示被替換的字符串,但是第二個參數也可以爲一個函數。
replace方法正常的使用就是一個字符替換爲另一個字符,但它只會替換第一次滿足的字符,如下面的代碼:

        var str = "abcbbccbc";
        console.log(str.replace("b", "G")); // 只會替換第一個

replace()方法中的第一個參數爲正則表達式時,在g標誌下就可以替換多個滿足的字符。

        var reg1 = /b/g;
        var str = "abcbbccbc";
        console.log(str.replace(reg1, "G")); // g下可替換多個

在這裏插入圖片描述
replace方法第二個參數爲函數時,這個函數有三個常用的參數:match(匹配的字符串)、ops(匹配字符串的位置)、originStr(原始字符串)。還有關於子表達式的參數,通常是用$n,這個n的值在0-9之間。$1表示反向引用第一個子表達式的內容、$2表示反向引用第二個子表達式的內容,往後以此類推。

反向引用

其中\1是引用第一個(\w)也就是第一個子表達式的內容,\2是第二個子表達式的內容。

        // eg:把形如aabb的字符替換成bbaa
        var ex = /(\w)\1(\w)\2/g; // 匹配aabb字符串
        var exStr = "aabb";
        // $n :獲取的是第n個子表達式的內容  n:1-9
        console.log(exStr.replace(ex, "$2$2$1$1")); // 把aabb替換成bbaa  使用$引用子表達式的內容

再舉個栗子:
下面replace方法的第一個參數是正則表達,第二個參數是一個函數。函數傳了兩個參數,第一個參數$代表的是匹配項,$1代表的是第一個子表達式的內容。最後函數的返回值是大寫字母的字符串。首先把(-\w)匹配的字符替換掉,然後反向引用(\w)讓其字符變大寫,這就實現了小駝峯命名方式。

        // eg:the-first-name ---> theFirstNames
        var change = /-(\w)/g;
        var cStr = "the-first-name";
        console.log(cStr.replace(change, function ($, $1) {
            return $1.toUpperCase();
        }));

在這裏插入圖片描述
是不是會疑惑爲啥我只傳了兩個參數,不要着急這就來解釋其他的參數,哈哈哈哈哈。

        console.log(cStr.replace(change, function ($, $1, pos, originStr) {
            console.log($); // 匹配項
            console.log(pos); // 匹配項的位置
            console.log(originStr); // 原始字符串
            return $1.toUpperCase();
        }));

在這裏插入圖片描述
通過結果會發現,有兩個匹配項,每個匹配項對應自己的位置,但是原始字符串是一樣的。顯然如果要打印$1的話對應的就是f和n。

match

match方法與正則表達的exec方法的效果非常相似的,傳的參數是正則表達,返回值是包含匹配項的字符串的數組。

        var reg = /.bc/g;
        var str = "abcbbccbc";
        // 2. 字符串正則方法
        // match(正則) 返回數組 與正則的exec方法相似
        // 在g模式下可以匹配多個 默認不在g下 只匹配一個符合的字符串
        console.log(reg.lastIndex);
        console.log(reg.exec(str));
        console.log(reg.lastIndex);
        console.log(reg.exec(str));
        console.log(reg.lastIndex);
        console.log(reg.exec(str));
        
        console.log(str.match(reg));


暫時呢,就挖掘了這麼多。這篇博客我斷斷續續的寫了三天,都不敢想。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章