js 正则表达式/g对exec()测试结果的影响

6 篇文章 0 订阅

遇到一个bug,代码的执行完全不在期望之内。
我写了一段这样的代码,实现的功能,就想实现一个简单的jquery选择器功能。

function $(selector){
        var ID_REG=/^\#(\w*)$/g;
        var CLASS_REG=/^\.(\w*)$/g;

        if(ID_REG.test(selector)){
            var tempt_result=ID_REG.exec(selector);
            return document.getElementById(tempt_result[0]);
        }else if(CLASS_REG.test(selector)){
            var tempt_result=CLASS_REG.exec(selector);
            return document.getElementByClass(tempt_result[0]);
        }else{
            return null;

        }
    }
   console.log($("#images"));
   console.log($(".images"));

按常理,我先test一下选择器是否和正则匹配,如果匹配,我就通过exec去提取id或者class。但是我多次测试的tempt_result这个变量始终为空。
后来发现问题存在于正则是在全局模式下进行匹配的,并且问题就出来。
在js中每个正则表达式都是一个对象,这个对象有一个特别的实例属性lastIndex,表示的是下一次搜索开始的位置。在《js高级程序设计》这本书中提到,

对于exec()方法而言,在全局模式下,它每次执行都只会返回一个匹配项,并且会改变lastIndex的值,再次执行的时候,会从lastIndex这个位置开始继续搜索。但是对于非全局模式,exec每次都只会返回第一个匹配的信息,lastIndex也不会变化。

书中只提了exec方法,却没有提test方法对lastIndex属性的影响,其实test在全局模式下,也会影响到lastIndex的值。

在上面的示例中,我首先使用了test方法来匹配,执行完之后,由于是整个串都匹配,所以ID_REG的lastIndex就是selector(『#images』)的length=7,当再执行exec的时候,由于从7开始没有匹配的串,所以tempt_result 就是null,此时的lastIndex就是0。

找到原因之后,就很好解决了,去掉全局模式,同时也提醒不要滥用正则的全局模式,既然匹配的是整个串(^$就分别匹配的是字符串的开头和结尾),那么就不需要全局模式。

=======================更新2016-12-27==================
html5 中新增了 document.querySelector(selector),document.querySelectorAll(selector)两个方法,其中的selector语法和jquery的选择器语法一样,前一个方法返回匹配的第一个元素,后一个方法返回的是匹配的全部元素,是一个类似数组。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值