JavaScript正則庫：XRegExp

囧囧發表於2015-12-14
JavaScript

好像網上介紹JS正則庫的文章不多，可能也是因為複雜的正則匹配很少需要在客戶端執行，所以JS上用的不多，並且我搜JS的正則庫還真沒找到第二個，囧。但它的一些特性挺實用，有興趣的同學可以看看。由於沒花太多時間去琢磨，所以本文只將該庫作簡要介紹，本文用例全部來自它的API文件。

XRegExp是一個為JS的正規表示式提供擴充套件功能的庫， 呼叫之後可以彌補原生JS在正則方面的一些不足，也在很大程度上增強了JS正則的功能。它解決了瀏覽器之間正則的相容問題，且支援原生ES6正則語法(有關ES6中正則的新特性：參考?New regular expression features in ECMAScript 6)

XRegExp的壓縮版大概4.25K，在效能上，由於XRegExp生成的正則都是原生的正則物件，其表現跟原生正則一樣， 只是在首次建立XRegExp正則的時候需要多點開銷。它的主要特點如下：

XRegExp的主要特性

  • 擴充套件的正則語法，包括支援命名的捕獲組以及更強大的文字替換

  • 增加修飾符(flags)s支援單行模式；x忽略空格以及行註釋；n明確捕獲組模式；A支援21位Unicode匹配

  • 提供一套函式簡化正則處理

  • 解決跨瀏覽器的正則相容問題

  • 在此基礎上提供擴充套件(addons)支援更多的正則語法和功能

基本用法

XRegExp的最主要的API也就是這個建構函式XRegExp(pattern, [flags]) 其語法如下：

  • pattern引數為字元型的正規表示式

  • [flags]為可選的正則修飾符，當然也是字元型，它支援原生的修飾符以及XRegExp中的擴充套件修飾符(特性中已列出)

返回值為被擴充套件的正則物件。

比如：

// 使用了‘x’修飾符，所以忽略空格且支援行註釋
//忽略空格指的是正則中的空格被忽略
//(?<name>…)這種寫法即命名的捕獲組
// #...為行註釋
var date = XRegExp(`(?<year>  [0-9]{4} ) -?  # year  

                    (?<month> [0-9]{2} ) -?  # month 

                    (?<day>   [0-9]{2} )     # day   `, `x`);

//這裡使用了XRegExp擴充套件的exec()方法
var match = XRegExp.exec(`2015-02-22`, date);
match.year; // -> `2015`

以上這個栗子?就體現了XRegExp在正則上強大的擴充套件功能，比如命名的捕獲組，正則註釋等，這從一定程度上彌補了原生JS正則上的不足。

有趣的特性

由於我並沒有看完它的所有API文件， 也是剛接觸這玩意，所以這裡只挑幾個我覺得比較實用的特性列舉。

迭代器forEach

它的語法格式為XRegExp.forEach(str, regex, callback)

  • str 被匹配的字串

  • regex 傳入的正則

  • 回撥函式，該方法每次迭代將傳入回撥函式4個引數

    • 當前匹配的陣列，並且帶命名的後向引用屬性

    • 當前匹配的索引位置

    • 正在被遍歷的字串

    • 正在使用的正則物件

該方法遍歷被匹配的字串，忽略其中正則全域性修飾符g，也忽略lastIndex的初始值。
該方法無返回值。
例如：

// 從被匹配的字串中每次抽取一個數字放入偶數陣列
var evens = [];
XRegExp.forEach(`1a2345`, /d/, function (match, i) {
  if (i % 2) evens.push(+match[0]);
});
// evens -> [2, 4]

匹配鏈方法matchChain

匹配鏈方法可以從之前的匹配結果中呼叫下一個正則繼續匹配，就像從一個大範圍中使用不同的正則不斷篩選出你要的資料。
它的語法是XRegExp.matchChain(str, chain)

  • str 被匹配字串

  • 一個正則組成的陣列，比如[reg1，reg2，…]

該方法返回與匹配鏈條(正則陣列)最後一個正則的匹配內容，或一個空陣列。
例如：

// 基本用法：抽取每個<b>標記包裹的數字
//(?is)是XRegExp中修飾符前置的語法，它等同於在正則後加修飾符i s
XRegExp.matchChain(`1 <b>2</b> 3 <b>4 a 56</b>`, [
  XRegExp(`(?is)<b>.*?</b>`),
  /d+/
]);
// -> [`2`, `4`, `56`]


// 返回命名的捕獲組內容(後部引用)
html = `<a href="http://xregexp.com/api/">XRegExp</a>
        <a href="http://www.google.com/">Google</a>`;
XRegExp.matchChain(html, [
  {regex: /<a href="([^"]+)">/i, backref: 1},
  {regex: XRegExp(`(?i)^https?://(?<domain>[^/?#]+)`), backref: `domain`}
]);
// -> [`xregexp.com`, `www.google.com`]

正則合併方法union

該方法可以將需要匹配的字串或者正規表示式合併為一個正規表示式，帶後部引用的正則在合併時將被重新編碼，其語法格式為XRegExp.union(patterns, [flags])

  • patterns為一個陣列，陣列元素可以是要匹配的字串或正則

  • 可選的修飾符flags

返回值為合併後的正規表示式。
例如：

XRegExp.union([`a+b*c`, /(dogs)1/, /(cats)1/], `i`);
// -> /a+b*c|(dogs)1|(cats)2/i

大致先寫這麼多，還有什麼使用21位unicode匹配表情符也蠻好玩的，再看到什麼更好玩的繼續補上吧。
以上內容主要還是大致翻譯API原文加上我自己的一些理解，這篇介紹都很簡略，看著可能有點不太清楚，如有什麼錯漏還請指出。檢視更詳細的資料或者下載直接去它的主頁吧。
XRegExp的主頁：?XRegExp Github ：?XRegExp 3.0.0

相關文章