如何使用 JavaScript 函数解码 URL？

在本教程中，我们将学习如何使用 JavaScript 解码 URL。

URL 是 统一资源定位符 的缩写。URL 是某个网站的地址。原则上，每个有效的 URL 都链接到不同的资源。这些资源包括 HTML 页面、CSS 文档、图片等。

在实践中，有几个例外情况，最常见的是 URL 链接到不再存在或已迁移的资源。由于 Web 服务器同时处理 URL 表示的资源和 URL 本身，因此由 Web 服务器的所有者负责正确管理该资源及其关联的 URL。

URL 编码是指将 URL 中的某些字符替换为一个或多个字符三元组，这些字符三元组由百分号“%”后跟两位十六进制数字组成。三元组的两位十六进制数字表示替换字符的数值。URL 编码的反向过程是 URL 解码。

在使用查询参数向 API 发出 GET 请求时，编码和解码 URL 和 URL 组件是 Web 开发中的一项常见活动。通常，会构建包含查询参数的 URL 字符串，并且响应服务器必须解码此 URL 以理解它。浏览器会自动编码 URL，在发出请求之前将某些特殊字符转换为其他保留字符。

以下是使用 JavaScript 函数解码 URL 的方法。

使用 decodeURI() 方法

decodeURI() 方法解码由 encodeURI() 创建的 URI。此函数接受一个参数，该参数包含要解码的字符串。此函数返回解码后的字符串（原始字符串）。

当编码的 URL 包含不正确的字符序列时，会抛出 URIError（“格式错误的 URI 序列”）异常。它使用它所表示的字符替换编码的 URI 中的每个转义序列，但不解码 encodeURI 可能无法引入的转义序列。转义序列不会解码字符 #。

语法

const decodedURL = decodeURI(url);

decodeURI() 函数接收 URL 的输入并对其进行解码。该值存储在变量 decodedURL 中。

示例

在此示例中，我们获取了编码 URL 的输入。使用 decodeURI() 函数解码 URL，并在用户屏幕上打印解码后的 URL。

<html>
<body>
   <h2> Decode a URL using <i> decodeURI() </i> function </h2>
   <p> Below is the decoded URL: </p>
   <p id = "root"> </p>
   <script>
      let root = document.getElementById("root");
      const url =
      `https://www.google.com/search?q=facebook&rlz=1C1RLNS_enIN812IN812&oq=fac
      ebook&aqs=chrome..69i57j46i131i199i433i465i512j0i131i433i512l4j0i512j0i13
      1i433i512j0i131i433j0i271.4255j0j15&sourceid=chrome&ie=UTF-8`;
      const decodedURL = decodeURI(url);
      root.innerHTML = decodedURL;
   </script>
</body>
</html>

使用 decodeURIComponent() 方法

decodeURIComponent() 方法解码之前由 encodeURIComponent 或类似过程生成的 URI 组件。解码后的指定编码统一资源标识符 (URI) 组件作为新字符串返回。此方法接受一个包含编码字符串的参数。

此方法返回 URL 字符串的解码组件。如果使用不当，它会引发 URIError（“格式错误的 URI 序列”）错误。编码的 URL 组件中的每个转义序列都替换为它所表示的字符。

语法

const decodedComponent = decodeURIComponent(component);

decodeURIComponent() 函数接收 URL 组件输入并对其进行解码。该值存储在变量 decodedComponent 中。

示例

在此示例中，编码 URL 的一个组件作为输入存储在 component 变量中。% 符号表示该组件已编码。decodeURIComponent() 函数解码 URL 组件，这会删除百分号并显示它们之间的字符串。解码后的组件在用户屏幕上打印。

<html>
<body>
   <h2> Decode a URL using <i> decodeURIComponent() </i> Method </h2>
   <p> Below is the decoded URL: </p>
   <p id = "root"> </p>
   <script>
      let root = document.getElementById("root");
      const component = "Tutorials%20Point%20Simply%20Easy%20Learning"
      const decodedComponent = decodeURIComponent(component);
      root.innerHTML = decodedComponent;
   </script>
</body>
</html>

使用 unescape() 方法

unescape() 方法通过用它所表示的字符替换十六进制转义序列来创建一个新字符串。可以使用类似 escape 的函数来引入转义序列。一个新字符串，其中某些字符未转义。

unescape 函数是全局对象属性。此方法仅解码特殊字符；它已弃用。@ - +. / * _ 是例外字符。

语法

const decodedurl = unescape(encodedURL);

unescape() 函数接收编码 URL 的输入并解码其字符。该值存储在“decodedurl”变量中。

示例

在此示例中，给定一个 URL 作为输入。此 URL 使用 encodeURI() 函数进行编码并存储在 encodedURL 变量中。escape() 函数将单个字符串作为参数并对其进行编码，以便可以通过支持 ASCII 字符的计算机网络传输。然后，使用 JavaScript 的 unescape() 函数解码 URL。此解码后的 URL 在用户屏幕上打印。

<html>
<body>
   <h2> Decode a URL using <i> unescape() </i> Method </h2>
   <p> Below is the decoded URL: </p>
   <p id = "root"> </p>
   <script>
      let root = document.getElementById("root");
      const url = "https://www.twitter.com";
      const encodedURL = encodeURI(url);
      const escapeurl = escape(url);
      const decodedurl = unescape(encodedURL);
      root.innerHTML = decodedurl;
   </script>
</body>
</html>

在本教程中，我们学习了如何使用 JavaScript 函数解码统一资源定位符。本教程解释了三个 JavaScript 函数，即 decodeURI() 函数、decodeURIComponent() 函数和 unescape() 函数。这些函数用于在 JavaScript 中解码 URL。

更新于: 2022-10-25

889 次查看

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.