Javascript Regular Expression & amp; quot; \ B & amp; quot; Problem

Preface

After reading the javascript authoritative guide last night, I saw the author encapsulate a new API classLIst class of HTML5, which is compatible with all browsers. I thought about it and thought that I had to play it, but the ability was still limited. So I encountered a bug in regular expressions. I was really interested in regular expressions, but I was not very familiar with them. After some time, I found the answer on the stack overflow website in the morning.

Issue description

First, I create a class namedCSSClassList

CSSClassList = function (el ){

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

} Then add the method to the CSSClassList prototype. I mimic the contains (check if an element's list of classList contains a specific class) IN THE classList class ), this method is used to check whether the element contains the specified class selector.

CSSClassList. prototype. contains = function (cls ){

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

Return reg. test (classname );

}

Then there is a problem. You can try it and I don't want to post my HTML and CSS. The problem is that the elements you want to query use contains to test whether the specified class selector is false, whether or not the element is contained. Why? It was planted here last night.

Debug

I put my goal on a regular expression. I was wondering if my regular expression was wrong.

1. In the contains method, console. log out reg results: for example, if the real parameter that I pass to the contains function is "font", then console. log out is/font/heart activity: I am depressed when I see this answer, this should be a matching result. 2. In the contains method, the reg after return is changed to/font/, and then/font /. test (classname) Result: The returned result is true heart activity: what is the situation, wonderful javascript what are you doing !! Even more depressing 3 in the contains method, change new RegExp ("\ B" + cls + "\ B") to new RegExp (cls). Result: true is returned. Activity: Ah! It seems that the problem has been found. The problem is \ B in the string. 4. Search stackoverflow using google. Result: Javascript RegExp and boundaries. Activity: finally let me know the cause. Summary "\ B" is interpreted as the backspace key in the javascript parser. We know that the ASCII code of the backspace key is 8. We can test it like this: "\ B ". charCodeAt (0) = 8 the result is true "\ B" \ is used to prevent the javascript parser from Parsing "\ B" into a return key, you can use the same method to test "\ B ". length "\ B ". charCodeAt (0) "\ B ". chatCodeAt (1) is 2 92 98new RegExp ("\ B" + cls + "\ B") respectively. log is printed. If my cls is "font", the output is "\ bfont \ B ", the previous new RegExp ("\ B" + cls + "\ B") printed "(backspace key) font (backspace key )", but there are two backspace keys around the word, so I cannot match "font ". This is the focus of this article.

CSSClassList. prototype. contains = function (cls ){

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

Return reg. test (classname );

} ReferenceJavascript RegExp and boundaries