创建示例项目

考察如下场景,我们有个输入框组件,输入时同时进行校验。

interface IInputProps {
label: string;
} function Input({ label }: IInputProps) {
const [err, setErr] = useState<string | undefined>(); return (
<section>
{label}:
<input
type="text"
onChange={(event) => {
setErr(rulePassword(event.currentTarget.value));
}}
/>
<p>validate result:{err}</p>
</section>
);
}
 

进行校验的逻辑使用了正则来测试:

const passwrodReg = new RegExp(
// eslint-disable-next-line no-useless-escape
/(?!^(\d+|[a-zA-Z]+|[_\+\-=!@#\$%\^\*\(\)]+)$)^[\w_\+\-=!@#\$%\^\*\(\)]{8,64}$/,
"gm"
); export const rulePassword = (value: string) => {
const result = passwrodReg.test(value);
console.log(`input:${value} result:${result}`);
return result ? "" : "";
};
 

通常,如果是密码输入框,很自然地我们会放置两个这样的输入框以让用户确保密码的一致性:

function App() {
return (
<div className="App">
<Input label="密码" />
<Input label="确认密码" />
</div>
);
}
 

对于相同的输入正则测试结果出现偏差

到此,示例写完了,运行后发现个诡谲的问题,如下图 GIF 中所展示:



  • 当我们在第一个输入框输入合法值时,显示校验结果为通过,这符合预期
  • 当我们在第二个输入框输入相同的合法值时,居然显示校验未通过
  • 进一步,当删除后再次输入时,又展示校验通过

同时,从控制台打印的日志也可重现上面的现象:

input:test123123 result:true
input:test123123 result:false
input: result:false
input:test123123 result:true
 

即,对于同样的输入 test123123,正则测试的结果居然会有偏差。

修正

当我们对校验部分的逻辑做如下变更后这个问题得以解决。

- const passwrodReg = new RegExp(
- // eslint-disable-next-line no-useless-escape
- /(?!^(\d+|[a-zA-Z]+|[_\+\-=!@#\$%\^\*\(\)]+)$)^[\w_\+\-=!@#\$%\^\*\(\)]{8,64}$/,
- "gm"
- ); export const rulePassword = (value: string) => {
+ const passwrodReg = new RegExp(
+ // eslint-disable-next-line no-useless-escape
+ /(?!^(\d+|[a-zA-Z]+|[_\+\-=!@#\$%\^\*\(\)]+)$)^[\w_\+\-=!@#\$%\^\*\(\)]{8,64}$/,
+ "gm"
+ );
const result = passwrodReg.test(value);
console.log(`input:${value} result:${result}`);
return result ? "" : "";
};
 



所以,一定是 RegExp 缓存了什么东西,上一次的匹配结果影响了下一次。

原因

通过查看 MDN 文档发现,RegExp 通过 test() 匹配成功时,会记录当前的位置信息然后存储到 RegExplastIndex,每成功匹配一次则更新一次该字段。

并且,

Note: As long as test() returns true, lastIndex will not reset—even when testing a different string!

当配合 g 进行全局匹配时,lastIndex 是不会重置的,即使是在匹配一个全新的字符串时。

这就解释了为什么对于相同的输入,第一次匹配成功后,后面则失败了。

而当我们每次匹配都重新调用 RegExp 构造器生成正则时,就不会有这个问题了。

还有种解决方式是去掉 g 标识,每次匹配也不会复用之前的 lastIndex

相关资源

The text was updated successfully, but these errors were encountered:

JavaScript 中正则匹配时结果不一致的问题的更多相关文章

  1. JS中正则匹配的三个方法match exec test的用法

    javascript中正则匹配有3个方法,match,exec,test: match是字符串的一个方法,接收一个RegExp对象做为参数: match() 方法可在字符串内检索指定的值,或找到一个或 ...

  2. JS正则表达式一些基本使用、验证、匹配、正则匹配时一个变量

    js验证首位必须是字母 var str = "asfg"; /^[a-zA-Z].*/.test(str);//true是,false否 匹配所有空格 var str=" ...

  3. JavaScript 中定义变量时有无var声明的区别

    关于JavaScript中定义变量时有无var声明的区别 var a=5; //正确 a=5; //正确 在javascript中,以上两种方法都是定义变量的正确方法.微软的Script56.CHM中 ...

  4. Python中正则匹配使用findall时的注意事项

    在使用正则搜索内容时遇到一个小坑,百度搜了一下,遇到这个坑的还不少,特此记录一下. 比如说有一个字符串  "123@qq.comaaa@163.combbb@126.comasdf111@a ...

  5. JavaScript中正则使用

    字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在.比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@前后的子串,再分别判断是否是单词和域名,但这样做不但麻烦, ...

  6. 关于php中正则匹配包括换行符在内的任意字符的问题总结

    要使用正则匹配任意字符的话,通常有以下几种方法,这里我分别对每一种方法在使用的过程中做一个总结: 第一种方式:[.\n]*? 示例 ? PHP preg_match_all('/<div cla ...

  7. JavaScript中正则的使用(1)

    通过例子学习正则中的常见语法(1) $num javascript var a = 'javascript'; var b = a.replace(/(java)(script)/gi, '$2-$1 ...

  8. Python中正则匹配使用findall,捕获分组(xxx)和非捕获分组(?:xxx)的差异

    转自:https://blog.csdn.net/qq_42739440/article/details/81117919 下面是我在用findall匹配字符串时遇到的一个坑,分享出来供大家跳坑. 例 ...

  9. html中正则匹配img

    1.正则匹配html中的img标签,取出img的url并进行图片文件下载: /// <summary> /// 将image标签的src属性的url替换为base64 /// </s ...

随机推荐

  1. python torndb模块

    一.torndb概述 torndb是一个轻量级的基于MySQLdb封装的一个模块,其是tornado框架的一部分.其项目主页为:https://github.com/bdarnell/torndb . ...

  2. CobaltStrike 和 Metasploit 联动

    出品|MS08067实验室(www.ms08067.com) 本文作者:掉到鱼缸里的猫(Ms08067内网安全小组成员) 个人觉得CobaltStrike图形化的界面和丰富的功能,是一个超强的后渗透框 ...

  3. Ingress-nginx工作原理和实践

    本文记录/分享 目前项目的 K8s 部署结构和请求追踪改造方案 这个图算是一个通用的前后端分离的 k8s 部署结构: Nginx Ingress 负责暴露服务(nginx前端静态资源服务), 根据十二 ...

  4. Centos7下安装JDK详细过程记录

    1.查询系统是否安装了java: [root@bogon ~]# java -version 根据上图显示,系统默认安装了Openjdk,它和我们使用的java jdk有些区别(具体的可度娘),所以需 ...

  5. Java学习之浅析高内聚低耦合

    •前言 如果你涉及软件开发,可能会经常听到 "高内聚,低耦合" 这种概念型词语. 可是,何为 "高内聚,低耦合" 呢? •概念 "高内聚,低耦合&qu ...

  6. 阿里云 RTC QoS 弱网对抗之变分辨率编码

    本文为 QoS 弱网优化系列的第二篇 作者|安基程.田伟峰 审校| 泰一 视频编码中的变分辨率问题及解决 变分辨率在弱网场景的实际应用中非常常见,网络状况不好的时候降低分辨率可以降低码率,减少块效应, ...

  7. docker部署skywalking

    https://www.cnblogs.com/xiao987334176/p/13530575.html

  8. 【C/C++】memset方法的误区

    目录 一.前言 二.函数作用 三.效率对比 四.误区总结 1.按字节设置 2.设置的值只有最低字节有效 3.堆内存不可直接 sizeof 取首地址 4.传参数组不可直接 sizeof 取首地址 一.前 ...

  9. 记一次phpwind的漏洞测试学习

    实验:phpwind的文件目录遍历 工具:windows2003,Windows10,phpstudy2018,phpwind8.7 在Windows2003中,安装phpstudy并且部署phpwi ...

  10. xctf - forgot

    xctf - forgot check一下,开启了NX 拉入ida中,能找到: __isoc99_scanf,能够无限输入, 循环中,读取32个scanf的字符并进行判断,最后根据结果调用存在栈上的函 ...