前端小白历险记(二)原来是你腾讯搞的鬼!

举报
张辉 发表于 2020/07/30 08:47:04 2020/07/30
【摘要】 本文介绍了不间断空格的产生原因和消除方法。

书接前文(  https://bbs.huaweicloud.com/blogs/181124  )


在 @胡琦 大大的帮助下,张小白终于学会了用VsCode的hexdump插件查看十六进制原文,从而分析出了: 链接失效是因为 <a href="xxx">abc</a> 第一个a字母和href之间的空格,其实是由两个字节构成,0xC2 0xA0(以下简称C2 A0)


根据张小白的杠精性尿性,光光知道“C2 A0 !=== 20,从而导致斜杠丢失”这个事实是不能满足张小白的。张小白想知道,自己何以沦落至此?所以C2 A0就变成了张小白心中的梦魇,直到他在度娘盘到了以下内容:


image.png


看来这不是一个特例,而是一个普遍的问题。无论是HTML,还是Java,Python,都会遇到类似的问题。甚至这个C2 A0几乎无法通过trim去掉空格,导致原本你想去掉空格的时候,假空格还坚挺地站立在那里。C2 A0叫做 NO-BREAK SPACE。中文翻译过来就是:不间断空格。它会表现为一个半角空格,这跟ASCII码为0x20的空格在展示上完全一样,这造成在VsCode编辑器上就有很大的迷惑性。网上因为这事儿中招的人还特别多。


那么,它到底是如何产生的?张小白一直在想如何重现这个问题。当然,所谓的重现并不是说,在上次错误HTML文档的基础上做Ctrl-C和Ctrl-V,而是看看到底啥情况会出现C2 A0。


直接在VsCode中反复转换好像不大容易试出来,张小白又展开了进一步的搜索,搜索工具除了度娘之外,使用了bing, 360和sogou。(鉴于最近有人因使用科学软件被抓,张小白也不敢学科学)。


但是,即便是小规模的搜索,张小白也不是一无所获,终于在一篇 《C2 A0 特殊空格》(https://www.yangdx.com/2019/12/74.html)的文字中找到了蛛丝马迹。该作者的第一句话引起了张小白的注意:


image.png


要知道,张小白在上《WEB前端全栈成长计划》课程的时候,是随时用 微信做笔记的:要么截图,要么发一些文字留存。稍后再对这些内容做整理,就可以形成一篇图文并茂的文字(包括本文的诞生)。


所以,张小白就做了一个很简单的实验:在VScode上快速建立一个HTML文件(还记得!+TAB键吗?不会的,学一下!)

image.png

我们预览下:

image.png


然后将下面这段代码贴到微信中去:


 <a href="http://www.baidu.com">百度</a>

如图所示:

image.png

(是的,我可能是发给了我的小号,或者别人的大号,大家都不要猜了)。


然后,我把这段文字,再从微信CTRL-C,CTRL-V回VsCode的HTML文件中。

image.png

你看的没错,贴回来就是这个样子,后面好像多了个空格。删掉那个空格,让<>不再飘红:

image.png

好像没问题吧?

预览一下:

image.png

终于重现故障!大快小白心!


拿出Hexdump大旗。。。

image.png

从图中可见,第二个<a href...>的空格已经变成了 C2 A0.


看来,果然是腾讯的微信在使用ctrl-C,ctrl-V往VsCode编辑器拷贝东西的时候,微信会在你拷贝的时候加点“料”。(是防拷贝政策吗?)


这个时候应该怎么办?


试试使用记事本big法:先将微信内容Ctrl-C后,粘贴到记事本上,然后再Ctrl-C记事本上的内容,再Ctrl-V到Vscode里面。

以前一般有格式问题,比如字体字号之类的,张小白只要按照这个办法,相应的格式就会消失。那么,这种办法有效吗?


image.png

image.png

我们再预览下:

image.png

一点用都没有。即便是记事本,也会将C2 A0原封不动的拷贝过去。还是无杠青年。


当然有一种办法,就是你贴到记事本的时候,将空格删掉再重打一遍,不过这个跟你贴到VsCode后删掉空格再重打一遍空格又有何区别呢?


看来使用快捷键或工具来转换C2 A0的方法似乎没用,张小白又找了一些代码转换的方法,如:


Python代码转换法:代码convert.py

# -*- coding:utf-8 -*-
import os
import sys
import io

reload(sys)
sys.setdefaultencoding('utf-8')

#打开源文件,读取内容
org_file=open("C:\Users\zhang\Desktop\space.html","r")
org_str=org_file.read()

#替换为空格
dest_str=org_str.replace(u"\xa0", u'\x20')
#注意,此处"\xa0"不能输入为"\xc2\xa0"!
#print(dest_str)

#打开目的文件,写入替换后的内容
dest_file=io.open("C:\Users\zhang\Desktop\space-converted.html","w",encoding="utf-8")
dest_file.write(dest_str)

在VsCode中执行:

image.png

打开生成后的代码:space-converted.html 使用hexdump查看:

image.png

浏览器预览都可以了:

image.png



参考文件:

1:《C2 A0 特殊空格》 https://www.yangdx.com/2019/12/74.html

2:《C2 A0 不可见字符到底是什么?半角非中断空格》https://blog.csdn.net/qfzhangwei/article/details/89505441

3:《关于替换“c2a0”十六进制字符的方法》https://blog.csdn.net/ampt4027/article/details/101244505

4:《【copy攻城狮日志】斜杠去哪儿了?聊聊前端中进制》https://bbs.huaweicloud.com/forum/thread-66351-1-1.html

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。