javascript正则表达式 "\b"问题

preface

昨晚在看《javascript权威指南》后，看见作者自己封装一个兼容所有浏览器的山寨HTML5新API classLIst类。自己想了想觉得自己也要去玩一下，但是能力还是有限，所以就遇见一个正则表达式的bug，确实自己对正则表达式有兴趣但是掌握不是很好。困扰了一段时间，早上在stack overflow网站中找到了答案。

issue description

首先我创建一个类叫CSSClassList

  CSSClassList = function(el){

   this.el = typeof el=="object"?el:document.getElementById(el);

}

然后就在CSSClassList原型中添加方法，我模仿classList类中的contains(check if an element's list of classes contains a specific class),这个方法是用来检查该元素有没包含指定的类选择器。

  CSSClassList.prototype.contains = function(cls) {

   var classname = this.el.className, reg = new RegExp("\b" + cls + "\b");

   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("\b" + cls + "\b")改成new RegExp(cls)

结果：返回的是true

心里活动：啊！好像找到问题所在了，是字符串中的\b问题

4 用google搜索stackoverflow相关问题

结果：Javascript RegExp and boundaries

心里活动：总算让我知道原因所在了。

summary

"\b"

这个在javascript解析器中它会解释为退格键，我们知道退格键的ASCII码是8。我们可以这样子来测试下：

"\b".charCodeAt(0) == 8 结果是为true

"\\b"

\是用来阻止javascript解析器把"\b"解析成退格键，可以用同样的方法来测试下

"\\b".length "\\b".charCodeAt(0) "\\b".chatCodeAt(1)分别为2 92 98

new RegExp("\\b"+cls+"\\b")

用console.log打印出来是,假如我的cls为"font",打印结果为"\bfont\b"，而之前那个new RegExp("\b"+cls+"\b")打印出来的是"(退格键)font(退格键)",但是在这个单词左右还有两个退格键，所以我匹配不了"font"。这个是本文的重点

last

   CSSClassList.prototype.contains = function(cls) {

    var classname = this.el.className, reg = new RegExp("\\b" + cls + "\\b");

    return reg.test(classname);

}

reference

Javascript RegExp and boundaries