javascript正则表达式 "\b"问题
2014-04-30 11:16
543 查看
preface
昨晚在看《javascript权威指南》后,看见作者自己封装一个兼容所有浏览器的山寨HTML5新API classLIst类。自己想了想觉得自己也要去玩一下,但是能力还是有限,所以就遇见一个正则表达式的bug,确实自己对正则表达式有兴趣但是掌握不是很好。困扰了一段时间,早上在stack overflow网站中找到了答案。issue description
首先我创建一个类叫CSSClassListCSSClassList = 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 98new 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正则表达式容易被忽略的小问题整理
- 发散思维--javascript、C语言、perl正则表达式处理同一目录搜索问题
- Javascript 正则表达式验证日期,格式如同"2010-10-08"
- javascript正则表达式的容易被忽略的小问题
- 业务需要,得到了两段正则表达式的代码,JAVASCRIPT的(关于车牌号码的校验问题)。
- javascript正则表达式容易被忽略的小问题整理
- JavaScript正则表达式匹配字符出现次数的问题
- JavaScript正则表达式在不同浏览器中可能遇到的问题
- javascript match()函数匹配正则表达式时的返回值问题
- 正确使用带有"g"标记的javascript正则表达式
- 正确使用带有"g"标记的javascript正则表达式
- 调试JavaScript中正则表达式中遇到的问题
- 正则表达式中的或者符号在javascript中的奇怪问题
- javascript正则表达式的test奇怪问题
- 调试JavaScript中正则表达式中遇到的问题
- JavaScript中正则表达式中遇到的问题——测试匹配
- 正则表达式中"."和"*"注意问题
- JavaScript---正则表达式问题
- javascript中的正则表达式的贪婪模式和非贪婪模式等若干问题
- 正则表达式问题:如何理解/href\s*=\s*(?:"(?<1>[^"]*)"|(?<1>\S+))/(转载)