为什么我复制的中文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参数的函数。通常会依据?,&进行参数处理。当时的我就担心,会不会出现多个特殊字符的情况。 - 在对比思考一下这边博客了解到的内容。才发现,担心的情况是会有的,但是会做特殊转义,避免相关问题了。
- 加油
相关文章:
为什么我复制的中文url粘贴出来会是乱码的? 浏览器url编码和解码
为什么我复制的中文url粘贴出来会是乱码的? 浏览器url编码和解码 Start 番茄最近涉及到一些和单点登录相关的业务需求,在实现功能的过程中,难免少不了和 url 打交道。但是在打交道的过程中,遇到一个痛点:明明我复制的…...
移动端适配
是看的b站一个老哥的视频,做的汇总,讲的嘎嘎棒。视频链接:b站链接 视口viewport pc端视口就是可视化的窗口,不包含浏览器工具栏但是移动端,不太一样,布局的视口和可见的视口是不太一样的 移动端的网页…...
【FPGA】Verilog:时序电路应用 | 序列发生器 | 序列检测器
前言:本章内容主要是演示Vivado下利用Verilog语言进行电路设计、仿真、综合和下载 示例:序列发生器与序列检测器 功能特性: 采用 Xilinx Artix-7 XC7A35T芯片 配置方式:USB-JTAG/SPI Flash 高达100MHz 的内部时钟速度 存储器…...
Biomod2 (下):物种分布模型建模
这里写目录标题1.给出一个线性回归模型并求出因子贡献度2.biomod22.1 pseudo-absences:伪不存在点(PA)2.1.1 random2.2.2 disk2.2.3 user.defined method3.使用网格划分区域3.1 计算质心4. 完整案例1.给出一个线性回归模型并求出因子贡献度 ##---------…...
Linux性能学习(2.2):内存_进程线程内存分配机制探究
文章目录1 进程内存分配探究1.1 代码1.2 试验过程2 线程内存分配探究2.1 代码2.2 试验过程3 总结参考资料:1. 嵌入式软件开发杂谈(3):Linux下内存与虚拟内存2. 嵌入式软件开发杂谈(1):Linux下最…...
BPMN2.0规范及流程引擎选型方案
BPMN2.0规范及流程引擎选型方案一、基本概念二、BPMN意义三、主要元素3.1 活动任务子流程调用活动事件子流程事务3.2 网关排他网关包容网关并行网关事件网关3.3 事件开始事件结束事件中间事件3.4 辅助泳道图注释与组数据存储四、图类型4.1 编排图4.2 会话图五、技术选型5.1 前端…...
VMware虚拟机安装Linux教程
前言 本文小新为大家带来 VMware虚拟机安装Linux教程 ,后边将为大家分享Linux系统的相关知识与操作,在此之前的第一步我们需要在我们的电脑上搭建好一个Linux系统的环境,本文的具体内容包括VMware虚拟机软件安装与Linux系统安装~ 不积跬步&a…...
多人协作|RecyclerView列表模块新架构设计
多人协作|RecyclerView列表模块新架构设计多人协作设计图新架构设计与实现设计背景与新需求新架构设计多人协作设计图 根据产品设计,将首页列表即将展示内容区域,以模块划分成多个。令团队开发成员分别承接不同模块进行开发,且互不影响任务开…...
SpringBoot (六) 整合配置文件 @Value、ConfigurationProperties
哈喽,大家好,我是有勇气的牛排(全网同名)🐮🐮🐮 有问题的小伙伴欢迎在文末评论,点赞、收藏是对我最大的支持!!!。 1 使用 Value 注解 /** Auth…...
docker 入门篇
docker为什么会出现? 一款产品:开发---->运维,两套环境!应用环境,应用配置! 常见问题:我的电脑可以运行,版本更新,导致服务不可用。 环境配置十分的麻烦,…...
MapReduce的shuffle过程详解
shuffle流程概括 因为频繁的磁盘I/O操作会严重的降低效率,因此“中间结果”不会立马写入磁盘,而是优先存储到Map节点的“环形内存缓冲区”,在写入的过程中进行分区(partition),也就是对于每个键值对来说&a…...
【软件使用】MarkText下载安装与汉化设置 (markdown快捷键收藏)
一、安装与汉化 对版本没要求的可以直接选择 3、免安装的汉化包 1、下载安装MarkText MaxText win64 https://github.com/marktext/marktext/releases/download/v0.17.1/marktext-setup.exe 使用迅雷可以快速下载 2. 配置中文语言包 中文包下载地址:GitHub - chi…...
LeetCode笔记:Biweekly Contest 99
LeetCode笔记:Biweekly Contest 99 1. 题目一 1. 解题思路2. 代码实现 2. 题目二 1. 解题思路2. 代码实现 3. 题目三 1. 解题思路2. 代码实现 4. 题目四 1. 解题思路2. 代码实现 比赛链接:https://leetcode.com/contest/biweekly-contest-99 1. 题目一…...
初探富文本之CRDT协同实例
初探富文本之CRDT协同实例 在前边初探富文本之CRDT协同算法一文中我们探讨了为什么需要协同、分布式的最终一致性理论、偏序集与半格的概念、为什么需要有偏序关系、如何通过数据结构避免冲突、分布式系统如何进行同步调度等等,这些属于完成协同所需要了解的基础知…...
团队死气沉沉?10种玩法激活你的项目团队拥有超强凝聚力
作为项目经理和PMO,以及管理者最头疼的是团队的氛围和凝聚力,经常会发现团队死气沉沉,默不作声,你想尽办法也不能激活团队,也很难凝聚团队。这样的项目团队你很难带领大家去打胜仗,攻克堡垒。但是如何才能避…...
Spring三级缓存核心思想
spring在启动时候,会创建bean,并给bean填充属性,这事会使用到三级缓存 private final Map<String, Object> singletonObjects new ConcurrentHashMap<>(256); //一级缓存private final Map<String, Object> earlySingleto…...
深度学习算法训练和部署流程介绍--让初学者一篇文章彻底理解算法训练和部署流程
目录 1 什么是深度学习算法 2 算法训练 2.1 训练的原理 2.2 名词解释 3 算法C部署 3.1 嵌入式终端板子部署 3.3.1 tpu npu推理 3.3.2 cpu推理 3.2 服务器部署 3.2.1 智能推理 3.2.2 CPU推理 1 什么是深度学习算法 这里不去写复杂的概念,就用通俗的话说…...
计算机网络整理
TCP与UDP 介绍 HTTP:(HyperText Transport Protocol)是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP协议的详细内容请参考RFC2616。HTTP协议采用了请求/响应模型。 TCP:(Transmission Contro…...
闲人闲谈PS之三十八——混合制生产下WBS-BOM价格发布增强
惯例闲话:最近中《三体》的毒很深,可能是电视剧版确实给闲人这种原著粉带来太多的感动,又一次引发了怀旧的热潮,《我的三体-罗辑传》是每天睡前必刷的视频,结尾BGM太燃了。闲人对其中一句台词感触很深——人类不感谢罗…...
Java 根类 Object
java.lang.Object 是 Java 类层次结构中的根类,所有类都直接或间接实现了此类的方法。 Object API 源码 package java.lang;public class Object {private static native void registerNatives();static {registerNatives();}public final native Class<?>…...
三步掌握Windows Cleaner:彻底解决C盘空间不足的智能清理方案
三步掌握Windows Cleaner:彻底解决C盘空间不足的智能清理方案 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服! 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner Windows Cleaner是一款专为Windows系统设…...
利用快马平台与vue3组合式api,十分钟快速搭建后台管理系统原型
最近在尝试用Vue3快速搭建后台管理系统原型时,发现了一个特别高效的工作流。通过组合式API和现成的UI组件库,配合InsCode(快马)平台的智能生成能力,整个过程比传统方式快了好几倍。下面分享下我的实践过程: 项目初始化与结构设计 …...
YimMenu全面指南:GTA V游戏体验的终极优化方案
YimMenu全面指南:GTA V游戏体验的终极优化方案 【免费下载链接】YimMenu YimMenu, a GTA V menu protecting against a wide ranges of the public crashes and improving the overall experience. 项目地址: https://gitcode.com/GitHub_Trending/yi/YimMenu …...
ensp安装遇难题?快马AI助手智能诊断并生成个性化修复方案
eNSP安装遇难题?快马AI助手智能诊断并生成个性化修复方案 最近在搭建网络实验环境时,遇到了eNSP安装后设备启动失败的问题。作为一个网络初学者,面对各种错误代码和复杂的配置步骤,确实有些手足无措。好在发现了InsCode(快马)平台…...
Phi-3-mini-128k-instruct效果展示:128K上下文下跨段落事实一致性问答实例
Phi-3-mini-128k-instruct效果展示:128K上下文下跨段落事实一致性问答实例 1. 模型简介 Phi-3-Mini-128K-Instruct 是一个38亿参数的轻量级开放模型,属于Phi-3系列的最新成员。这个模型最引人注目的特点是它支持长达128K token的上下文窗口,…...
Qwen3-VL-2B低成本方案:边缘设备部署实战案例分享
Qwen3-VL-2B低成本方案:边缘设备部署实战案例分享 边缘设备也能跑多模态大模型?Qwen3-VL-2B给你答案 1. 项目背景与价值 如果你正在寻找一个既强大又轻量的多模态模型,Qwen3-VL-2B-Instruct绝对值得关注。这是阿里最新开源的视觉-语言模型&a…...
戴尔G15终极散热控制指南:告别AWCC臃肿,拥抱轻量级开源方案
戴尔G15终极散热控制指南:告别AWCC臃肿,拥抱轻量级开源方案 【免费下载链接】tcc-g15 Thermal Control Center for Dell G15 - open source alternative to AWCC 项目地址: https://gitcode.com/gh_mirrors/tc/tcc-g15 还在为戴尔G15笔记本的高温…...
WorkshopDL:跨平台工具实现Steam创意工坊资源获取的技术方案
WorkshopDL:跨平台工具实现Steam创意工坊资源获取的技术方案 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 在多平台游戏生态中,玩家常面临创意内容获取…...
2026本科论文降AI率工具哪个好用?实测推荐
这篇是我实测了主流降AI率工具之后写的,不是广告,数据都是我自己测的。 2026年的降AI工具市场,鱼龙混杂。有些号称免费的用完没效果,有些价格贵但退款流程复杂。我帮你们踩过这些坑了,这里把真正有用的列出来。 先说…...
像素时装锻造坊应用场景:NFT项目像素角色皮肤的批量生成方案
像素时装锻造坊应用场景:NFT项目像素角色皮肤的批量生成方案 1. 项目背景与核心价值 像素时装锻造坊(Pixel Fashion Atelier)是一款专为NFT项目设计的像素角色皮肤批量生成工具。它基于Stable Diffusion与Anything-v5技术栈,将传…...
