为何正则.test()方法处理onclick行为不可靠？原生JS计算器求助

看起来你遇到的问题大概率是正则表达式的**全局匹配标志g**导致的！这是使用RegExp.test()时非常容易踩的坑，我来给你拆解一下：

问题根源：全局正则的lastIndex陷阱 #

当你给正则加上g标志（比如/[+\-*/]{2,}/g），JavaScript会在正则实例上维护一个lastIndex属性，记录上一次匹配结束的位置。第一次调用.test()时，它从字符串开头开始匹配，找到连续运算符后返回true，同时把lastIndex更新到匹配结束的位置。

但第二次调用.test()时，它会从lastIndex的位置开始匹配，而不是从头开始。如果此时输入的字符串在lastIndex之后没有连续运算符，就会错误返回false，导致你的代码进入else分支，允许了不该输入的内容。

解决方案：去掉全局标志，或重置lastIndex #

方案1：移除全局匹配标志g（推荐） #

因为你只需要检测字符串是否存在连续运算符，不需要全局查找所有匹配项，所以完全不需要g标志：

// 正确的正则写法，去掉g
const consecutiveOpsReg = /[+\-*/]{2,}/;

// 在输入判断中使用
if (consecutiveOpsReg.test(displayValue)) {
  // 阻止连续运算符输入，比如不更新显示内容
  return;
} else {
  // 正常处理输入
}

这样每次调用.test()都会从字符串开头重新匹配，不会有lastIndex的干扰，测试结果会始终准确。

方案2：手动重置lastIndex（不推荐，除非有特殊需求） #

如果你因为某些原因必须保留g标志，那每次调用.test()前手动把lastIndex重置为0：

const consecutiveOpsReg = /[+\-*/]{2,}/g;

// 调用前重置lastIndex
consecutiveOpsReg.lastIndex = 0;
if (consecutiveOpsReg.test(displayValue)) {
  // 阻止输入
} else {
  // 正常处理
}

额外优化：考虑开头/结尾的运算符场景 #

如果你还想限制用户在输入开头就输入运算符（比如+23），或者结尾连续输入单个运算符（比如23+），可以扩展正则：

// 匹配开头是运算符，或者存在连续运算符，或者结尾是运算符
const invalidInputReg = /^[+\-*/]|[+\-*/]{2,}|[+\-*\/]$/;

这样能覆盖更多不合理的输入场景。

内容的提问来源于stack exchange，提问作者jolt