【重溫基礎】9.正規表示式

pingan8787發表於2019-02-16

本文是 重溫基礎 系列文章的第九篇。
今日感受：時間管理-角色管理法。

系列目錄：

本章節複習的是JS中的正規表示式，JS中用來匹配字串的強大工具。

前置知識：
JS中的正規表示式是用來匹配字串中指定字元組合的模式。
另外需要記住：正規表示式也是物件。

1.建立正規表示式

  • 使用一個正規表示式字面量：
let reg = /ab+c/;
let reg = /^[a-zA-z]/gi;
  • 使用RegExp物件：

new RegExp(str[, attr])接收2個引數，str是一個字串，指定正規表示式匹配規則，attr可選，表示匹配模式，值有g(全域性匹配),i(區分大小寫的匹配)和m(多行匹配)。

let reg = new RegExp(`ab+c`);
let reg = new RegExp(/^[a-zA-z]/, "gi");
let reg = new RegExp("^[a-zA-z]", "gi");

正規表示式的返回值，是一個新的RegExp物件，具有指定的模式和標誌。
返回資訊介紹：

物件 屬性 描述 案例中對應的值
reg lastIndex 下一個匹配的索引（僅在使用g引數時可用） 0
reg source 模式文字。在正規表示式建立時更新，不執行。 "ab+c"
reg ignoreCase 是否使用了 “i” 標記使正則匹配忽略大小寫。 true
reg global 是否使用了 “g” 標記來進行全域性的匹配。 true
reg multiline 是否使用了 “m” 標記使正則工作在多行模式。 false

關於正規表示式的一些方法屬性，文章後面介紹，這裡先複習定義和使用。

2.使用正規表示式

JS的正規表示式可以被用於：

  • RegExp物件的exec和test方法；
  • String物件的match、replace、search和split方法。

2.1 RegExp物件方法

方法 介紹
exec 檢索字串中指定的值。返回找到的值，並確定其位置。
test 檢索字串中指定的值。返回 true 或 false。

2.1.1 exec(str)

str: 需要檢索的字串。
若檢索成功，返回匹配的陣列，否則返回null。

let str = "hello leo!";
let reg = new RegExp("leo", "g");
let result = reg.exec(str);
// 也可以寫成
let result = /leo/g.exec("hello leo!");

/*
[
    0: "leo",
    groups: undefined,
    index: 6,
    input: "hello leo!",
    length: 1
]
*/

let result2 = /(leo S)/g.exec("hello leo hi leo!");
/*
    0: "leo hi"
    1: "leo hi"
    2: "hi"
    groups: undefined
    index: 6
    input: "hello leo hi leo!"
    length: 3
*/

返回資訊介紹：

物件 屬性 描述 案例中對應的值
result [0] 匹配到的所有字串 "leo"
result input 初始字串。 "hello leo!"
result index 在輸入的字串中匹配到的以0開始的索引值。 6
result2 [1],...,[n] 括號中的分組捕獲 [1]=> "leo hi";[2] => "hi"

2.1.2 test(str)

str:需要檢索的字串。
若匹配成功返回true否則false。
等價於 reg.exec(str) != null。

let str = "hello leo!";
let res = /^leo/.test(str);   // fasle
let res1 = /^leo/.test(str);  // true

^str表示匹配以str開頭的字串，這些符號文章後面會介紹。

2.2 String物件方法

方法 介紹
search 檢索與正規表示式相匹配的值。
match 找到一個或多個正規表示式的匹配。
replace 替換與正規表示式匹配的子串。
split 把字串分割為字串陣列。

2.2.1 search

str.search(reg)：
str:被檢索的源字串。
reg:可以是需要檢索的字串，也可以是需要檢索的RegExp物件，可以新增標誌，如i。

若檢索成功，返回第一個與RegExp物件匹配的字串的起始位置，否則返回-1。

let str = "hello leo!";
let res = str.search(/leo/g);  // 6

let str1 = "hello leoleoleoleo!";
let res1 = str.search(/leo/g); // 6
let res2 = str.search(/pingan/g); // -1

2.2.2 match

str.match(reg)：
str:被檢索的源字串。
reg:可以是需要檢索的字串，也可以是需要檢索的RegExp物件，可以新增標誌，如i。

若檢索成功，返回與reg匹配的所有結果的一個陣列，陣列的第一項是進行匹配完整的字串，之後的項是用圓括號捕獲的結果，否則返回null。

let str = `For more information, see Chapter 3.4.5.1`;
let reg = /see (chapter d+(.d)*)/i;
let result = str.match(reg);
/*
logs [ `see Chapter 3.4.5.1`,
       `Chapter 3.4.5.1`,
       `.1`,
       index: 22,
       input: `For more information, see Chapter 3.4.5.1` ]
*/

`see Chapter 3.4.5.1` 是整個匹配。
`Chapter 3.4.5.1` 被`(chapter d+(.d)*)`捕獲。
`.1` 是被`(.d)`捕獲的最後一個值。
`index` 屬性(22) 是整個匹配從零開始的索引。
`input` 屬性是被解析的原始字串。

2.2.3 replace

將字串中指定字元替換成其他字元，或替換成一個與正規表示式匹配的字串。
str.replace(sub/reg,val):

  • str: 源字串
  • sub: 使用字串來檢索被替換的文字
  • reg: 使用RegExp物件來檢索來檢索被替換的文字
  • val: 指定替換文字

返回替換成功之後的字串，不改變源字串內容。

let str = "hello leo!";
let res = str.replace(`leo`,`pingan`);//"hello pingan!"

val可以使用特殊變數名：

變數名 代表的值
$$ 插入一個 “$”。
$& 插入匹配的子串。
$ 插入當前匹配的子串左邊的內容。
$` 插入當前匹配的子串右邊的內容。
$n 假如第一個引數是 RegExp物件，並且 n 是個小於100的非負整數，那麼插入第 n 個括號匹配的字串。提示：索引是從1開始 
let str = "hello leo!";
let res = str.replace(/(w+)s* s*(w+)/, "$2:$1");
// "leo:hello!"

2.2.4 split

將一個字串，按照指定符號分割成一個字串陣列。
str.split(sub[, maxlength]):

  • str: 源字串
  • sub: 指定的分割符號或正則
  • maxlength: 源字串
let str = "hello leo!";
let res = str.split();   //["hello leo!"]
let res = str.split(""); //["h", "e", "l", "l", "o", " ", "l", "e", "o", "!"]
let res = str.split(" ");//["hello", "leo!"]
let res = str.split(/s+/);//["hello", "leo!"]

let res = str.split("",3);//["h", "e", "l"]

2.3 使用情況

  • 當我們想要查詢一個字串中的一個匹配是否找到，可以用test或search方法。
  • 當我們想要得到匹配的更多資訊，我們就需要用到exec或match方法。

3.正規表示式符號介紹

詳細的每個符號的用法，可以查閱 W3school JavaScript RegExp 物件

3.1 修飾符

修飾符 描述
i 執行對大小寫不敏感的匹配。
g 執行全域性匹配（查詢所有匹配而非在找到第一個匹配後停止）。
m 執行多行匹配。 
let str = "hello leo!"
let res = /Leo/i.test(str); // i 不區分大小寫 所以返回true
let res = /Leo/.test(str);  // fasle

3.2 方括號

用於查詢指定返回之內的字元：

表示式 描述
[abc] 查詢方括號之間的任何字元。
[^abc] 查詢任何不在方括號之間的字元。
[0-9] 查詢任何從 0 至 9 的數字。
[a-z] 查詢任何從小寫 a 到小寫 z 的字元。
[A-Z] 查詢任何從大寫 A 到大寫 Z 的字元。
[A-z] 查詢任何從大寫 A 到小寫 z 的字元。
[adgk] 查詢給定集合內的任何字元。
[^adgk] 查詢給定集合外的任何字元。
(red) 查詢任何指定的選項。 
let str = "hello leo!";
let res = str.match(/[a-m]/g);
//["h", "e", "l", "l", "l", "e"]
let res = str.match(/[^a-m]/g);
//["o", " ", "o", "!"]

3.3 元字元

元字元是擁有特殊含義的字元：

元字元 描述
. 查詢單個字元，除了換行和行結束符。
w 查詢單詞字元。
W 查詢非單詞字元。
d 查詢數字。
D 查詢非數字字元。
s 查詢空白字元。
S 查詢非空白字元。
匹配單詞邊界。
B 匹配非單詞邊界。

相關文章