Javascript Regular Expression & quot; \ B & quot;

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, the console. log output reg.

Result: for example, if the real parameter passed to the contains function is "font",/font/is output from console. log/

Activity in my heart: I am depressed when I see this answer. This should be something that can be matched.

2. In the contains method, the reg after return is changed to/font/, and it becomes/font/. test (classname)

Result: true is returned.

Heart activity: what is the situation? What are you doing with wonderful javascript !! Depressed

3. In the contains method, change new RegExp ("\ B" + cls + "\ B") to new RegExp (cls)

Result: true is returned.

Heart activity: Ah! It seems that the problem is located. It is the \ B problem in the string.

4. Search for stackoverflow problems by google

Result: Javascript RegExp and boundaries

Activity in mind: finally let me know the reason.

Summary

"\ B"

This will be 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 backspace key. You can test it in the same way.

"\ B". length "\ B". charCodeAt (0) "\ B". chatCodeAt (1) is 2 92 98

New RegExp ("\ B" + cls + "\ B ")

Use console. 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

Last

CSSClassList. prototype. contains = function (cls ){

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

Return reg. test (classname );

}

ReferenceJavascript RegExp and boundaries