文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript正则表达式使用实例分析

2023-06-30 07:26

关注

本篇内容主要讲解“JavaScript正则表达式使用实例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript正则表达式使用实例分析”吧!

背景

我有一个Node服务,希望对访问进来的请求进行标记,如果请求进来的path是我定义的路由,那么将标记一个REQ,否则标记一个IVL,用于对于整个服务的日志记录进行输出。那么我通过服务启动时,根据定义的路由,生成一个RouterMap,通过访问进入时,判断path是否命中RouterMap来判断是否预期访问。

大概的代码如下:

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;}

因为涉及到一些动态路由的原因,不能直接通过path进行相等判断,需要对相应的路由规则生成一个对应的正则表达式,并且在服务启动时生成,保存在内存中进行复用。

生成正常代码如下:

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');}

问题

然后在进行调试的时候发现一个奇怪的现象,假设我有一个路由为GET /cats/find的路由,通过打点发现对应的正则表达式,/^\/cats\/find$/gi对/cats/find进行匹配的时候,第一次为true,第二次为false,第三次为true,第四次为false,以此类推。

经过反复验证,node代码并没有存在问题,正则表达式也没有问题,那么我在浏览器中尝试复现一下,也是得出同样的问题。至此我很确定,一定是有一些正则相关的坑是我以前没有注意到。于是我反查了一下JavaScript的文档,终于被我找到原因。

JavaScript正则表达式使用实例分析

原因

通过查找MDN正则相关的文档,被查到以下说明

"nolink">当设置全局标志的正则使用test()

如果正则表达式设置了全局标志,test() 的执行会改变正则表达式 lastIndex属性。连续的执行test()方法,后续的执行将会从 lastIndex 处开始匹配字符串,(exec() 同样改变正则本身的 lastIndex属性值).

下面的实例表现了这种行为:

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

这不就是我遇到的问题吗?

通过文档说明得知,当我们正则表达式带有g标识进行全局匹配时,匹配成功后,regex实例中会有一个lastIndex属性去记录本次命中正则的最后一位的下标+1,用于在下一次调用test的时候,从lastIndex开始进行匹配。 以前我没有遇到过大概率是因为以下原因:

每次进行正则校验时,都重新生成正则实例:/^\/cats\/find$/gi.test('/cats/find') 。

JavaScript正则表达式使用实例分析

但是因为这次我将正则实例保存,并反复使用。从而导致问题。

并且通过验证得出,当匹配成功后,lastIndex会记录下一次开始的位置,但是当匹配失败,lastIndex会归零从头开始。

JavaScript正则表达式使用实例分析

至此这一次被坑经历耗时60分钟左右,耽误了吃饭最佳时间,导致饭堂菜都快没有。但是同时也收获到JavaScript在正则上一个容易被忽略的坑。好像也不亏。

到此,相信大家对“JavaScript正则表达式使用实例分析”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯