javascript代码实例教程-javascript正则表达式 "/b"问题

发布时间:2019-02-04 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-javascript正则表达式 "/b"问题脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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) {
@R_406_2715@ 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

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-javascript正则表达式 "/b"问题全部内容,希望文章能够帮你解决javascript代码实例教程-javascript正则表达式 "/b"问题所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。