JavaScript正則運算式常用技巧

正則運算式是用于匹配字串中字符組合的模式，在 JavaScript 中，正則運算式也是物件，這些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、matchAll、replace、search 和 split 方法，正則運算式的掌握程度能粗略地看出程式員的技術底子，所以技術面試、編程競賽等 都特別喜歡考察正則運算式，本篇就帶你一起夯實一下 JavaScript 正則運算式的一些使用技巧：

創建正則運算式

在 JavaScript 的世界，創建正則運算式有2個方法：
（1）使用一個正則運算式字面量，其由包含在斜杠之間的模式組成，比如 ：

const reg = /ab+c/

（2）呼叫RegExp物件的建構式，比如：

const reg = new RegExp("ab+c")

注意：以上2個方法雖然都能創建正則運算式，但是還是有區別的：
（1）使用第一個方法，在腳本加載后正則運算式字面量就會被編譯，當正則運算式保持不變時，使用此方法可獲得更好的性能，
（2）使用第二個方法，在腳本運行程序中用建構式創建的正則運算式會被編譯，如果正則運算式將會改變，或者它將會從用戶輸入等來源中動態地產生，就需要使用建構式來創建正則運算式，

當然，這樣表述可能不太深刻，下面找一道面試題帶你實踐一下，

經典面試題 "Word Finder"

題目要求：
使用一個方法來擴展字典，該方法回傳與模式匹配的單詞串列，這個模式可以包含字母(小寫)和占位符("?")，占位符只代表一個任意的字母，比如： 

const fruits = new Dictionary(['banana', 'apple', 'papaya', 'cherry']);
fruits.getMatchingWords('lemon');     // must return []
fruits.getMatchingWords('cherr??');   // must return []
fruits.getMatchingWords('?a?a?a');    // must return ['banana', 'papaya']
fruits.getMatchingWords('??????');    // must return ['banana', 'papaya', 'cherry']

補充說明：
（1）單詞和模式都是小寫
（2）回傳單詞的順序無關緊要

上面這道題目是典型的 正則運算式應用題，考察的知識點是2個：
（1）使用 RegExp 物件 動態創建正則運算式
（2）使用 /./ 匹配一個任意字符

因此不難有如下解決方案（ps：這個是我的解決方案，雖然解法比較low，但是邏輯應該還算清晰，容易理解）

// 字典構造器
function Dictionary(words) {
  this.words = words;
}

// 原型里拓展解法
Dictionary.prototype.getMatchingWords = function(pattern) {
  let res = []
  const reg = new RegExp("^" + pattern.replace(/\?/g, '.') + "$")  // 創建正則運算式
  for (let x of this.words) {
    if (reg.test(x)) res.push(x) 
  }
  return res
}

如果你有更好的解法，歡迎評論留言哈 ^_

正則運算式模式

一個正則運算式模式是由簡單的字符所構成的，比如 /abc/；或者是簡單和特殊字符的組合，比如 /ab*c/ 或 /Chapter (\d+)\.\d*/

簡單模式

簡單模式是由想要匹配的具體字符組成，且嚴格匹配字符順序，比如，/abc/ 這個模式就能且僅能匹配 "abc" 字符按照順序同時出現的情況，而 "bac" 或 "cab" 等就無法匹配，

特殊字符

當需要匹配一個不確定的字串時，比如尋找一個或多個 "b"，或者尋找空格，可以在模式中使用特殊字符，特殊字符還包括如下：

• 斷言：表示一個匹配在某些條件下發生，斷言包括先行斷言、后行斷言和條件運算式
• 字符類：區分不同型別的字符，例如區分字母和數字
• 組和范圍：表示運算式字符的分組和范圍
• 量詞：表示匹配的字符或條件運算式的數量
• Unicode屬性轉義：基于 Unicode字符屬性區分字符，例如大寫和小寫字母、數字符合和標點

Escaping

當需要使用任何特殊字符的字面值（例如，搜索字符 *），你必須通過在它前面放一個反斜杠來轉義它， 例如，要搜索'a'后跟*后跟'b'，你應該使用 /a\*b/- 反斜杠“轉義”字符 *，使其成為文字而非特殊符號，將用戶輸入轉義為正則運算式中的一個字面字串，可以通過簡單的替換來實作：

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

使用正則運算式

前面講到，正則運算式可以被用于 RegExp 的 exec 和 test 方法以及 String 的 match、replace、search 和 split 方法，這些方法在 JavaScript 手冊 中有詳細的解釋，下面只簡單羅列下各自功能，不做展開：

• exec：在字串中執行查找匹配的 RegExp 方法，它回傳一個陣列（未匹配到則回傳 null）
• test：在字串中測驗是否匹配的 RegExp 方法，它回傳 true 或 false
• match：在字串中執行查找匹配的 String 方法，它回傳一個陣列，在未匹配到時會回傳 null
• matchAll：在字串中執行查找所有匹配的 String 方法，它回傳一個迭代器（iterator）
• search：在字串中測驗匹配的 String 方法，它回傳匹配到的位置索引，或者在失敗時回傳 -1
• replace：在字串中執行查找匹配的 String 方法，并且使用替換字串替換掉匹配到的子字串
• split：使用正則運算式或者一個固定字串分隔一個字串的String方法，并將分隔后的子字串存盤到陣列中

一個簡單的快速記憶方法：
（1）想要知道在一個字串中的一個匹配是否被找到，使用 test 或 search 方法
（2）想得到更多的資訊（但是比較慢）則可以使用 exec 或 match 方法

舉個栗子，使用exec方法在一個字串中查找一個匹配：

const myRe = /d(b+)d/g;
const myArray = myRe.exec("cdbbdbsbz");

如果不需要訪問正則運算式的屬性，這個腳本通過另一個方法來創建myArray：

const myArray = /d(b+)d/g.exec("cdbbdbsbz");
// 和 "cdbbdbsbz".match(/d(b+)d/g); 相似，
// 但是 "cdbbdbsbz".match(/d(b+)d/g) 輸出陣列 [ "dbbd" ]，
// 而 /d(b+)d/g.exec('cdbbdbsbz') 輸出陣列 [ "dbbd", "bb", index: 1, input: "cdbbdbsbz" ].

如果想通過一個字串構建正則運算式，那么這個腳本還有另一種方法：

const myRe = new RegExp("d(b+)d", "g");
const myArray = myRe.exec("cdbbdbsbz");

使用括號的子字串匹配

一個正則運算式模式使用括號，將導致相應的子匹配被記住，例如，/a(b)c / 可以匹配字串“abc”，并且記得“b”，回調這些括號中匹配的子串，使用陣列元素[1],……[n]，

使用括號匹配的子字串的數量是無限的，回傳的陣列中保存所有被發現的子匹配，下面的例子說明了如何使用括號的子字串匹配，

下面的腳本使用 replace() 方法來轉換字串中的單詞，在匹配到的替換文本中，腳本使用替代的$1, $2 表示第一個和第二個括號的子字串匹配：

const re = /(\w+)\s(\w+)/;
const str = "John Smith";
const newstr = str.replace(re, "$2, $1");
console.log(newstr);   // 輸出 "Smith, John"

通過標志進行高級搜索

正則運算式有六個可選引數 (flags) 允許全域和不分大小寫搜索等，這些引數既可以單獨使用也能以任意順序一起使用, 并且被包含在正則運算式實體中：

• g：全域搜索
• i：不區分大小寫搜索
• m: 多行搜索
• s：允許.匹配換行符
• u：使用Unicode碼的模式進行匹配
• y：執行“粘性(sticky)”搜索, 匹配從目標字串的當前位置開始

例如，re = /\w+\s/g 將創建一個查找一個或多個字符后有一個空格的正則運算式，或者組合起來像此要求的字串：

const re = /\w+\s/g;
const str = "fee fi fo fum";
const myArray = str.match(re);
console.log(myArray);

// ["fee ", "fi ", "fo "]

使用 .exec() 方法時，與 g 標志關聯的行為是不同的， （“class”和“argument”的作用相反：在.match()的情況下，字串類（或資料型別）擁有該方法，而正則運算式只是一個引數，而在.exec()的情況下，它是擁有該方法的正則運算式，其中字串是引數，對比str.match(re)與re.exec(str) ), g標志與.exec()方法一起使用獲得迭代進展：

const xArray; while(xArray = re.exec(str)) console.log(xArray);
// produces: 
// ["fee ", index: 0, input: "fee fi fo fum"]
// ["fi ", index: 4, input: "fee fi fo fum"]
// ["fo ", index: 7, input: "fee fi fo fum"]

除此之外，m標志用于指定多行輸入字串應該被視為多個行，如果使用m標志，^和$匹配的開始或結束輸入字串中的每一行，而不是整個字串的開始或結束，

@參考：正則運算式

本文由博客一文多發平臺 OpenWrite 發布！

標籤：JavaScript

上一篇：WEB第二十三課——js運算子

下一篇：Object.prototype.__proto__, [[prototype]] 和 prototype