前端小白历险记(二)原来是你腾讯搞的鬼!
书接前文( https://bbs.huaweicloud.com/blogs/181124 )
在 @胡琦 大大的帮助下,张小白终于学会了用VsCode的hexdump插件查看十六进制原文,从而分析出了: 链接失效是因为 <a href="xxx">abc</a> 第一个a字母和href之间的空格,其实是由两个字节构成,0xC2 0xA0(以下简称C2 A0)。
根据张小白的杠精性尿性,光光知道“C2 A0 !=== 20,从而导致斜杠丢失”这个事实是不能满足张小白的。张小白想知道,自己何以沦落至此?所以C2 A0就变成了张小白心中的梦魇,直到他在度娘盘到了以下内容:
看来这不是一个特例,而是一个普遍的问题。无论是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)的文字中找到了蛛丝马迹。该作者的第一句话引起了张小白的注意:
要知道,张小白在上《WEB前端全栈成长计划》课程的时候,是随时用 微信做笔记的:要么截图,要么发一些文字留存。稍后再对这些内容做整理,就可以形成一篇图文并茂的文字(包括本文的诞生)。
所以,张小白就做了一个很简单的实验:在VScode上快速建立一个HTML文件(还记得!+TAB键吗?不会的,学一下!)
我们预览下:
然后将下面这段代码贴到微信中去:
<a href="http://www.baidu.com">百度</a>
如图所示:
(是的,我可能是发给了我的小号,或者别人的大号,大家都不要猜了)。
然后,我把这段文字,再从微信CTRL-C,CTRL-V回VsCode的HTML文件中。
你看的没错,贴回来就是这个样子,后面好像多了个空格。删掉那个空格,让<>不再飘红:
好像没问题吧?
预览一下:
终于重现故障!大快小白心!
拿出Hexdump大旗。。。
从图中可见,第二个<a href...>的空格已经变成了 C2 A0.
看来,果然是腾讯的微信在使用ctrl-C,ctrl-V往VsCode编辑器拷贝东西的时候,微信会在你拷贝的时候加点“料”。(是防拷贝政策吗?)
这个时候应该怎么办?
试试使用记事本big法:先将微信内容Ctrl-C后,粘贴到记事本上,然后再Ctrl-C记事本上的内容,再Ctrl-V到Vscode里面。
以前一般有格式问题,比如字体字号之类的,张小白只要按照这个办法,相应的格式就会消失。那么,这种办法有效吗?
我们再预览下:
一点用都没有。即便是记事本,也会将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中执行:
打开生成后的代码:space-converted.html 使用hexdump查看:
浏览器预览都可以了:
参考文件:
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
- 点赞
- 收藏
- 关注作者
评论(0)