看不到但摸得到的捣蛋鬼---Zero Width Space
1.情况如何?
昨天,“某某某”的代码出现了一个bug。大概是这个情况:
有一个提示信息,需要展示,大概这样:
这行文字,在谷歌上一点问题都没有,但是在ie上出现了奇怪的框框。比如这样:
ie浏览器真的是代码检查器啊,稍微一个不注意,就搞事情~~~
2.so why?
经过我的多次实验、摆弄,发现一件事,我在双引号和label之间按下退格键、方向键,会发现,总是多出来一次操作,方向键、退格键总是需要多按一次,才可以删除前双引号。很奇怪很奇怪。
于是,我百度“听大悲咒时应该保持什么心情”、“天台上怎么样不会太冷”。。。
功夫不负有心人,我找到了这个关键词-----Zero Width Space。
百度了一下:
3.这是个什么东西呢?
Zero-width space的Unicode编码为U+FEFF,二进制编码为“xE2x80x8E”,根据维基百科描述,其主要用于后台处理字符边界而又无需可见空格的情况。
简言之:具有空格的功能,但宽度为零。
为了搞清,我这个小东西的unicode的编码是什么,我在这个链接下
http://tool.chinaz.com/tools/...
把我的那个符号考进去,点击中文转unicode,然后就这样:
备注:这种符号可能有很多,大家可以在探索其他的相似符号.
4.代码搞一搞
我敲了一段代码:
<input type="text" id="have10" />
<input type="text" id="have20" />
<script>
var uniCodeStr = "\u0008";
var str = eval("'"+uniCodeStr + "'")
var have10 = "10";
var have20 = "20";
for(var i = 0;i < 10 ; i++ ){
have10 += str;
}
for(var i = 0;i < 20 ; i++ ){
have20 += str;
}
document.getElementById('have10').value = have10;
document.getElementById('have20').value = have20;
</script>
ie上大概这样
谷歌上这样:
大家可以试一试,需要按10次退格键,才可以删到10的位置;需要按20次退格键,才可以删到20的位置。
是不是有一点恐怖?
看不到,但是又实实在在的存在。
5.危险
有这么几个场景,大家想象一下:
- 有人发了一个text文档,里面只有两个字母,但是接收时却卡死了电脑;
- qq上陌生人发来了两个字,手机却重启了;
- 数据库查询的时候,字段、sql看起来都对,但是却查不出想要的结果;
- url写的没问题,但是总是404~
6.解决
这个的话,百度搜索吧,方法也有很多,我就不赘述了
最后
你好!我是 JHCan333,公众号:爱生活的前端狗 的作者。公众号专注 前端工程师 方向,包括但不限于技术提高、职业规划、生活品质、个人理财等方面,会持续发布优质文章,从各个方面提升前端开发的幸福感。关注公众号,我们一起向前走!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。