【JS第14期】RegExp 詳解

定義正則表達式的方式

以字面量的形式定義正則表達式

ECMAScript 經過 RegExp 類型來支持正則表達式。語法以下：

var expression = / pattern / flags;
複製代碼

pattern 能夠是任何簡單或複雜的正則表達式，能夠包含字符類、限定符、分組、向前查找以及反向應用

flags 標明正則表達式的行爲。正則表達式的匹配模式支持下列3哥標標誌：

• g: 表示全局模式，即模式將應用於全部字符串
• i: 表示不區分大小寫模式
• m: 表示多行模式，即在到達一行文末後繼續查找下一行是否存在與模式匹配的項

模式中使用的全部元字符都必須轉義。正則表達式的元字符包括：( [ { } ] ) \ ^ $ | ? * + .等

以RegExp構造函數的形式定義正則表達式

RegExp構造函數接收兩個參數：一個是要匹配的字符串模式，另外一個是可選的標誌字符串。如：

// 匹配第一個bat 或 cat 不區分大小寫
var reg = new RegExp('[bc]at', 'i')
複製代碼

因爲RegExp構造函數的模式參數是字符串，因此在一些狀況下要對字符串進行雙重轉義，全部的元字符必須雙重轉義，那些轉義過的字符也是如此，例如\n在對象字面量中一般轉義爲\\n,而在正則表達式字符串中變成\\\\n。

兩種表達式的區別

在ECMAScript 3中，正則表達式字面量始終會共享同一個RegExp 實例， 而使用構造函數建立的每個新的RegExp 實例都是一個新的實例。

var re = null, i;
for (i = 0; i < 10; i++) {
  re = /cat/g;
  console.log(re.test('catastrophe'));
}
for (i = 0; i< 10; i++) {
  re = new RegExp('cat', 'g');
  console.log(re.test('catastrophe'))
}
複製代碼

在第一個循環中，實際上只爲/cat/建立了一個RegExp實例。因爲實例屬性不會被重置，因此在下次循環調用test()方法時會失敗。這是由於第一次調用test()找到了'cat',第二次調用是從索引爲3的自負開始，因此就找不到。因爲會測試到字符串結尾因此在下次調用是又從開頭開始了。

在第二個循環中，因爲每次循環從新建立了RegExp實例，因此每次調用都會返回true

ECMAScript 5 規定，使用字面量建立時，要與使用RegExp構造函數時同樣，每次都建立一個實例

RegExp 實例屬性

• global: 布爾值，表示是否設置了g標誌
• ignoreCase: 布爾值，表示是否設置了i標誌
• lastIndex: 整數，表示開始搜索下一個匹配項的字符串位置，從0開始
• multiline:布爾值，表示是否設置了m標誌
• source: 返回按字面量表示法表示的模式字符串

RegExp 實例方法

exec()

exec() 方法用於檢索字符串中的正則表達式的匹配。 語法 RegExpObject.exec(string) 參數

參數	描述
string	必需。要檢索的字符串

var text = 'mom and dad and baby';
var reg = /mom( and dad (and baby)?)?/gi;
console.log(reg.exec(text))
//[
//  0: "mom and dad and baby",
//  1: " and dad and baby",
//  2: "and baby",
//  groups: undefined,
//  index: 0,
//  input: "mom and dad and baby",
//  length: 3
//]
複製代碼

返回值

若是匹配成功，exec() 方法返回一個數組，並更新正則表達式對象的屬性。返回的數組將徹底匹配成功的文本做爲第一項，將正則括號裏匹配成功的做爲數組填充到後面。

返回值（數組）	描述
[0]	匹配的所有字符串
[1], ...[n ]	括號中的分組捕獲
index	匹配到的字符位於原始字符串的基於0的索引值
input	原始字符串

ES2018 引入了具名組匹配（Named Capture Groups），容許爲每個組匹配指定一個名字，既便於閱讀代碼，又便於引用。

const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; // 1999
const month = matchObj.groups.month; // 12
const day = matchObj.groups.day; // 31
複製代碼

上面代碼中，「具名組匹配」在圓括號內部，模式的頭部添加「問號 + 尖括號 + 組名」（?），而後就能夠在exec方法返回結果的groups屬性上引用該組名。同時，數字序號（matchObj[1]）依然有效。

若是匹配失敗，exec() 方法返回 null

test()

test() 方法執行一個檢索，用來查看正則表達式與指定的字符串是否匹配。返回 true 或 false。 語法 RegExpObject.test(string) 參數

參數	描述
string	用來與正則表達式匹配的字符串

let str = 'hello world!';
let result = /^hello/.test(str);
console.log(result); 
// true
複製代碼

返回值

若是正則表達式與指定的字符串匹配 ，返回true；不然false。

toString() 和 toLocaleString()

toString() 和 toLocaleString() 方法返回的時字面量形式的正則字符串表達式

RegExp 構造函數屬性

RegExp 構造函數包含一些屬性（這些屬性在其餘語音中被當作是靜態屬性）。這些屬性由兩種方式訪問，一種時長屬性，一種是短屬性。以下表：

長屬性名	短屬性名	描述
input	$_	最近一次要匹配的字符串。opera 未實現此屬性
lastMatch	$&	最近一次匹配項。opera 未實現此屬性
lastParen	$+	最近一次要匹配的捕獲組。opera 未實現此屬性
leftContext	$`	input字符串中lastMatch以前的文本
mutiline	$*	布爾值，表示是否全部表達式都使用多行模式。IE和opera 未實現此屬性
rightContext	$'	input字符串中lastMatch以後的文本

var txt = 'this has been a short summer';
var reg = /(.)hort/g;
if (reg.test(txt)) {
  console.log(RegExp.$_); // this has been a short summer
  console.log(RegExp['$`']); // this has been a 
  console.log(RegExp["$'"]); //  summer
  console.log(RegExp['$&']); // short
  console.log(RegExp['$+']); // s
  console.log(RegExp["$*"]); // false   safari false || chrome undefined
}
複製代碼

除了上面幾個屬性還有9個用於捕獲組的構造函數屬性。RegExp.$1... RegExp.$9,分別用於存儲第1、第二...等匹配捕獲組

模式的侷限性

ECMAScript 中正則表達式缺乏某些語言（如：perl）支持的高級特性。下面列出一些不支持的特性。（瞭解更多訪問www.regular-expressions.info）

• 匹配字符串開頭和結尾的\A和\Z錨
• 向後查找
• 並集和交集類
• 原子組
• Unicode 支持（單個字符串除外，如：\uFFFF）
• 命名的捕獲組
• s（single，單行） 和 x（free-spacing,無間隔） 匹配模式
• 條件匹配
• 正則表達式註釋

若有侵權，請發郵箱至wk_daxiangmubu@163.com 或留言，本人會在第一時間與您聯繫，謝謝！！

長按二維碼關注咱們，瞭解最新前端資訊