当前位置: 首页 > news >正文

为什么我复制的中文url粘贴出来会是乱码的? 浏览器url编码和解码

为什么我复制的中文url粘贴出来会是乱码的? 浏览器url编码和解码

Start

  • 番茄最近涉及到一些和单点登录相关的业务需求,在实现功能的过程中,难免少不了和 url 打交道。
  • 但是在打交道的过程中,遇到一个痛点:明明我复制的 url 是一个很简短的url,但是粘贴到浏览器的时候,却变成很长一串。
  • why?

1. 问题场景

举个例子:番茄我突然有一天心血来潮,想要找一个番茄的图片。于是我打开百度,输入番茄,回车搜索。如下图

在这里插入图片描述

可以看到上述截图,我们访问的 url 实际就是 https://www.baidu.com/s?wd=番茄;突然我觉得这个番茄图片特别好看,我想分享给我的小伙伴。于是我复制网站的 url,准备粘贴到我的聊天框中,发送给我的小伙伴。

但是有一个很神奇的现象,我粘贴后的链接,却是这样的:

https://www.baidu.com/s?wd=%E7%95%AA%E8%8C%84

2. 为什么粘贴出来的内容是被转码后的内容呢?

别人的讨论的结果

在这里插入图片描述

可以看到上述的内容,最关键的一个点就是:

因为 URL 本身就不支持中文,所有中文字符都要经过 URL 编码之后才可以传输

如何验证他说的话呢?

打开浏览器控制台,查看 network 选项,刷新页面。在调用接口的时候,发现访问的 url 是被转码后的内容了。如下图:

在这里插入图片描述

所以,转义的原因是:

URl 本身就不支持某些字符,在进行传输的时候,它会经过 URL 编码。

3. 转码相关的疑问

3.1 那些会被转义

对歧义性的数据进行 URL 百分号编码。

3.2 url转义字符原理:

将这些特殊的字符转换成ASCII码,格式为:%加字符的ASCII码,即一个百分号%,后面跟对应字符的ASCII(16进制)码值。例如 空格的编码值是"%20"。

3.3 URL特殊字符需转义

1、空格换成加号(+)
2、正斜杠(/)分隔目录和子目录
3、问号(?)分隔URL和查询
4、百分号(%)制定特殊字符
5、#号指定书签
6、&号分隔参数

3.4 中文字符转义原理

待补充

4. JS中如何实现解码和编码

4.1 解码

decodeURI()
decodeURIComponent()

4.2 编码

encodeURI()
encodeURIComponent()

4.3 中文解释

decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

4.4 使用示例

/* 1.基础编码 */
console.log(encodeURI('番茄'))
// %E7%95%AA%E8%8C%84
console.log(encodeURIComponent('番茄'))
// %E7%95%AA%E8%8C%84/* 2.encodeURIComponent支持特殊字符的编码 */
console.log(encodeURI('番茄#'))
// %E7%95%AA%E8%8C%84#
console.log(encodeURIComponent('番茄#'))
// %E7%95%AA%E8%8C%84%23/* 3.基础解码 */
console.log(decodeURI('%E7%95%AA%E8%8C%84'))
// 番茄
console.log(decodeURIComponent('%E7%95%AA%E8%8C%84'))
// 番茄/* 4.encodeURIComponent支持特殊字符的解码 */
console.log(decodeURI('%E7%95%AA%E8%8C%84%23'))
// 番茄%23
console.log(decodeURIComponent('%E7%95%AA%E8%8C%84%23'))
// 番茄#

区别: decodeURIComponent() 可以编码和解码URI特殊字符(如#,/,¥等),而 decodeURI()则不能。

End

  • 回想起日常工作中经常使用的截取 url 参数的函数。通常会依据?& 进行参数处理。当时的我就担心,会不会出现多个特殊字符的情况。
  • 在对比思考一下这边博客了解到的内容。才发现,担心的情况是会有的,但是会做特殊转义,避免相关问题了。
  • 加油
http://www.lryc.cn/news/30581.html

相关文章:

  • 移动端适配
  • 【FPGA】Verilog:时序电路应用 | 序列发生器 | 序列检测器
  • Biomod2 (下):物种分布模型建模
  • Linux性能学习(2.2):内存_进程线程内存分配机制探究
  • BPMN2.0规范及流程引擎选型方案
  • VMware虚拟机安装Linux教程
  • 多人协作|RecyclerView列表模块新架构设计
  • SpringBoot (六) 整合配置文件 @Value、ConfigurationProperties
  • docker 入门篇
  • MapReduce的shuffle过程详解
  • 【软件使用】MarkText下载安装与汉化设置 (markdown快捷键收藏)
  • LeetCode笔记:Biweekly Contest 99
  • 初探富文本之CRDT协同实例
  • 团队死气沉沉?10种玩法激活你的项目团队拥有超强凝聚力
  • Spring三级缓存核心思想
  • 深度学习算法训练和部署流程介绍--让初学者一篇文章彻底理解算法训练和部署流程
  • 计算机网络整理
  • 闲人闲谈PS之三十八——混合制生产下WBS-BOM价格发布增强
  • Java 根类 Object
  • 04_Apache Pulsar的可视化监控管理、Apache Pulsar的可视化监控部署
  • 【算法】期末复盘,酒店住宿问题——勿向思想僵化前进
  • Java中的Comparator 与 Comparable详解
  • 计算机科学导论笔记(二)
  • GEC6818开发板JPG图像显示,科大讯飞离线语音识别包Linux_aitalk_exp1227_1398d7c6运行demo程序,开发板实现录音
  • 如何判断树莓派通过GPIO与5G模块成功连接?
  • Java——包装类和List及ArrayList
  • matlab - 程序流程控制、函数文件、特殊函数、调试与优化
  • Toponogov 比较定理及其应用
  • 力扣sql简单篇练习(二十二)
  • 【开源硬件】STM32F030R8T6系统板