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

来源:互联网 发布:行政区域数据 编辑:程序博客网 时间:2024/06/10 09:47

遇到一个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的选择器语法一样,前一个方法返回匹配的第一个元素,后一个方法返回的是匹配的全部元素,是一个类似数组。

0 0
原创粉丝点击