JS中的正規表示式

王子餅乾發表於2021-05-14
JS

JS中的正規表示式

1.RegExp型別

ECMAScript通過RegExp型別支援正規表示式。

let expression = /pattern/flags;

pattern（模式）是任何正規表示式，正規表示式可以帶零個或多個flags。

常見 修飾符（標記）

修飾符 描述
g 全域性匹配查詢所有匹配項
i 忽略大小寫
m 使邊界字元 ^ 和 $ 匹配每一行的開頭和結尾，記住是多行，而不是整個字串的開頭和結尾。
y 粘附模式，表示只匹配以lastIndex為開頭的字串。(自動開啟全域性模式)
s 預設情況下的圓點 . 是 匹配除換行符 \n 之外的任何字元，加上 s 修飾符之後, . 中包含換行符 \n。

例子：

// 匹配所有以"at"結尾的三字元組合，忽略大小寫
let pattern = /.at/gi;

注：匹配元字元需要轉義


1.1RegExp建構函式

正規表示式 也可以使用RegExp建構函式來建立，它接收兩個引數：模式字串和（可選的）標記字串。

let pattern1 = /[bc]at/i;

// 跟pattern1一樣，只不過是用建構函式建立的
let pattern2 = new RegExp("[bc]at", "i");

注意：因為RegExp的模式引數是字串，所以在某些情況下需要二次轉義。具體做法是對字面量中的每個反斜槓前面再加一個反斜槓

1.2 例項屬性

每個RegExp都有用於模式資訊的例項屬性。

屬性 描述
global、ignorCase、sticky、unicode、multiline、dotAll 布林值。分別判斷是否設定了g、i、y、u、m、s標記
lastIndex 表示在源字串中下一次搜尋的開始位置，始終從0開始
source 表示式字面量字串（去掉開始和結尾斜槓）
flags 標記資訊字串

1.3例項方法

① exec()

只接收一個引數，即要應用模式的字串。

如果找到了匹配項，則返回包含第一個匹配資訊的陣列；如果沒找到匹配項，則返回null。
返回的陣列雖然是Array的例項，但包含兩個額外的屬性：index和input。

  • index：匹配到字串的起始位置。
  • input：要查詢的字串

這個陣列的第一個元素是匹配整個模式的字串，其他元素是與表示式中的捕獲組匹配的字串。如果模式中沒有捕獲組，則陣列只包含一個元素。

let text = "cat,bat";
let pattern = /([bc])at/i;

let matches = pattern.exec(text); 
//["cat", "c", index: 0, input: "cat,bat", groups: undefined]
console.log(matches[0]); // "cat"
console.log(matches[1]); // "c"
console.log(matches.lastIndex); //沒有使用全域性匹配，永遠為0

如果在這個模式上設定了g標記，則每次呼叫exec()都會在字串中向前搜尋下一個匹配項，如下面的例子所示： 
let text = "cat,bat";
let pattern = /([bc])at/gi;

let matches = pattern.exec(text); 
//["cat", "c", index: 0, input: "cat,bat", groups: undefined]
console.log(matches.lastIndex); // 3

pattern.exec(text); 
//["bat", "b", index: 4, input: "cat,bat", groups: undefined]
console.log(matches.lastIndex); // 7

pattern.exec(text); 
//null
console.log(matches.lastIndex); // 0

注：如果模式設定了粘附標記y，則每次呼叫exec()就只會在 lastIndex的位置上尋找匹配項。（自動開啟全域性模式）

如果匹配中途結束，可以通過調整lastIndex的屬性值恢復匹配。


② test()

接收一個字串引數。如果輸入的文字與模式匹配（完全匹配），則引數返回true，否則返回false。

當我們只關心是否匹配時可以使用test()。


③ 其他方法

  • toLocaleString()和toString() ：返回其字面量的字串表示。

    let r = /([bc])at/iy;
console.log(r.toString()); // "/([bc])at/iy"

  • valueOf()：返回正規表示式本身


2.4建構函式屬性(靜態屬性)

RegExp也有幾個靜態屬性 但不常用。略


2.字串匹配

1.match()

本質與RegExp的exec() 方法相同。方法接收一個引數：正規表示式物件，或表示式字串

let text = "cat,bat";
let pattern = /(.)at/i;

let matches = text.match(pattern)
//let matches = pattern.exec(text);  等價

//["cat", "c", index: 0, input: "cat,bat", groups: undefined]
console.log(matches[0]); // "cat"
console.log(matches[1]); // "c"
console.log(matches.lastIndex); //沒有使用全域性匹配，永遠為0

2.search()

查詢模式，方法接收一個引數：正規表示式物件，或表示式字串。返回模式第一個匹配的位置索引，如果沒找到則返回-1。

let text = "cat, bat, sat, fat";
let pos = text.search(/at/);
console.log(pos); // 1

3.replace()

用於替換字串，方法接收兩個引數，第一個引數為RegExp物件或字串、第二個引數為字串或函式。

  • 第一個引數為字串則只會替換第一個字串，如果全部替換，正規表示式必須帶全域性標記。

  • 第二個引數是字串時有幾個特殊字元，可用來表示匹配到的值
    $n：n為0-9，$1表示第一個捕獲組的字串

    let text = "bat, cat, fat, tat";
let pattern = /(.)at/g;

let result = text.replace(pattern,"$1$1"); //$1表示分組1 也就是at前面的字元
console.log(result); //"bb, cc, ff, tt"

  • 第二個引數是函式，函式會接收三個引數：匹配的整個字串、匹配索引、整個字串。（多個捕獲組會傳多次）。
    函式應該返回一個字串，表示替換內容。

    function htmlEscape(text) {
	return text.replace(/[<>"&]/g,
		function(match, pos, originalText) {
			switch(match) {
				case "<":
					return "&lt;";
				case ">":
					return "&gt;";
				case "&":
			        return "&amp;";
				case "\"":
					return "&quot;";
			}
		});
}
console.log(htmlEscape("<p class=\"greeting\">Hello world!</p>"));
// "&lt;p class=&quot;greeting&quot;&gt;Hello world!</p>"

4.split()

用於將字串分割為陣列，第一個引數可以是RegExp物件或字串，第二個可選引數用於指定陣列最大大小。

let colorText = "red,blue,green,yellow";
let colors1 = colorText.split(",");
// ["red", "blue", "green", "yellow"]
let colors2 = colorText.split(",", 2);
// ["red", "blue"]
let colors3 = colorText.split(/[^,]+/);
// ["", ",", ",", ",", ""] 如果分隔符在開頭和結尾出現，陣列的前後就會出現空字串元素

相關文章