javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript URL编码和解码

一文详解JavaScript中的URL编码和解码

作者：StriveToY

在本文中,我们将探讨在 JavaScript 中处理 URL 的现代技术,并回答与在 JavaScript 中编码和解码 URL 相关的问题,文中通过代码示例介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下

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

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

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

在 JavaScript 中使用 URL

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

const url = new URL("https://juejin.cn/editor?q=hello world");

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

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

console.log(url.searchParams.toString());
// Output: q=hello+world

const currentUrl = window.location.href;
console.log(currentUrl);

url.searchParams.set("q", "new query");
console.log(url.searchParams.toString());
// Output: q=new+query

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

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）、连字符（“-”）、下划线（“_”）、句点（“.”）和波形符（“~”）之外的所有字符进行编码。

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

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

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

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

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，再加上几个，即：

让我们看一些代码片段。

const url = 'https://www.baidu.com';
console.log(encodeURI(url)); 
// Output: https://www.baidu.com

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

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

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

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

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 进行编码的原因

在 JavaScript 中解码 URL

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

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

功能decodeURIComponent()​

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

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，包括域、路径和查询参数。

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 进行编码的一些常见场景：

const dynamicValue = "hello world";
const encodedURL = "https://juejin.cn/search?q=" + encodeURIComponent(dynamicValue);
console.log(encodedURL);
// Output: "https://juejin.cn/search?q=hello%20world"

<form action="https://juejin.cn/search">
  <input type="text" name="q" value="hello world">
  <input type="submit" value="Search">
</form>

const inputWord = "hello world";
const encodedInputWord = encodeURIComponent(inputWord);
const url = "https://https://juejin.cn//api/search?q=" + encodedInputWord; JAVASCRIPT

何时解码 URL

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

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"

 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 相关的任务。

以上就是一文详解JavaScript中的URL编码和解码的详细内容，更多关于JavaScript URL编码和解码的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文