看不到但摸得到的捣蛋鬼---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.危险

有这么几个场景,大家想象一下:

  1. 有人发了一个text文档,里面只有两个字母,但是接收时却卡死了电脑;
  2. qq上陌生人发来了两个字,手机却重启了;
  3. 数据库查询的时候,字段、sql看起来都对,但是却查不出想要的结果;
  4. url写的没问题,但是总是404~

6.解决

这个的话,百度搜索吧,方法也有很多,我就不赘述了

最后

你好!我是 JHCan333,公众号:爱生活的前端狗 的作者。公众号专注 前端工程师 方向,包括但不限于技术提高、职业规划、生活品质、个人理财等方面,会持续发布优质文章,从各个方面提升前端开发的幸福感。关注公众号,我们一起向前走!


JHCan333
10 声望2 粉丝