javascript 正則表達式

前言

以前已寫《PHP 正則表達式筆記》一文介紹正則表達式，本篇僅是做知識點的補充，文章邏輯編排版較隨意。

建立一個正則表達式

你能夠經過下面兩種方法建立一個正則表達式:

一、使用一個正則表達式字面量，以下所示

var re = /ab+c/;

二、調用 RegExp 對象的構造函數，以下所示

var re = new RegExp("ab+c");

正則表達式字面量在腳本加載後編譯,使用構造函數，提供了對正則表達式運行時的編譯。同一個正則表達式可能會被編譯屢次，因此可將其保存在一個變量中以供後使用。
當你知道正則表達式的模式會發生改變，或者你事先並不瞭解它的模式或者是從其餘地方（好比用戶的輸入），獲得的代碼這時比較適合用構造函數的方式。

有時候須要對正則字符串進行轉義處理，下面給出一示例:

function escapeRegExp(string){
  //$&表示被匹配的字符串
  return string.replace(/([.*+?^=!:${}()|[\]\/\\])/g, "\\$&");
}

摘自犀牛書：在 ECMAScript 3 規範中，用正則表達式建立的 RegExp 對象會共享一個實例，而在 ECMAScript 5中則是兩個獨立實例。

正則對象的屬性和方法

javascript 語言裏某種程度上能夠認爲 "一切皆對象"，那麼 RegExp 對象也有其屬性和方法。如 ignoreCase global lastIndex match() exec() 等屬性和方法。

另外字符串的正則方法，如 replace search split match 方法，ES6 將這4個方法，語言內部所有調用 RegExp 的實例方法，從而作到全部與正則相關的方法，全都定義在 RegExp 對象上。

在這不具體介紹 javascript 正則對象的屬性和方法的詳細用法，讀者可自行查閱。

u 修飾符

ES6 對正則表達式添加了 u 修飾符，含義爲「Unicode模式」，用來正確處理大於 \uFFFF 的 Unicode 字符。也就是說，會正確處理四個字節的 UTF-16 編碼。

可點擊查閱 javascript 字符集 瞭解更多 javascript 中字符的知識，學學如何處理四個字節的 UTF-16 編碼。

y 修飾符

ES6 還爲正則表達式添加了 y 修飾符，叫作「粘連」（sticky）修飾符。

y 修飾符的一個應用，是從字符串提取 token（詞元），y 修飾符確保了匹配之間不會有漏掉的字符。

const TOKEN_Y = /\s*(\+|[0-9]+)\s*/y;
const TOKEN_G  = /\s*(\+|[0-9]+)\s*/g;

tokenize(TOKEN_Y, '3 + 4')
// [ '3', '+', '4' ]
tokenize(TOKEN_G, '3 + 4')
// [ '3', '+', '4' ]

function tokenize(TOKEN_REGEX, str) {
  let result = [];
  let match;
  while (match = TOKEN_REGEX.exec(str)) {
    result.push(match[1]);
  }
  return result;
}

上面代碼中，若是字符串裏面沒有非法字符，y修飾符與g修飾符的提取結果是同樣的。可是，一旦出現非法字符，二者的行爲就不同了。

tokenize(TOKEN_Y, '3x + 4')
// [ '3' ]
tokenize(TOKEN_G, '3x + 4')
// [ '3', '+', '4' ]

結語

如下給出簡單列子，說明了一些正值表達式的用途。本文中許多有關 javascript 正則中的知識點並未介紹到，如斷言、組匹配、反向引用等。

var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";

var output = ["---------- Original String\n", names + "\n"];

var pattern = /\s*;\s*/;

var nameList = names.split(pattern);


pattern = /(\w+)\s+(\w+)/;


var bySurnameList = [];


output.push("---------- After Split by Regular Expression");

var i, len;
for (i = 0, len = nameList.length; i < len; i++){
  output.push(nameList[i]);
  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
}


output.push("---------- Names Reversed");
for (i = 0, len = bySurnameList.length; i < len; i++){
  output.push(bySurnameList[i]);
}


bySurnameList.sort();
output.push("---------- Sorted");
for (i = 0, len = bySurnameList.length; i < len; i++){
  output.push(bySurnameList[i]);
}

output.push("---------- End");

console.log(output.join("\n"));

// 問：請找出全部在 3 個連續相同字符前的相鄰 3 個連續相同字符
var s = 'aaalllsss0tAAAnnn999';
var re = /(\w)\1{2}(?=(\w)\2{2})/g;
console.log(s.match(re));  // [ 'aaa', 'lll', 'AAA', 'nnn' ]

相關閱讀

• javascript - 中的正則表達式
• 阮一峯 - 正則的擴展
• 阮一峯 - 字符串
• 正則表達式之：零寬斷言
• JS正則表達式一條龍講解
• 正則表達式前端使用手冊