javascript正規表達式 "\b"問題

昨晚在看《javascript權威指南》後，看見作者自己封裝一個相容所有浏覽器的山寨html5新api classlist類。自己想了想覺得自己也要去玩一下，但是能力還是有限，是以就遇見一個正規表達式的bug，确實自己對正規表達式有興趣但是掌握不是很好。困擾了一段時間，早上在stack overflow網站中找到了答案。

首先我建立一個類叫cssclasslist

<dl></dl>

<dd></dd>

  cssclasslist = function(el){

<dd>   this.el = typeof el=="object"?el:document.getelementbyid(el);</dd>

<dd>}</dd>

然後就在cssclasslist原型中添加方法，我模仿classlist類中的contains(check if an element‘s list of classes contains a specific class),這個方法是用來檢查該元素有沒包含指定的類選擇器。

<dt></dt>

<dd>  cssclasslist.prototype.contains = function(cls) {</dd>

<dd>   var classname = this.el.classname, reg = new regexp("\b" + cls + "\b");</dd>

<dd>   return reg.test(classname);</dd>

然後就出問題，你可以試一下，我就不想貼出我的html和css了，問題就在于你要查詢的元素用contains測是否包含指定類選擇器都是為false的，無論該元素是否包含。為什麼呢？昨天晚上就在這裡栽了。

我把我的目标放在正規表達式上，我在想是不是我的正規表達式寫錯了

<dt>1 在contains方法中console.log出reg</dt>

<dd>結果：比如我傳給contains函數的實參是為"font"，那麼console.log出來的是/font/</dd>

<dd>心裡活動: 看到這個答案我就郁悶下，這樣子應該是可以比對的到的呀</dd>

<dt>2 在contains方法中return後面的reg改成/font/,就變成了/font/.test(classname)</dt>

<dd>結果：傳回的是true</dd>

<dd>心裡活動：什麼情況，奇葩javascript你在幹什麼啊！！心中更加郁悶</dd>

<dt>3 在contains方法中的new regexp("\b" + cls + "\b")改成new regexp(cls)</dt>

<dd>心裡活動：啊！好像找到問題所在了，是字元串中的\b問題</dd>

<dt>4 用google搜尋stackoverflow相關問題</dt>

<dd>結果：</dd>

<dd>心裡活動：總算讓我知道原因所在了。</dd>

"\b"

<dd>這個在javascript解析器中它會解釋為倒退鍵，我們知道倒退鍵的ascii碼是8。我們可以這樣子來測試下：</dd>

<dd>"\b".charcodeat(0) == 8 結果是為true</dd>

"\\b"

<dd>\是用來阻止javascript解析器把"\b"解析成倒退鍵，可以用同樣的方法來測試下</dd>

<dd>"\\b".length "\\b".charcodeat(0) "\\b".chatcodeat(1)分别為2 92 98</dd>

<dt>new regexp("\\b"+cls+"\\b")</dt>

<dd>用console.log列印出來是,假如我的cls為"font",列印結果為"\bfont\b"，而之前那個new regexp("\b"+cls+"\b")列印出來的是"(倒退鍵)font(倒退鍵)",但是在這個單詞左右還有兩個倒退鍵，是以我比對不了"font"。這個是本文的重點</dd>

<dd>   cssclasslist.prototype.contains = function(cls) {</dd>

<dd>    var classname = this.el.classname, reg = new regexp("\\b" + cls + "\\b");</dd>

<dd>    return reg.test(classname);</dd>