JavaScript 中的 URL 编码和解码

StriveToY2024-03-22 10:57

URL，是访问互联网资源的地址。每个 URL 都指向网络上的唯一资源。 URL 有时可能包含特殊字符或需要动态操作。

在本文中，我们将探讨在 JavaScript 中处理 URL 的现代技术，并回答与在 JavaScript 中编码和解码 URL 相关的问题。

当在浏览器中输入内容时，会提供一个或多个搜索结果。这些搜索结果的格式令人困惑，包含文本和特殊字符，例如 %、+、?、=、&、<、> 等。

在 JavaScript 中使用 URL

在开始对 URL 进行编码和解码之前，我们需要学习如何在 JavaScript 中使用 URL。当需要构建、解析和操作网址时，这非常有用。现代 JavaScript 提供了一个内置URL类，它提供了处理 URL 的强大功能：

  1. 创建 URL 对象： 要在 JavaScript 中使用 URL，可以使用此 URL 语法创建 URL 对象。
js 复制代码 
const url = new URL("https://juejin.cn/editor?q=hello world");

  1. 访问 URL 组件： 一旦拥有 URL 对象，就可以访问 URL 的各个组件。可以访问以下组件：

    • url.protocol：返回 URL 的协议（例如"https:"）
    • url.hostname：返回 URL 的主机名（例如"juejin.cn"）
    • url.pathname：返回 URL 的路径（例如"/editor"）
    • url.searchParams：返回包含查询参数的 URLSearchParams 对象
js 复制代码 
console.log(url.protocol);     // Output: https:
console.log(url.hostname);     // Output: juejin.cn
console.log(url.pathname);     // Output: /editor
console.log(url.searchParams); // Output: q=hello+world
  1. 将 URL 对象或组件转换为字符串： 可以使用toString()JavaScript 方法获取 URL，或者在本例中获取字符串形式的 URL 组件。
js 复制代码 
console.log(url.searchParams.toString());
// Output: q=hello+world
  1. 获取当前页面 URL ：要获取当前所在网页的当前 URL，请使用该window.location.href属性。
js 复制代码 
const currentUrl = window.location.href;
console.log(currentUrl);
  1. 修改 URL 组件： searchParams可以使用URL 对象的属性轻松修改 URL 的查询参数。
js 复制代码 
url.searchParams.set("q", "new query");
console.log(url.searchParams.toString());
// Output: q=new+query

这将以编码格式将"q"查询参数的值从"hello world"更新为"new+query"。

  1. 构造新的 URL： 还可以通过组合不同的组件或修改现有的组件来构造新的 URL。
js 复制代码 
const newURL = new URL("https://juejin.cn");
newURL.pathname = "/new-path";
newURL.searchParams.set("q", "new query");
console.log(newURL.toString())
// Output: https://juejin.cn/new-path?q=new+query

上面的代码行首先创建一个 URL 对象，设置路径名，然后设置查询参数，构造一个新的 URL。然后它将结果转换为字符串以便于阅读。

尝试运行上面提供的所有代码片段，了解如何在 JavaScript 中使用 URL。

现在我们已经学习了如何在 JavaScript 中使用 URL，接下来我们将学习如何在 JavaScript 中对 URL 进行编码和解码。

在 JavaScript 中编码 URL

对 URL 进行编码本质上意味着将 URL 中的特殊字符转换为可以在互联网上正确传输的格式。

此过程是必要的，因为 URL 中的某些字符（例如空格或符号）可能具有独特的含义，对它们进行编码可确保浏览器和 Web 服务器正确解释它们。

现在，为什么需要对 URL 进行编码？这是因为默认情况下 URL 可以包含的字符受到限制。标准 URL 规范规定 URL 只能包含 ASCII 字符集中的字符，该字符集由 128 个字符组成。这些字符包括大写和小写字母、数字以及有限的特殊字符，例如"-"、"_"、"."和"~"。

保留字符在 URL 中具有特定含义，不属于标准 ASCII 集，如果在 URL 中使用，则必须对其进行编码。保留字符有"/"、"["、"]"、"@"、"%"、":"、"&"、"#"、"@"、"="、"等。

要在 URL 中包含保留字符，必须对它们进行百分比编码，这意味着将它们替换为百分号 ("%")，后跟其十六进制值。例如，由于 URL 不能包含空格，因此空格字符（" "）被编码为"%20"或"+"，而符号（"&"）被编码为"%26"。

JavaScript 提供了两个对 URL 进行编码的函数：encodeURI()和encodeURIComponent()。

功能encodeURIComponent()​

该encodeURIComponent()函数对 URI 组件（例如查询参数）进行编码，其中某些字符具有特殊含义，必须进行编码。它对除标准 ASCII 字母数字字符（AZ、az 和 0-9）、连字符（"-"）、下划线（"_"）、句点（"."）和波形符（"~"）之外的所有字符进行编码。

看看下面的代码片段及其结果：

js 复制代码 
const url = "https://baidu.com";
const encodedURL = encodeURIComponent(url);
console.log(encodedURL);
// Output: https%3A%2F%2Fbaidu.com

在第一个示例中，我们定义了一个变量"url"并为其分配了一个值我们调用该encodedURIComponent()函数，并将"url"作为参数传递。然后，该函数通过用百分比编码表示替换特定字符来对 URL 进行编码，并将其记录到终端。

':' 和 '/' 等字符已替换为其百分比编码表示形式（分别为 %3A 和 %2F）。

js 复制代码 
const url2 = "mango &amp; pineapple";
const encodedURL2 = encodeURIComponent(url2);
console.log(encodedURL2);
// Output: mango%20%26%20pineapple

在示例 2 中，能看到代表空格和与号 (&) 字符的"%20"和"%26"符号吗？传递的值不是 URL，但它是 JavaScript 如何对空格和与号进行编码的一个很好的示例。

有关该encodeURIComponent()函数的更多信息，请参阅MDN 文档。

功能encodeURI()​

该encodeURI函数用于对整个 URI 进行编码，包括整个 URL。它不会对 URI 中允许的某些字符进行编码，例如字母、数字、连字符、句点和下划线。

未编码的字符与encodeURI该函数的字符相同encodeURIComponent，再加上几个，即：

  • 问号（"？"）
  • 井号（"#"）
  • 美元符号（"$"）
  • 与号（"&"）
  • 逗号（"，"）
  • 正斜杠（"/"）
  • 冒号 （"："）
  • 分号（";"）
  • 符号（"@"）
  • 等号（"="）
  • 加号（"+"）

让我们看一些代码片段。

js 复制代码 
const url = 'https://www.baidu.com';
console.log(encodeURI(url)); 
// Output: https://www.baidu.com

结果与给定的 URL 相同，因为该encodeURI()函数不对某些字符（例如斜杠、句点和冒号）进行编码。

如果encodeURIComponent()在同一示例中使用，将观察到某些字符已被编码。让我们尝试一下。

js 复制代码 
const url = 'https://www.baidu.com';
console.log(encodeURIComponent(url)); 
// Output: https%3A%2F%2Fwww.baidu.com

现在，对于更复杂的代码示例，要编码的 URL 的值是查询参数。

js 复制代码 
const url = "https://juejin.cn/search?q=hello world";

console.log(encodeURI(url));
// Output: "https://juejin.cn/search?q=hello%20world"

console.log(encodeURIComponent(url));
// Output: https%3A%2F%2Fjuejin.cn%2Fsearch%3Fq%3Dhello%20world

该encodeURI()函数只是将查询输入中的空格字符编码为"%20"。另一方面，对encodeURIComponent()查询参数中的冒号、斜杠和空格字符进行编码。

有关该encodeURI()函数的更多信息，请参阅MDN 文档。

理解这两个函数之间差异的关键是注意这两个函数对哪些字符进行了编码，哪些字符没有进行编码。虽然它们略有不同，但它们都执行相同的操作 - 对 URL 进行编码，使其更容易在互联网上传输。

需要对 URL 进行编码的原因

  1. 安全性和准确性： URL 可能包含特殊字符，例如空格或查询参数，网络服务器或浏览器可能会误解这些字符。对 URL 进行编码可确保正确解释特殊字符，从而减少错误并确保准确传输。
  2. 数据完整性： 在 URL 中发送数据（例如搜索查询或表单提交）时，编码可确保数据在传输过程中得到保留。解码允许接收器正确处理和解释数据。

在 JavaScript 中解码 URL

解码与编码相反。它恢复编码 URL 的效果。

解码 URL 需要将百分比编码字符转换回其原始形式。当收到编码的 URL 并需要从中提取信息时，解码就很重要，这类似于解决一个难题，必须解码才能接收消息。

功能decodeURIComponent()​

在 JavaScript 中，可以使用该函数解码 URL decodeURIComponent()。当调用此函数来解码 URL 时，它会解码 URI 的每个组成部分。

js 复制代码 
const encodedURL = "https%3A%2F%2Fjuejin.cn%2Fsearch%3Fq%3Dhello%20world";
console.log(decodeURIComponent(encodedURL));
// Output: "https://juejin.cn/search?q=hello world"&quot;"

此处，该decodeURIComponent()函数将编码后的 URL 作为输入并返回解码后的 URL。

此MDN 文档提供了有关此功能的更多信息。

功能decodeURI()​

该decodeURI()函数用于解码整个 URI，包括域、路径和查询参数。

js 复制代码 
const url = "https://sample.com/search?q=hello world";
console.log(encodeURI(url));
// Output: https://sample.com/search?q=hello%20world

console.log(decodeURI(url));
// Output: https://sample.com/search?q=hello world

在上面的示例中，我们使用该函数对 URL 查询参数进行编码encodeURI()，并使用该decodeURI()函数对编码后的 URL 进行解码。

查看MDN 文档以获取有关该decodeURI()方法的更多信息。

学习如何在 JavaScript 中对 URL 进行编码和解码是一回事；学习如何在 JavaScript 中对 URL 进行编码和解码是一回事。了解何时对 URL 进行编码和解码是另一回事。

何时对 URL 进行编码

以下是可能需要对 URL 进行编码的一些常见场景：

  1. 生成动态 URL： 如果应用程序动态生成 URL（例如根据用户输入或数据库值生成链接），请确保任何用户生成的输入都经过正确编码。这可确保 URL 中的任何特殊字符都转换为可以通过 Internet 安全传输的格式。
js 复制代码 
const dynamicValue = "hello world";
const encodedURL = "https://juejin.cn/search?q=" + encodeURIComponent(dynamicValue);
console.log(encodedURL);
// Output: "https://juejin.cn/search?q=hello%20world"
  1. 使用 URL 参数处理表单提交： 当用户提交表单数据（例如用户配置文件）时，表单数据通常作为查询参数包含在 URL 中。如果它包含特殊字符（例如 &、? 或空格），则应在通过 GET 或 POST 请求发送 URL 参数之前对其进行编码。这可以防止由于 URL 中的无效字符导致的意外行为或错误，并确保数据安全传输。
html 复制代码 
<form action="https://juejin.cn/search">
  <input type="text" name="q" value="hello world">
  <input type="submit" value="Search">
</form>
  1. 通过 Ajax 请求发送数据： 发送 Ajax 请求以从服务器检索数据时，通常会在 URL 中包含参数。这些参数可能包含特殊字符，因此有必要对 URL 进行编码，以确保的 Ajax 请求正常工作并避免特殊字符引起的意外问题。
js 复制代码 
const inputWord = "hello world";
const encodedInputWord = encodeURIComponent(inputWord);
const url = "https://https://juejin.cn//api/search?q=" + encodedInputWord; JAVASCRIPT

何时解码 URL

以下是可能需要解码 URL 的一些常见场景：

  1. 处理从外部源接收的 URL： 外部源（例如 API 响应、用户输入）可以提供编码的 URL。解码这些 URL 可以让提取原始信息并确保数据得到正确解释。
js 复制代码 
const encodedURL = "https%3A%2F%2Fbaidu.com%2Fsearch%3Fq%3Dhello%20world";
const decodedURL = decodeURIComponent(encodedURL);
console.log(decodedURL); // Output: "https://baidu.com/search?q=hello world"
  1. 在用户界面中显示 URL： 在应用程序的用户界面中显示 URL 时，请确保它们采用原始的、人类可读的格式。对 URL 进行解码可确保它们正确地显示给用户。
js 复制代码 
 const encodedURL = "https%3A%2F%2Fbaidu.com%2Fsearch%3Fq%3Dhello%20world";
 const decodedURL = decodeURIComponent(encodedURL);
 document.getElementById("url").textContent = decodedURL; // Output on the browser UI: "https://baidu.com/search?q=hello world"

URL 编码和解码工具

除了大多数编程语言中用于编码和解码 URL 的内置函数之外，还有在线工具可用于执行基本的编码和解码操作。此类工具的示例包括urlencode.org、urldecoder.org和gochyu url encode。

这些工具使用起来很简单：输入想要编码或解码的 URL，即可获得结果。

结论

总之，理解 URL 编码和解码的概念对于任何 Web 开发人员来说都是至关重要的。这些流程可确保通过互联网传输数据时的数据完整性、安全性和准确性。了解何时以及如何对 URL 进行编码或解码可以帮助开发人员开发安全可靠的 Web 应用程序，从而有效地处理与 URL 相关的任务。

点赞收藏支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

往期热门精彩推荐

# ES2024 Temporal API------JavaScript时间与日期处理的革命性新篇章

# 关于浏览器调试的30个奇淫技巧

# Next.js 的路由为什么是这样的

# 2024最新程序员接活儿搞钱平台盘点

解锁 JSON.stringify() 5 个鲜为人知的功能

解锁 JSON.stringify() 7 个鲜为人知的坑

如何去实现浏览器多窗口互动

面试相关热门推荐

前端万字面经------基础篇

前端万字面积------进阶篇

简述 pt、rpx、px、em、rem、%、vh、vw的区别

实战开发相关推荐

前端常用的几种加密方法

探索Web Worker在Web开发中的应用

不懂 seo 优化？一篇文章帮你了解如何去做 seo 优化

【实战篇】微信小程序开发指南和优化实践

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂？这篇文章帮你彻底搞定虚拟 DOM

移动端相关推荐

移动端横竖屏适配与刘海适配

移动端常见问题汇总

聊一聊移动端适配

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

更多精彩详见：个人主页

相关推荐
编程零零七3 小时前
Python数据分析工具(三)：pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
北岛寒沫4 小时前
JavaScript（JS）学习笔记 1（简单介绍 注释和输入输出语句 变量 数据类型 运算符 流程控制 数组）
javascript·笔记·学习
everyStudy4 小时前
JavaScript如何判断输入的是空格
开发语言·javascript·ecmascript
(⊙o⊙)~哦5 小时前
JavaScript substring() 方法
前端
无心使然云中漫步5 小时前
GIS OGC之WMTS地图服务，通过Capabilities XML描述文档，获取matrixIds，origin，计算resolutions
前端·javascript
Bug缔造者5 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
xnian_6 小时前
解决ruoyi-vue-pro-master框架引入报错，启动报错问题
前端·javascript·vue.js
麒麟而非淇淋6 小时前
AJAX 入门 day1
前端·javascript·ajax
2401_858120536 小时前
深入理解MATLAB中的事件处理机制
前端·javascript·matlab
阿树梢7 小时前
【Vue】VueRouter路由
前端·javascript·vue.js
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习