Javascript基礎鞏固系列——標準庫RegExp對象

全手打原創，轉載請標明出處：https://www.cnblogs.com/dreamsqin/p/13729080.html， 多謝，=。=~（如果對你有幫助的話請幫我點個贊啦）

重新學習JavaScript是因爲當年轉前端有點兒趕鴨子上架的意味，我一直在反思我的知識點總是很零散，不能在腦海中形成一個完整的體系，所以這次想通過再次學習將知識點都串聯起來，結合日常開發的項目，達到溫故而知新的效果。與此同時，總結一下我認爲很重要但又被我遺漏的知識點～

概述

• 正則表達式（regular expression）是一種表達文本模式（即字符串結構）的方法，有點像字符串的模板，常常用來按照“給定模式”匹配文本。

var regex = /xyz/;  // 引擎編譯代碼時，就會新建正則表達式，效率更高，內部轉義元字符單斜槓\+
var regex = new RegExp('xyz');  // 在運行時新建正則表達式，內部轉義元字符需要雙斜槓\\+
- 正則表達式內部，還可以用\n引用括號匹配的內容，n是從1開始的自然數，表示對應順序的括號。

• 正則表達式內部，還可以用\n引用括號匹配的內容，n是從1開始的自然數，表示對應順序的括號，嵌套時\1代表外層括號。\2代表內層括號。

/(.)b(.)\1b\2/.test("abcabc")  // true
/y(..)(.)\2\1/.test('yabccab') // true
/y((..)\2)\1/.test('yabababab') // true

實例屬性

• RegExp.prototype.ignoreCase：返回一個布爾值，表示是否設置了i修飾符。
• RegExp.prototype.global：返回一個布爾值，表示是否設置了g修飾符。
• RegExp.prototype.multiline：返回一個布爾值，表示是否設置了m修飾符。
• RegExp.prototype.flags：返回一個字符串，包含了已經設置的所有修飾符，按字母排序。

var r = /abc/igm;

r.ignoreCase // true
r.global // true
r.multiline // true
r.flags // 'gim'

• RegExp.prototype.lastIndex：返回一個整數，表示下一次開始搜索的位置。該屬性可讀寫，但是隻在進行連續搜索時有意義，詳細介紹請看後文。
• RegExp.prototype.source：返回正則表達式的字符串形式（不包括反斜槓），該屬性只讀。

var r = /abc/igm;

r.lastIndex // 0
r.source // "abc"

實例方法

RegExp.prototype.test()

返回一個布爾值，表示當前模式是否能匹配參數字符串。若帶有g修飾符則每一次test方法都從上一次結束的位置開始向後匹配。

var r = /x/g;
var s = '_x_x';

r.lastIndex // 0
r.test(s) // true

r.lastIndex // 2
r.test(s) // true

r.lastIndex // 4
r.test(s) // false

r.lastIndex = 1
t.test(s) //true

RegExp.prototype.exec()

用來返回匹配結果。如果發現匹配，就返回一個數組，成員是匹配成功的子字符串，否則返回null，返回數組包含index（模式匹配成功的開始位置）和input（整個原字符串）兩個屬性。

// 正則表達式包含圓括號時，第一個成員是整個匹配成功的結果，後面的成員就是圓括號對應的匹配成功的組。也就是說，第二個成員對應第一個括號，第三個成員對應第二個括號，以此類推。
var r = /a(b+)a/;
var arr = r.exec('_abbba_aba_');

arr // ["abbba", "bbb"]

arr.index // 1
arr.input // "_abbba_aba_"

// 利用g修飾符允許多次匹配的特點，用一個循環完成全部匹配
var reg = /a/g;
var str = 'abc_abc_abc'

while(true) {
  var match = reg.exec(str);
  if (!match) break;
  console.log('#' + match.index + ':' + match[0]);
}
// #0:a
// #4:a
// #8:a

在字符串實例方法中的應用

String.prototype.match()

返回一個數組，帶g修飾符時成員是所有匹配的子字符串。

var s = 'abba';
var r = /a/g;

s.match(r) // ["a", "a"]
r.exec(s) // ["a"]

String.prototype.search()

按照給定的正則表達式進行搜索，返回第一個滿足條件的匹配結果在整個字符串中的位置。如果沒有任何匹配，則返回-1。

'_x_x'.search(/x/)
// 1

String.prototype.replace()

• 按照給定的正則表達式進行替換，返回替換後的字符串。

'aaa'.replace(/a/, 'b') // "baa"
'aaa'.replace(/a/g, 'b') // "bbb"

// 消除字符串首尾兩端的空格
var str = '  #id div.class  ';
str.replace(/^\s+|\s+$/g, '')
// "#id div.class"

• 第二個參數可以使用美元符號$，用來指代所替換的內容。
  • $&：匹配的子字符串。
  • $+反引號：匹配結果前面的文本。
  • $'：匹配結果後面的文本。
  • $n：匹配成功的第n組內容，n是從1開始的自然數。
  • $$：指代美元符號$。

'hello world'.replace(/(\w+)\s(\w+)/, '$2 $1')
// "world hello"

'abc'.replace('b', '[$`-$&-$\']')
// "a[a-b-c]c"    

• 第二個參數還可以是一個函數，將每一個匹配內容替換爲函數返回值，函數可以接受多個參數，其中第一個參數是捕捉到的內容，第二個參數是捕捉到的組匹配（有多少個組匹配，就有多少個對應的參數）。

var prices = {
  'p1': '$1.99',
  'p2': '$9.99',
  'p3': '$5.00'
};

var template = '<span id="p1"></span>'
  + '<span id="p2"></span>'
  + '<span id="p3"></span>';

template.replace(
  /(<span id=")(.*?)(">)(<\/span>)/g,
  function(match, $1, $2, $3, $4){
    return $1 + $2 + $3 + prices[$2] + $4;
  }
);
// "<span id="p1">$1.99</span><span id="p2">$9.99</span><span id="p3">$5.00</span>"

String.prototype.split()

按照給定規則進行字符串分割，返回一個數組，包含分割後的各個成員。

// 正則分隔，去除多餘的空格
'a,  b,c, d'.split(/, */)
// [ 'a', 'b', 'c', 'd' ]

'aaa*a*'.split(/a*/)
// [ '', '*', '*' ]

'aaa**a*'.split(/a*/)
// ["", "*", "*", "*"]

'aaa*a*'.split(/(a*)/)
// [ '', 'aaa', '*', 'a', '*' ] 括號匹配的部分也會一起返回

匹配規則

可以參見我之前寫的《正則表達式語法總結》

參考資料

JavaScript 語言入門教程 ：https://wangdoc.com/javascript/index.html