隨手查閱的正則匹配筆記

常見需求以下：

• 若是你只須要獲取字符串中的首個匹配項

var re = /quick\s(brown).+?(jumps)/ig;
var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
// 就算有 g 標識，經過 exec 也只能獲取到首個匹配項
// result[0]: Quick Brown Fox Jumps

• 使用了 g 標識時（不使用時如下方法也適用），若是你想獲取正則中的組匹配（capture groups）信息

var re = /quick\s(brown).+?(jumps)/ig;
var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
// index 1~n 就是組匹配到的結果（此處正則中有兩個括號，則 n 爲 2）
// result[1]: Brown
// result[2]: Jumps

關於 exec 的更多詳細說明能夠查看 MDN 文檔 RegExp.prototype.exec()

• 不使用 g 標識時，若是你想獲取正則中的組匹配（capture groups）信息

'mockid=272;其餘說明文字……'.match(/mockid=(\d+);/i)
// ["mockid=272;", "272", index: 0, input: "mockid=272;其餘說明文字……"]
// 若是加上 g 標識，就只能獲得 ["mockid=272;"]

• 匹配多種可能出現的值，獲取最終匹配到的值

'GET/path/to/some/place'.match(/^(GET|POST|PUT|DELETE)/gi)
// 輸出：["GET"]

關於 match 的更多詳細說明能夠查看 MDN 文檔 String.prototype.match()

• 只想知道是否匹配某個正則（true or false）

// RegExp.prototype.test()
var str = 'hello world!';
var result = /^hello/.test(str);
console.log(result); // true

關於 test 的更多詳細說明能夠查看 MDN 文檔 RegExp.prototype.test()

// String.prototype.search()
var str = "hey JudE";
var re = /[A-Z]/g;
var re2 = /[.]/g;
console.log(str.search(re)); // returns 4, which is the index of the first capital letter "J"
console.log(str.search(re2)); // returns -1 cannot find '.' dot punctuation
// 所以能夠直接判斷返回負值時匹配結果爲 false

關於 search 的更多詳細說明能夠查看 MDN 文檔 String.prototype.search()

• 對匹配成功的字符串進行處理

function replacer(match, p1, p2, p3, offset, string) {
  // p1:([^\d]*) p2:(\d*) p3:([^\w]*)
  // p1 非數字, p2 數字, p3 非文字
  return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString);  // abc - 12345 - #$*%

推薦正則工具：

• RegExr

很是好用的一個正則編寫工具，我會點開左側菜單欄裏的 cheatsheet 來學習編寫符合我需求的正則表達式。

• Debuggex

可視化查看正則表達式（複雜版），很直觀，神器一枚

• Regexper

可視化查看正則表達式（簡化版）