由手机号正则引发的思考，正则属性 lastIndex

news2025/1/15 16:18:29

问题：

let reg = /^1[3456789]\d{9}$/g 正则是验证手机号的证，为何突然不能验证正确的手机号了呢？其中有何蹊跷？

解决方案：底部有3种解决方案，方案3解决最稳妥

先来看一段正则：

let reg = /^1[3456789]\d{9}$/g

这个正则我们平时用来验证手机号的，好像也看不出什么毛病，把正则放到浏览器控制台，简单代入，可以对手机号正确验证
在这里插入图片描述

接着我们把这个正则拿到实战中使用：

  <input type="text" placeholder="请输入">
  <script>
    let input = document.querySelector('input');
    let reg = /^1[3456789]\d{9}$/g
    input.oninput = function (e) {
      console.log(reg.test(e.target.value));
      if (reg.test(e.target.value)) {
        console.log('手机号完整');
      } else {
        console.log('手机号不完整');
      }
    }
  </script>

再来看看这段代码的结果：

在输入框输入11位手机号后结果怎么和预期的不一样
按预期的想法应该提示 手机号完整 才对，为什么我输入了11位手机号却提示 手机号不完整 呢？

我们在正则文档上看到有lastIndex这个属性，看描述：

根据文档我们在写个类似的demo看lastIndex表达的具体意思：

当正则后使用了g 会默认 以 lastIndex 属性所指的位置作为下次检索的起始点 ，
第一次执行regs.test(num)，结果为true ，regs.lastIndex 为 1 ，因为匹配到了1，所以从2开始，这里的2索引为1
第二次执行regs.test(num)，结果为true ，regs.lastIndex 为 4 ，因为匹配到了1，所以从2开始，这里的2索引为4
第三次执行regs.test(num)，结果为false，lastIndex被重置为0，regs.lastIndex为 0