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(/[^,]+/);
// ["", ",", ",", ",", ""] 如果分隔符在開頭和結尾出現,數組的前后就會出現空字符串元素


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM