创建示例项目

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

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. MySQL入门(3)——数据类型

    MySQL入门(3)--数据类型 数字类型 整数数据类型: 数据类型 取值范围 说明 单位 TINYINT 符号值:-127~127无符号值:0~255 最小的整数 1字节 BIT 符号值:-127~ ...

  2. kubernetes 降本增效标准指南| 容器化计算资源利用率现象剖析

    作者:詹雪娇,腾讯云容器产品经理,目前主要负责腾讯云集群运维中心的产品工作. 张鹏,腾讯云容器产品工程师,拥有多年云原生项目开发落地经验.目前主要负责腾讯云TKE集群和运维中心开发工作. 引言 降本增 ...

  3. 【JVM进阶之路】七:垃圾收集器盘点

    在前面,我们已经了解了JVM的分代收集,知道JVM垃圾收集在新生代主要采用标记-复制算法,在老年代主要采用标记-清除和标记-整理算法.接下来,我们看一看JDK默认虚拟机HotSpot的一些垃圾收集器的 ...

  4. Spring Boot 轻量替代框架 Solon 1.3.18 发布

    Solon 是一个微型的Java开发框架.项目从2018年启动以来,参考过大量前人作品:历时两年,4000多次的commit:内核保持0.1m的身材,超高的跑分,良好的使用体验.支持:RPC.REST ...

  5. PAT (Advanced Level) Practice 1023 Have Fun with Numbers (20 分) 凌宸1642

    PAT (Advanced Level) Practice 1023 Have Fun with Numbers (20 分) 凌宸1642 题目描述: Notice that the number ...

  6. PAT (Advanced Level) Practice 1019 General Palindromic Number (20 分) 凌宸1642

    PAT (Advanced Level) Practice 1019 General Palindromic Number (20 分) 凌宸1642 题目描述: A number that will ...

  7. 第24 章 : Kubernetes API 编程利器:Operator 和 Operator Framework

    Kubernetes API 编程利器:Operator 和 Operator Framework 本节课程主要分享以下三方面的内容: operator 概述 operator framework 实 ...

  8. 第22 章 : 有状态应用编排 StatefulSet

    有状态应用编排 StatefulSet 本文将主要分享以下四方面的内容: "有状态"需求 用例解读 操作演示 架构设计 "有状态"需求 课程回顾 我们之前讲到过 ...

  9. CyclicBarrier:人齐了,老司机就可以发车了!

    上一篇咱讲了 CountDownLatch 可以解决多个线程同步的问题,相比于 join 来说它的应用范围更广,不仅可以应用在线程上,还可以应用在线程池上.然而 CountDownLatch 却是一次 ...

  10. 面试准备——计算机网络(TCP的三次握手和四次挥手)

    一.TCP的报文结构 红色圈标出的是在讨论三次握手和四次挥手时会用到的首部字段: 顺序号(seq):TCP对从网络层传下来的数据报文进行分组,分成一段一段的TCP报文段,并对这些报文段进行编号.seq ...