【20190405】JavaScript-正則式匹配與替換結果解析

在正則式的應用中有三個函數使用得最多：exec()、test()與字符串的replace(reg, options)。其中test()最簡單，只要字符串與正則式能夠匹配，就返回true，不然返回false。接下來主要分析一下exec()和replace()的用法。

reg.exec()：

舉個例子：

let reg=/-(\w)/g;
let str='the-first-index';
console.log(reg.exec(str),reg.exec(str));

這個例子取到了字符串中每一個-後的字母。

首先正則式中帶有g參數，說明是全局查找，那麼在第一次調用exec()時會返回匹配到的第一個結果，接下來再調用exec()則會從上次查找的結果開始向後繼續查找，返回第二個匹配結果。

好比在上面這個例子裏，第一次調用exec()則會返回‘-f’（具體的返回值並非字符串，下面會詳細分析），這是它第一次匹配到的結果；第二次調用會返回‘-i’，這是它第二次匹配到的結果。

再看exec()返回的結果具體是怎樣的：

console.log(reg.exec(str));
// 返回結果：
[ '-f',
  'f',
  index: 3,
  input: 'the-first-index',
  groups: undefined ]

能夠看到是一個數組，數組的第一項是該正則式匹配到的字符串，第二項開始是從匹配字符串裏取得的變量（正則式中由小括號包起來的部分會被取出），這裏有多少個小括號後面就會有多少項。後面是三個特殊屬性，index表示匹配到的字符串（第一個字符）在原字符串中的下標，input是輸入的原字符串，groups是正則式中自定義的組。

由於返回結果是個數組，所以能夠經過下標索引所須要的結果值。

str.replace(reg, options):

有了上面的鋪墊，如今能夠分析利用正則來替換字符串的過程了。一樣用上面的例子：

let reg=/-(\w)/g;
let str='the-first-index';
console.log(str.replace(reg,function ($,$1) {
    return $1.toUpperCase();
}));// theFirstIndex

這個例子把字符串轉換成了小駝峯命名。

replace()函數的執行過程簡單來說就是將第二個參數結果替換第一個參數結果，返回替換後的字符串。第一個參數使用正則式的話，那麼其結果就是該正則式匹配到的字符串，也就是上面講的exec()返回的數組第一項‘-f’與‘-i’（全局搜索的狀況，非全局搜索只會找到第一個匹配的字符串），而不是小括號裏取到的變量。

這裏的replace()中第二個參數傳入了一個回調函數，這個回調函數的參數第一項是reg.exec(str)[0]，也就是匹配到的字符串，第二項是reg.exec(str)[1]，取到的變量，依次類推。所以例子中的返回值就是取到的變量 f 和 i 的大寫形式，這裏的參數名雖然沒有限制，可是通常用$1表示取到的第一個變量，$2爲第二個變量。。。最多能夠取到$99，用$來表示匹配到的字符串。

replace()還有另一種形式：

let reg=/-(\w)/g;
let str='the-first-index';
console.log(str.replace(reg,‘$1’);// thefirstindex

 

這裏第二個參數直接使用了字符串形式，其中$1$2...$99表明取到的第一、2...99個變量（$n只在取到了第n個變量的狀況下有意義，不然沒有意義，直接輸出$n），注意$和$0是沒有意義的。

 又發現的正則的一個小坑：方括號[]

方括號在正則裏表明是一個字符組，表示在一個位置裏可能出現的多種字符，注意這裏只匹配一個位置。

其餘的用法就不寫了，關鍵的是不少元字符在方括號裏就不是元字符了，好比「.」，「$」，「?」，「*」。

let reg=/[*$?.]/g;
let str='hey*$?.';
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
//輸出結果：
[ '*', index: 3, input: 'hey*$?.', groups: undefined ]
[ '$', index: 4, input: 'hey*$?.', groups: undefined ]
[ '?', index: 5, input: 'hey*$?.', groups: undefined ]
[ '.', index: 6, input: 'hey*$?.', groups: undefined ]

這些字符放方括號裏是能夠直接匹配的，前面不用加轉義符\！

另外就是「-」只有在方括號裏並且在表示範圍的變量之間纔是元字符，在字符組首部或者尾部都只表示一個普通字符。

let reg1 = /[-123]/
let reg2 = /[123-]/
// 在字符組首部或尾部位置，僅做爲一個普通字符，而不是表示範圍的連字符
reg1.test('-') // -> true
reg2.test('-') // -> true

最後字符組的範圍不能亂寫，值小的放前面，值大的放後面，否則會報錯，由於範圍字符組實際是按照字符對應的ASCII碼值來肯定的，例如[0-9]的碼值爲48~57，[a-z]的碼值爲97~122，[A-Z]的碼值爲65~90。