快捷導(dǎo)航

一次JavaScript正則的詭異經(jīng)歷記錄

更新時(shí)間：2022年04月21日 09:27:26 作者：Lam

正則表達(dá)式是用于匹配字符串中字符組合的模式,下面這篇文章主要給大家介紹了一次JavaScript正則的詭異經(jīng)歷記錄,文中通過(guò)實(shí)例介紹的非常詳細(xì),需要的朋友可以參考下

背景

我有一個(gè)Node服務(wù)，希望對(duì)訪問(wèn)進(jìn)來(lái)的請(qǐng)求進(jìn)行標(biāo)記，如果請(qǐng)求進(jìn)來(lái)的path是我定義的路由，那么將標(biāo)記一個(gè)REQ，否則標(biāo)記一個(gè)IVL，用于對(duì)于整個(gè)服務(wù)的日志記錄進(jìn)行輸出。那么我通過(guò)服務(wù)啟動(dòng)時(shí)，根據(jù)定義的路由，生成一個(gè)RouterMap，通過(guò)訪問(wèn)進(jìn)入時(shí)，判斷path是否命中RouterMap來(lái)判斷是否預(yù)期訪問(wèn)。

大概的代碼如下：

export function getSourceMak(
? routerMap: AppRouterMap[],
? req: http.IncomingMessage,
): SourceMark.REQ | SourceMark.IVL | SourceMark.TST {
? const { url, method, headers } = req;
? const pathname = url.split('?')[0];
? const userAgent = headers['user-agent'];
? // 安全掃描
? if (userAgent?.includes('TST(Tencent') && userAgent.includes('Team)')) {
? ? return SourceMark.TST;
? }
? for (const item of routerMap) {
? ? const { reg } = item;
? ? if (reg.test(pathname) && item.method === method.toLocaleLowerCase()) {
? ? ? return SourceMark.REQ;
? ? }
? }
? return SourceMark.IVL;
}?

因?yàn)樯婕暗揭恍﹦?dòng)態(tài)路由的原因，不能直接通過(guò)path進(jìn)行相等判斷，需要對(duì)相應(yīng)的路由規(guī)則生成一個(gè)對(duì)應(yīng)的正則表達(dá)式，并且在服務(wù)啟動(dòng)時(shí)生成，保存在內(nèi)存中進(jìn)行復(fù)用。

生成正常代碼如下：

export function createRouterRegexp(url) {
  const urlBlock = url.split('/');
  const regBlock = urlBlock.map((block) => {
    if (block[0] === ':') {
      return '((?!/).)*';
    }
    return block;
  });
  return new RegExp(`^${regBlock.join('/')}$`, 'ig');
}

問(wèn)題

然后在進(jìn)行調(diào)試的時(shí)候發(fā)現(xiàn)一個(gè)奇怪的現(xiàn)象，假設(shè)我有一個(gè)路由為GET /cats/find的路由，通過(guò)打點(diǎn)發(fā)現(xiàn)對(duì)應(yīng)的正則表達(dá)式，/^\/cats\/find$/gi對(duì)/cats/find進(jìn)行匹配的時(shí)候，第一次為true，第二次為false，第三次為true，第四次為false，以此類推。

經(jīng)過(guò)反復(fù)驗(yàn)證，node代碼并沒(méi)有存在問(wèn)題，正則表達(dá)式也沒(méi)有問(wèn)題，那么我在瀏覽器中嘗試復(fù)現(xiàn)一下，也是得出同樣的問(wèn)題。至此我很確定，一定是有一些正則相關(guān)的坑是我以前沒(méi)有注意到。于是我反查了一下JavaScript的文檔，終于被我找到原因。

原因

通過(guò)查找MDN正則相關(guān)的文檔，被查到以下說(shuō)明

"nolink">當(dāng)設(shè)置全局標(biāo)志的正則使用test()

如果正則表達(dá)式設(shè)置了全局標(biāo)志，test() 的執(zhí)行會(huì)改變正則表達(dá)式 lastIndex屬性。連續(xù)的執(zhí)行test()方法，后續(xù)的執(zhí)行將會(huì)從 lastIndex 處開(kāi)始匹配字符串，(exec() 同樣改變正則本身的 lastIndex屬性值).

下面的實(shí)例表現(xiàn)了這種行為：

var regex = /foo/g; 
// regex.lastIndex is at 0 
regex.test('foo'); // true 
// regex.lastIndex is now at 3 
regex.test('foo'); // false

RegExp.prototype.test() - JavaScript | MDN

這不就是我遇到的問(wèn)題嗎？

通過(guò)文檔說(shuō)明得知，當(dāng)我們正則表達(dá)式帶有g(shù)標(biāo)識(shí)進(jìn)行全局匹配時(shí)，匹配成功后，regex實(shí)例中會(huì)有一個(gè)lastIndex屬性去記錄本次命中正則的最后一位的下標(biāo)+1，用于在下一次調(diào)用test的時(shí)候，從lastIndex開(kāi)始進(jìn)行匹配。以前我沒(méi)有遇到過(guò)大概率是因?yàn)橐韵略颍?/p>

每次進(jìn)行正則校驗(yàn)時(shí)，都重新生成正則實(shí)例：/^\/cats\/find$/gi.test('/cats/find') 。