正則表示式匹配所有script及其內容_正則表示式

阿新 • • 發佈：2021-02-19

技術標籤：正則表示式匹配所有script及其內容

好好學習，天天向上

本章主要內容是：介紹、語法、一些方法、組成、術語、量詞、分組、或操作符、分組的反向引用、中文字元

一、正則表示式的介紹

正則表示式：（Regular Expression）用於匹配規律規則的表示式，正則表示式最初是科學家對人類神經系統的工作原理的早期研究，現在在程式語言中有廣泛的應用，正則表通常被用來檢索、替換那些符合某個模式(規則)的文字
正則表示式是對字串操作的一種邏輯公式，就是用事先定義好的一些特定字元、及這些特定字元的組合，組成一個“規則字串” ，這個“規則字串”用來表達對字串的一種過濾邏輯

正則表示式的作用

給定的字串是否符合正則表示式的過濾邏輯(匹配)
可以通過正則表示式，從字串中獲取我們想要的特定部分(提取)
強大的字串替換能力(替換)

線上測試正則：https://c.runoob.com/front-end/854

二、正則表示式的語法

在 JavaScript 中，正則表示式也是物件，是一種索引型別
使用一個正則表示式字面量是最簡單的方式，兩個 / 是正則表示式的定界符
你可以通過下面兩種方法建立一個正則表示式：
- 使用一個正則表示式字面量，如下所示：
  - var reg = /abc/; 正則表示式字面量在指令碼載入後編譯，若你的正則表示式是常量，使用這種方式可以獲得更好的效能
- 呼叫 RegExp 物件的建構函式，如下所示：
  - var re = new RegExp("abc");

<script>
    // 第一種方法，正則字面量
    var reg = /abc/;
    // 第二種，通過建構函式建立
    var reg1 = new RegExp("abc");
</script>

三、正則表示式的一些方法

字串方法

split() 根據匹配字串切割父字串
match() 使用正則表示式與字串相比較，返回一個包含匹配結果的陣列
search() 對正則表示式或指定字串進行搜尋，返回第一個出現的匹配項的下標
replace() 用正則表示式和字串直接比較，然後用新的子串來替換被匹配的子串

正則表示式方法

exec() 在目標字串中執行一次正則匹配操作

test() 測試當前正則是否能匹配目標字串

1、String：split

根據匹配字串切割父字串

<script>
    var str = "aa bbb   cc  dd  eeeee";
    // 使用一個空格字元進行的精確分割
    var arr = str.split(" ");
    console.log(arr);
    // 使用正則表示式可以進行模糊匹配分割
    // s 表示空白 + 表示更多 
    var arr1 = str.split(/s+/);
    console.log(arr1);

    var str2 = "bbaacaaaadddaeeeeeaaf";
    var arr2 = str2.split(/a+/);
    console.log(arr2);
</script>

2、String：search

尋找匹配字串在父字串中位置

<script>
    // search 方法 查詢子串在父串出現的位置
    var str = "abcdefg";
    // console.log(str.search("cd"));
    console.log(str.search(/cdf/)); // 不存在返回 -1
</script>

3、String：match

在父字串中尋找匹配字串

<script>
    // macth 方法 在父字串中去匹配符合的子字串，將結果輸出到陣列中
    var str = "abbcccbbbbbddbbbdabbb";
    // var arr = str.match(/b+/); 匹配到第一個之後就會結束
    var arr = str.match(/b+/g); // 如果有全域性修飾符 g，會在找到所有匹配後結束
    console.log(arr);
    var str1 = "aaaa o o bbb o o aaa";
    var arr1 = str1.match(/os+o/g); // 以 o 開頭，中間有空格 o 結束
    console.log(arr1);
</script>

4、String：replace

替換父字串中匹配字串

<script>
    // replace 方法 替換字串指定位置，返回值是一個新的替換後的字串，原始字串不受影響
    var str = "www.baidu.com";
    var newStr = str.replace(/hello/,"lagou");
    console.log(str);
    console.log(newStr);
</script>

5、RegExp：exec

在字串中尋找匹配字串，該方法比其他正則方法或字串方法支援的更復雜

<script>
    // exec 方法 查詢匹配的字串，輸出到陣列中
    // 不論有沒有全域性修飾符，都只會在找到第一個之後停止
    var str = "aaaabccccbacabc";
    var reg = /abc/;
    var arr = reg.exec(str);
    console.log(arr);
</script>

6、RegExp：test

檢測字串是否匹配正則表示式

<script>
    // test 方法： 檢測字串中是否滿足正則表示式的匹配規則，返回值是布林值
    var reg = /abc/;
    var reg2 = /s/;
    console.log(reg.test("aaaabccccbacabcffff"));
    console.log(reg2.test("a bc"));
    console.log(reg2.test("abc"));
</script>

四、正則表示式的組成

由一些普通字元和一些特殊字元（又叫元字元--metacharacters）組成。普通字元包括大小寫的字母和數字，而元字元則具有特殊的含義
特殊字元：javascript 中常用特殊字元有 ( ) [ ] { } ^ $ | ? * + .
若想匹配這類字元必須用轉移符號如：(,^ ,
預定義特殊字元：
- t /t/ 製表符 eg: console.log(/t/.test(' '))
- n /n 回車符 eg: console.log(/n/.test(`aaa bbb`));
- f /f/ 換頁符
- b /b/ 空格

<script>
    // 普通字元組成的正則
    var reg = /abc/;
    // 表示正則匹配是，需要進行精確匹配，必須包含abc三個字元，並且順序不能顛倒，還要連續書寫
    console.log(reg.test("dsadsadsafgvxc")); // false
    console.log(reg.test("dsadsadsabcfgvxc")); // true

    // 特殊字元，匹配字串中對應的普通的符號字元時，需要進行轉義
    var reg2 = /*/;
    var reg3 = /a*/;
    console.log(reg2.test("dsad*dvd")); // true
    console.log(reg3.test("dsad*dvd")); // false

    // 預定義特殊字元
    // 一些特殊的字串不能在正則中直接書寫相同的符號，正則中提供了一些替換寫法
    // var reg4 = /t/; // 會有相容問題
    var reg4 = /s/;
    console.log(reg4.test("  "));

    var str = `dwad
    sf`;
    console.log(/n/.test(str));
</script>

五、正則表示式的術語

1、字符集

簡單類: 正則的多個字元對應一個字元，我們可以用 [] 把它們括起來，讓 [] 這個整體對應一個字元[abc]
- 例子：o[usb]t——obt、ost、out
範圍類: 有時匹配的東西過多，而且型別又相同，全部輸入太麻煩，我們可以在中間加了個橫線。[a-z]、[0-9]、[A-Z]
- 例子：id[0-9]——id0、id5
負向類: [] 前面加個元字元進行取反，表示匹配不能為括號裡面的字元。[^a]
- 例子：o[^0-9]t——oat、o?t、o t
組合類: 允許用中括號匹配不同型別的單個字元。[0-9a-b]
- 例子：o[0-9a-b]t——oat、o?t、o

<script>
    // 字符集 使用 [] 表示的可能的字元的集合，集合內部可以排列多個匹配字串，整個字符集匹配的是字串中的一個字元
    // []  --> 字串中的一個字元，多選一的效果，有一個滿足就算匹配成功

    // 簡單類 多個可能匹配的字元連續書寫在一起，只要其中一個匹配即可
    var reg = /[abc]/;
    console.log(reg.test("eec")); // true
    console.log(reg.test("eea")); // true
    console.log(reg.test("eee")); // false

    // 範圍類 將匹配同一型別且連續在一起的字元寫到集合中，中間使用一個小橫線連結
    var reg2 = /[0-9]/;
    console.log(reg2.test("ee1")); // true
    console.log(reg2.test("ee10")); // true
    console.log(reg2.test("eee")); // false

    // 負向類 取反的意思，不包含字符集內部書寫的字元
    var reg3 = /[^0-9]/;
    console.log(reg3.test("eee312")); // true
    console.log(reg3.test("312"));  // false

    // 組合類 單一型別或者簡單類不能匹配所有結果 可以將多個寫法連在一起書寫
    // 特殊 如果數字、大寫字母、小寫字母，按照這種順序寫的完整範圍，可以縮寫
    var reg5 = /[0-z]/;
    var reg4 = /[0-9a-z ]/;
    console.log(reg4.test("Aa"));  // true
    console.log(reg5.test("Aaad13")); // true
</script>

2、修飾符

g 修飾符用於執行全域性匹配（查詢所有匹配而非在找到第一個匹配後停止）
- '12a34b56c78d90e'.match(/d+/) => ["12"]
- '12a34b56c78d90e'.match(/d+/g) => ["12", "34", "56", "78", "90"]
i 修飾符用於執行對大小寫不敏感的匹配
- 'aabAAcAa'.match(/aa/g) => ["aa"]
- 'aabAAcAa'.match(/aa/gi) => ["aa", "AA", "Aa"]

<script>
    // g 修飾符 可以實現全域性查詢
    var str = "aabbbcccopppdklkljojnbb";
    var reg = /b+/g;
    console.log(str.match(reg));

    // i 修飾符 字母大小寫不敏感 a 可以匹配 a 或 A
    var reg2 = /B+/i;
    var reg3 = /B+/ig;
    console.log(str.match(reg2));
    console.log(str.match(reg3));
</script>

3、邊界

^ 開頭注意不能緊跟於左中括號的後面
$ 結尾

<script>
    // ^ 表示限制開頭，後面的正則內容匹配的結果必須出現在字串開始
    var str = "hello JavaScript";
    console.log(/^hello/.test(str)); // true
    console.log(/^hhello/.test(str)); // false

    // $ 限制結尾，前面的正則內容匹配的結果必須出現在字串結尾
    console.log(/Script$/.test(str)); // true
    console.log(/$Script oo$/.test(str)); // false

    // 實際應用中，會同時限制開頭和結尾
    console.log(/^hellos+JavaScript$/.test(str)); // true
    var str2 = "hello aa JavaScript";
    console.log(/^hellos+JavaScript$/.test(str2)); // false
</script>

4、預定義類

. [^nr] 除了換行和回車之外的任意字元
d [0-9] 數字字元
D [^0-9] 非數字字元
s [ tnx0Bfr] 空白字元
S [^ tnx0Bfr] 非空白字元
w [a-zA-Z_0-9] 單詞字元(所有的字母/數字/下劃線)
W [^a-zA-Z_0-9] 非單詞字元

<script>
    // 非回車非換行字元 .
    console.log(/^.+$/.test(`acxv213&*^%()`)); // true
    console.log(/^.+$/.test(`acxv213 
    &*^%()`)); // false

    // d 數字字元 D 非數字字元
    console.log(/^d+$/.test(`134141`)); // true
    console.log(/^d+$/.test(`134141aa`)); // false
    console.log(/^D+$/.test(`134141`)); // false
    console.log(/^D+$/.test(`adsds`)); // true

    // s 空白字元  S 非空白字元
    console.log(/^s+$/.test(`   `)); // true
    console.log(/^s+$/.test(`  1 `)); // false
    console.log(/^S+$/.test(`   `)); // false
    console.log(/^S+$/.test(`1`)); // true

    // w 單詞字元 W 非單詞字元
    console.log(/^w+$/.test(`ad11_11`)); // true
    console.log(/^w+$/.test(`ad1*1_11`));  // false
    console.log(/^W+$/.test(`ad11_11`)); // false
    console.log(/^W+$/.test(`*&^%$`));  // true
</script>

5、量詞

{n} 硬性量詞對應零次或者n次
{n,m} 軟性量詞至少出現n次但不超過m次(中間不能有空格)
{n,} 軟性量詞至少出現n次(+的升級版)
? 軟性量詞出現零次或一次
* 軟性量詞出現零次或多次(任意次)
+ 軟性量詞出現一次或多次（至少一次）

<script>
    // {n} 硬性量詞 對應前面的內容必須在字串中出現 n 次連續
    var regn = /^d{5}$/;
    console.log(regn.test("1234")); // false
    console.log(regn.test("12345")); // true
    console.log(regn.test("123456")); // false

    // {n,m} 軟性量詞 對應前面的內容必須在字串中出現 n 到 m 次連續
    var regnm = /^d{5,7}$/;
    console.log(regnm.test("1234")); // false
    console.log(regnm.test("12345")); // true
    console.log(regnm.test("123456")); // true
    console.log(regnm.test("1234567")); // true
    console.log(regnm.test("12345678")); // false

    // {n,} 軟性量詞 對應前面的內容必須在字串中出現至少 n 次連續
    var regn2 = /^d{2,}$/;
    console.log(regn2.test("1")); // false
    console.log(regn2.test("1234")); // true

    // ? 軟性量詞 前面的內容出現 0 次或 1 次  等價於 {0,1}
    var reg3 = /^d?$/;
    console.log(reg3.test("")); // true
    console.log(reg3.test("1")); // true
    console.log(reg3.test("1234")); // false

    // * 軟性量詞 前面的內容出現 0 次或任意次  等價於 {0,}
    var reg4 = /^d*$/;
    console.log(reg4.test("")); // true
    console.log(reg4.test("1")); // true
    console.log(reg4.test("1234")); // true

    // + 軟性量詞 前面的內容出現 1 次或任意次  等價於 {1,}
    var reg4 = /^d+$/;
    console.log(reg4.test("")); // false
    console.log(reg4.test("1")); // true
    console.log(reg4.test("1234")); // true
</script>

6、分組

雖然量詞的出現，能幫助我們處理一排密緊密相連的同類型字元。但這是不夠的，我們用中括號表示範圍內選擇，大括號表示重複次數。如果想獲取重複多個字元，我們就要用小括號進行分組了

<script>
    // 分組
    // var reg = /^byebye$/;
    var reg = /^(bye){2}$/; // bye 出現 2 次
    console.log(reg.test("byebye")); // true
    console.log(reg.test("bye")); // false
</script>

7、或操作符

可以使用豎線（|）字元表示或者的關係。
/a|bcd/ 匹配 a 或 bcd 字元
/(ab)+|(cd)+/ 匹配出現一次或多次的 ab 或者 cd

<script>
    //  或操作符 |
    var reg = /^a|bcd$/; 
    console.log(reg.test("ccbcd")); // true
    console.log(reg.test("accbcda")); // true
    console.log(reg.test("ccbcda")); // false

    // 在正則中，兩個規則之間只能選其中一個，不能包含其他的開頭結尾，需要去將或運算放在分組裡
    var reg2 = /^(ab|bcd)$/; 
    console.log(reg2.test("abbcd")); // false
    console.log(reg2.test("ab")); // true
    console.log(reg2.test("bcd")); // true
</script>

8、分組的反向引用

反向引用標識是對正則表示式中的匹配組捕獲的子字串進行編號，通過“編號(在表示式中)” ， “$編號（在表示式外）”進行引用。從1開始計數

<script>
    // 正則中溝通過分組匹配到的字串，會進行編號，從 1 開始
    // 正則內部可以通過 1 方式，對字串進行反向引用
    console.log(/^([a-z]{3})1$/.test("byebye")); // true
    console.log(/^([a-z]{3})1$/.test("byebbb")); // false

    // 正則以外通過 $1 進行字串的引用
    var str = "123*456".replace(/^(d{3})*(d{3})$/,"$2*$1");
    console.log(str); // 456*123
    // 第二個引數可以是一個函式
    var str2 = "123*456".replace(/^(d{3})*(d{3})$/, function (match, $1, $2){
        return $1 * 2 + "/" + $2 * 2;
    });
    console.log(str2); // 246/912
</script>

9、中文字元

匹配中文：[u4e00-u9fa5]

<script>
    var reg = /^[u4e00-u9fa5]+$/;
    var reg2 = /^[a-zu4e00-u9fa5]+$/;
    console.log(reg.test("只有中文文字")); // true
    console.log(reg.test("只有中文文字a")); // false
    console.log(reg2.test("只有中文文字a")); // true
</script>