preface
昨晚在看《javascript权威指南》后。看见作者自己封装一个兼容全部浏览器的山寨HTML5新API classLIst类。自己想了想认为自己也要去玩一下。可是能力还是有限。所以就遇见一个正則表達式的bug。确实自己对正則表達式有兴趣可是掌握不是非常好。
困扰了一段时间，早上在stack overflow站点中找到了答案。
issue description
首先我创建一个类叫CSSClassList
- CSSClassList = function(el){
- this.el = typeof el=="object"?
el:document.getElementById(el);
- }
- CSSClassList.prototype.contains = function(cls) {
- var classname = this.el.className, reg = new RegExp("" + cls + "");
- return reg.test(classname);
- }
然后就出问题。你能够试一下。我就不想贴出我的HTML和CSS了，问题就在于你要查询的元素用contains測是否包括指定类选择器都是为false的，不管该元素是否包括。为什么呢？昨天晚上就在这里栽了。
debug
我把我的目标放在正則表達式上，我在想是不是我的正則表達式写错了
- 1 在contains方法中console.log出reg
- 结果：比方我传给contains函数的实參是为"font"，那么console.log出来的是/font/
- 心里活动: 看到这个答案我就郁闷下，这样子应该是能够匹配的到的呀
- 2 在contains方法中return后面的reg改成/font/,就变成了/font/.test(classname)
- 结果：返回的是true
- 心里活动：什么情况，奇葩javascript你在干什么啊！。心中更加郁闷
- 3 在contains方法中的new RegExp("" + cls + "")改成new RegExp(cls)
- 结果：返回的是true
- 心里活动：啊！好像找到问题所在了，是字符串中的问题
- 4 用google搜索stackoverflow相关问题
- 结果：Javascript RegExp and boundaries
- 心里活动：总算让我知道原因所在了。
summary
- ""
- 这个在javascript解析器中它会解释为退格键。我们知道退格键的ASCII码是8。
我们能够这样子来測试下：
- "".charCodeAt(0) == 8 结果是为true
- "\b"
- 是用来阻止javascript解析器把""解析成退格键，能够用相同的方法来測试下
- "\b".length "\b".charCodeAt(0) "\b".chatCodeAt(1)分别为2 92 98
- new RegExp("\b"+cls+"\b")
- 用console.log打印出来是,假如我的cls为"font",打印结果为"font"。而之前那个new RegExp(""+cls+"")打印出来的是"(退格键)font(退格键)",可是在这个单词左右还有两个退格键，所以我匹配不了"font"。这个是本文的重点
last
- CSSClassList.prototype.contains = function(cls) {
- var classname = this.el.className, reg = new RegExp("\b" + cls + "\b");
- return reg.test(classname);
- }