一次JavaScript正则的诡异经历记录

目录
  • 背景
  • 问题
  • 原因
  • 总结

事情是这样的，最近在写一个Node功能的时候，遇到了一个正则的问题，觉得挺有意思的，就记录一下经历和最终问题原因，希望也能帮助到同样遇到的同学。

背景

我有一个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的文档，终于被我找到原因。

原因

通过查找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') 。

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

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

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

总结

到此这篇关于一次JavaScript正则的诡异经历记录的文章就介绍到这了,更多相关JavaScript正则经历内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js正则表达式的使用详解

    js中的正则表达式比起C#中的正则表达式要弱很多,但基本够用了1定义正则表达式2关于验证的三个这则表达式方法3正则表达式式的转义字符 1定义正则表达式在js中定义正则表达式很简单,有两种方式,一种是通过构造函数,一种是通过//,也就是两个斜杠.例如 复制代码 代码如下: var   re =new RegExp("\\?(\\w{1,}=\\w{1,}&){1,}\\w{1,}=\\w{1,}"); 使用构造函数定义正则表达式,注意大小写,负责就会不起作用.由于构造函数的参数是

  • 比较正宗的验证邮箱的正则表达式js代码详解

    fuchangxi的正则: 复制代码 代码如下: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ 开始必须是一个或者多个单词字符或者是-,加上@,然后又是一个或者多个单词字符或者是-.然后是点"."和单词字符和-的组合,可以有一个或者多个组合. 复制代码 代码如下: <script type="text/javascript"> function isEmail(str){ var reg =

  • 用户名、密码等15个常用的js正则表达式

    收集整理了15个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. QQ号码. 微信号.车牌号.中文正则.表单验证处理必备. 1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uPattern.test("iFat3"

  • js正则表达式基本语法(精粹)

    1.正则表达式基本语法 两个特殊的符号'^'和'$'.他们的作用是分别指出一个字符串的开始和结束. 例子如下: "^The":表示所有以"The"开始的字符串("There","The cat"等): "of despair$":表示所以以"of despair"结尾的字符串: "^abc$":表示开始和结尾都是"abc"的字符串--呵呵,只有&q

  • 精通JS正则表达式(推荐)

    正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证 •替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字 •根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字 正则表达式语法 一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式.该模式描述在查找文字主体时待匹配的一个或多个字符串

  • javascript 手机号码正则表达式验证函数 原创

    复制代码 代码如下: function checkMobile(){     var sMobile = document.mobileform.mobile.value     if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(sMobile))){         alert("不是完整的11位手机号或者正确的手机号前七位");         document.mobileform.mobile.focus();         return false;

  • JS正则表达式大全(整理详细且实用)

    正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个单词的边界. -或- 对正则表达式功能字符的还原,如"*"匹配它前面元字符0次或多次,/a*/将匹配a,aa,aaa,加了"\"后,/a\*/将只匹配"a*". ^ 匹配一个输入或一行的开头,/^a/匹配"an A",而不匹配&q

  • JS正则表达式验证数字代码

    复制代码 代码如下: <script type="text/javascript">     function validate(){       var reg = new RegExp("^[0-9]*$");       var obj = document.getElementById("name");    if(!reg.test(obj.value)){        alert("请输入数字!");

  • js 常用正则表达式表单验证代码

    正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证.替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字.根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字. 基本语法 在对正则表达式的功能和作用有了初步的了解之后,我们就来具体看一下正则表

  • 一次JavaScript正则的诡异经历记录

    一次JavaScript正则的诡异经历记录

    目录 背景 问题 原因 总结 事情是这样的,最近在写一个Node功能的时候,遇到了一个正则的问题,觉得挺有意思的,就记录一下经历和最终问题原因,希望也能帮助到同样遇到的同学. 背景 我有一个Node服务,希望对访问进来的请求进行标记,如果请求进来的path是我定义的路由,那么将标记一个REQ,否则标记一个IVL,用于对于整个服务的日志记录进行输出.那么我通过服务启动时,根据定义的路由,生成一个RouterMap,通过访问进入时,判断path是否命中RouterMap来判断是否预期访问. 大概的代

  • JavaScript正则方法replace实现搜索关键字高亮显示

    JavaScript正则方法replace实现搜索关键字高亮显示

    前言 正则表达式是字符串处理工具中强有力的工具.也有人认为这只是一个小玩具,但不管怎么说都离不开它. 这里介绍的是JavaScript的正则表达式的replace方法 ,和实现搜索关键字高亮的功能. 先介绍一下正则表达式的replace方法 replace介绍 w3school原文链接介绍 正则表达式如何使用特殊字符$来表示原来的文本,这是实现搜索高亮的关键, var str = "asad sad 123 sd qwe21"; str.replace(/\d+/img,"数

  • php与javascript正则匹配中文的方法分析

    本文实例讲述了php与javascript正则匹配中文的方法.分享给大家供大家参考,具体如下: php中正则匹配utf-8中文: (重点是:[\x{4e00}-\x{9fa5}]+) $str = "我们"; if (preg_match("/^[\x{4e00}-\x{9fa5}]+$/u",$str,$arr)) { print("该字符串全部是中文"); echo '<pre>'; print_r($arr); } else {

  • JavaScript正则替换HTML标签功能示例

    JavaScript正则替换HTML标签功能示例

    本文实例讲述了JavaScript正则替换HTML标签功能.分享给大家供大家参考,具体如下: 1.说明 获取HTML字符串(包含标签),通过正则表达式替换HTML标签,输出替换后的字符串 2.实现JavaScript代码 function deleteTag() { var regx = /<[^>]*>|<\/[^>]*>/gm; var tagStr = $("#ul_li").html(); alert("替换之前的字符串:"

  • javascript正则匹配汉字、数字、字母、下划线

    javascript正则检测只含有汉字.数字.字母.下划线不能以下划线开头和结尾 遇到一个用户名检测的的问题,查了一下,总结例子如下: 复制代码 代码如下: var reg = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/;if (!reg.test(实际取值的字符串)) {    alert('请输入5-24位字符:支持中文.英文.数字."_",推荐使用中文');}

  • JavaScript正则获取地址栏中参数的方法

    本文实例讲述了JavaScript正则获取地址栏中参数的方法.分享给大家供大家参考,具体如下: 一.问题: 获取地址栏中的参数: 若地址栏中的地址是: http://10.124.36.56:8080/CMOD/index.jsp?name=you&password=123456&type=student 要求获取地址栏中的最后一个参数type 二.实现的JS: function getAddressURLParam(paramName) { //构造一个含有目标参数的正则表达式的对象 v

  • javascript cookie基础应用之记录用户名的方法

    本文实例讲述了javascript cookie基础应用之记录用户名的方法.分享给大家供大家参考,具体如下: 前面有一篇关于cookie基础的文章,封装了 cookie.js,下面我们通过一个实例来应用这个 js. 最常见的就是记住用户名,当用户登录过一次后,通过 cookie 记录下该用户的账号和密码,这样下次打开页面的时候不用再次输入账号密码了.附上代码: <!DOCTYPE HTML> <html lang="en-US"> <head> &l

  • JavaScript 正则命名分组【推荐】

    前言 以往我们只是习惯于通过数组下标来访问正则匹配到的分组,但分组达到4.5个时,标识起来就会非常麻烦.V8早已实现了正则命名分组提案,只是我们很少使用,本文将介绍JS的正则命名分组. 以往的做法 假设要使用正则匹配一个日期的年月日,以往我们会这样做: const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/; const matchObj = RE_DATE.exec('1999-12-31'); const year = matchObj[1]; // 1999 c

  • JavaScript 正则应用详解【模式、欲查、反向引用等】

    本文实例讲述了JavaScript 正则应用.分享给大家供大家参考,具体如下: 正则应用 正则表达式在web开发中的常用 邮箱验证 用户名验证 替换字符串某一部分 信息采集,用来分析有效代码段 ... 有规律的字符串描述 正则表达式是一门独立的知识,同样的一段描述,比如,对于email的匹配表达式,在不同的语言是一样的,但是调用的函数不同. 正则表达式--规则表达式 正则表达式:正则表达式 正则表达式语法:正则表达式语法 正则表达式语言:正则表达式语言 准备性的工作 在js中,如何写正则表达式.

  • JavaScript正则验证密码强弱度的实现方法

    JavaScript正则验证密码强弱度的实现方法

    展示 设计 密码强弱度分析 密码由数字,字母,特殊符号组成 密码: 只有数字- 或者是只有字母,或者是只有特殊符号--1级:弱 两两组合: 数字和字母, 数字和特殊符号, 字母和特殊符号--2级:中 三者都有: 数字和字母和特殊符号--3级:强 代码 版本一:基本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Do

随机推荐