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

javascript正則表達式 "\b"问题的更多相关文章

  1. javascript 正則表達式补充

    定义 JavaScript种正則表達式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数 var reg=new RegExp('<%[^%>]+%&g ...

  2. JavaScript正則表達式知识汇总

    Js 正則表達式知识汇总 正則表達式: 1.什么是RegExp?RegExp是正則表達式的缩写.RegExp 对象用于规定在文本中检索的内容. 2.定义RegExp:var +变量名=new RegE ...

  3. DOM笔记(十):JavaScript正則表達式

    一.RegExp ECMAScript通过RegExp类型类支持正則表達式,语法和Perl类似: var exp = /pattern/flags; patternb部分是不论什么简单的或复杂的正則表 ...

  4. JavaScript 正則表達式

    一.简单介绍 1.什么是正則表達式 正則表達式本身就是一种语言,这在其他语言是通用的. 正則表達式(regular expression)描写叙述了一种字符串匹配的模式,能够用来检查一个串是否含有某种 ...

  5. 经常使用的正則表達式归纳—JavaScript正則表達式

    来源:http://www.ido321.com/856.html 1.正则优先级 首先看一下正則表達式的优先级,下表从最高优先级到最低优先级列出各种正則表達式操作符的优先权顺序: 2.经常使用的正則 ...

  6. javascript——正則表達式

    正則表達式(RegExp对象):主要用于表单验证 1.创建正則表達式: (1).var ret = /pattern/; pattern是内容.能够是正則表達式的内容,能够是字符或是其它的内容 (2) ...

  7. javascript正則表達式

    定义一个正則表達式 能够用字面量 var regex = /xyz/; var regex = /xyz/i; 也能够用构造函数 var regex = new RegExp('xyz'); var ...

  8. JavaScript使用正則表達式

    2.0 简单介绍 正則表達式是能够用来查找与给定模式匹配的文本的搜索模式.比如,在上一章中,我们在一个较长的字符串中查找子字符串Cookbook: var testValue = "This ...

  9. js正則表達式语法

    1. 正則表達式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之同样的 ...

随机推荐

  1. IT English Collection(16) of Message

    1 前言 本文介绍了关于Objective-C中的消息机制,详情如下. 转载请注明出处:http://blog.csdn.net/developer_zhang 2 详述 2.1 原文 A messa ...

  2. 一年后重翻javascript

      回想下自己的工作历程  一年多的ios开发眨眼间就过去了  不过这一切还没有结束,紧随其后的便是前段开发,虽然顶点基础都没有,但是还是通过我的不懈努力最终成功转型,虽然刚开始是通过jq直接入门的 ...

  3. php 多维数组如何用foreach遍历修改其中的一个值

    数组: array(6) { [0]=> array(11) { ["id"]=> string(2) "76" ["topic_id&q ...

  4. C#_Socket网络编程实现的简单局域网内即时聊天,发送文件,抖动窗口。

    最近接触了C#Socket网络编程,试着做了试试(*^__^*) 实现多个客户端和服务端互相发送消息 发送文件抖动窗口功能 服务端: using System; using System.Collec ...

  5. SuperSocket快速入门(二):启动程序以及相关的配置

    如何快速启动第一个程序 既然是快速入门,所以,对于太深奥的知识点将不做讲解,会在后续的高级应用章节中,会对SS进行拆解.所有的实例90%都是来自SS的实例,外加本人的注释进行讲解. 一般应用而言,你只 ...

  6. js操作符

    JS操作符 x + y(数字) 将x和y相加; x + y(字符串) 将x和y拼接在一起; x - y 从x中减去y; x * y 将x和y相乘; x / y 将x除以y; x % y x和y的模(既 ...

  7. HTML5 Canvas图像放大、移动实例1

    1.前台代码 <canvas id="canvasOne" class="myCanvas" width="500" height=& ...

  8. oracle服务开机自启动

    1.修改oracle系统配置文件::/etc/oratab vi /etc/oratab orcl:/opt/oracle/product/10.2.0/db_1:Y 2.在 /etc/init.d/ ...

  9. Swift--基础(二)元组 断言 错误处理

    元组(tuples) 把多个值组合成一个复合值.元组内的值可以是任意类型,并不要求是相同类型 let http404Error = (404, "Not Found") let ( ...

  10. 字符串编码---hash函数的应用

    之前就听说过有个叫做hash表的东西,这段时间在上信息论与编码,也接触了一些关于编码的概念,直到今天做百度之星的初赛的d题时,才第一次开始学并用hash 一开始我用的是mutimap和mutiset, ...