如何在javascript中解析URL？

作者: 图恩分类: 编程开发阅读: 450字数: 4113发布时间： 2023-05-06 22:53:34

你有没有想过了解 URL 在 JavaScript 中是如何工作的？如果是这样，那么您来对地方了！

在本文中，我们将深入探讨 JavaScript 中的 URL 解析问题，并了解如何从 URL 字符串访问某些数据。为此，我们将 URL 的组件分解为各个部分（例如主机名、路径名、查询和哈希），并逐一试。

我们还将介绍在 JavaScript 中使用 URL 字符串时的一些重要提示和最佳实践，因此请确保您坚持到最后！最终，本文是您使用 JavaScript 解析 URL 的所有内容的一站式指南。因此，请坐下来，准备好掌握在JavaScript中使用URL的基础知识。

什么是URL解析，为什么要关心？

构建 Web 应用程序时，了解 URL 解析是一项基本技能。这是将网页地址分解为多个部分以便更轻松地与之交互的过程。

通过了解 URL 解析，您可以充分利用网站快速轻松地浏览页面和信息的能力。

URL 解析不仅有助于导航;它还提供了一种更简单的方法来修改网站和访问数据。通过 URL 分析，您可以使用查询字符串将变量和参数传递给不同的页面，通过更改页面上显示的内容而不刷新整个页面来为用户创建动态体验。

您还可以使用 URL 的路径名部分访问数据库，以便 Web 应用程序可以从中检索数据，而无需将它们包含在表单或类似的输入字段中。最后，您可以使用锚点（以开头的部分）使网站上的导航更加流畅。

JavaScript URL 解析方法概述

将 URL 分解为其组件部分是 Web 开发的重要组成部分。通过了解 URL 的结构，您可以轻松地与后端服务交互并从远程源检索数据。

使用 JavaScript，您可以使用多种方法来解析 URL 并从中获取更多信息。其中包括一下几个：

URL
URLSearchParams
URLSearchParamsAPI
location
window.location

每种方法都有自己的优点和缺点。让我们来看看每一个：

URL：本机对象允许您创建 URL、操作它们、查询它们的部件或为其组件设置新值。它还提供了一些有用的功能，例如编码/解码字符串，其中包含敏感信息，例如密码或其他个人数据。
URLSearchParams：此方法创建一个与 URL 的查询参数对应的键值对对象。您可以使用它来创建不同的参数并根据需要设置其值。
URLSearchParamsAPI：此 API 提供对对象核心功能的访问，允许您以强大的方式操作 URL，例如能够迭代 URL 中的所有元素，而无需自己手动解析它们。
location：该属性返回一个表示当前位置的对象，包括主机名、路径名、搜索和哈希组件，这允许您从应用程序内部创建链接，而无需在每次需要时手动构造 URL。
window.location：与类似，此属性也返回一个对象。

了解 JavaScript URL 解析中的主机名

主机名是您用于访问网页或网站的域名。它通常看起来像这样：。在某些情况下，您还可以使用 IP 地址，例如 .www.dsiab.com https://1.2.3.4

您可以通过 JavaScript 中的 API 方法获取您正在访问的当前页面的主机名：location.hostname

let hostname = window.location.hostname;

此 API 方法返回一个字符串，其中包含您正在访问的当前页面的域名（主机名）（例如）。www.disab.com

主机名 API 方法还有另外两个有用的方法，可用于返回有关域名的更具体信息，例如使用的协议（即 http 或 https）。这些是和.location.protocol location.port

例如，如果您的主机名是，并且您正在使用 HTTPS 访问它，则此代码将按原样返回它：www.dsiab.com

let protocol = window.location.protocol; // returns "https:"
let port = window.location.port; //returns "" (empty string)

但是，如果您使用的是HTTP而不是HTTPS，那么这两种方法将返回以下内容：

let protocol = window .location .protocol; // returns "http:"
let port = window .location .port; //returns "80" (default HTTP port number)

了解 JavaScript URL 解析中的路径名

现在，我们了解了什么是主机名和查询字符串，让我们看看 URL 解析的第四部分也是最后一部分：JavaScript 中的路径名。

路径名描述文件或资源在 Web 服务器上的位置。它以正斜杠开头，后跟其目录名称。假设您要访问，该文件夹由电影，音乐，文学等组成。路径名将如下所示：。/index.html blog/blog/films/index.html

例如，如果您使用 CSS 设置 HTML 页面的样式，则路径名会让您知道 CSS 文件的位置。在我们的示例中，它将类似于 ./blog/films/css/style.css

让我们看看如何使用 JavaScript 获取路径名。您需要做的就是使用以下代码片段：

let url = new URL('https://example.com/blog/films');
let getpathname = url.pathname; // '/blog/films'

您可以在这里亲自尝试一下。默认情况下，如果您没有为用户指定特定文件，则如前所述，它将用作大多数 Web 服务器中的默认文档。index.html

查询字符串和哈希如何在 JavaScript URL 解析中工作

现在您对主机名、路径名和参数有了更好的了解，让我们看一下 URL 的下一部分：查询字符串和哈希。查询字符串和哈希用于指定 URL 的其他部分：

查询字符串对于将有关页面的上下文信息传递到服务器非常有用。
哈希用于指定加载后立即显示的页面的特定部分。

若要了解什么是查询字符串和哈希，让我们看一下此示例：

http://example.com/search?q=javascript#hashtag.

在此示例中，表示我们要传递给服务器的搜索查询，并表示一个锚点，我们可以在其中使页面在加载后直接跳转到页面的该部分。q=javascript#hashtag

查询字符串和哈希可以使用 JavaScript 中的对象进行访问。window.location

要访问示例 URL 的查询字符串，我们需要调用，这将返回我们。window.location.search?q=javascript

要仅访问值，我们需要使用语法，这将给我们 .window.location.search.split('=')[1]javascript

同样，对于哈希，我们可以使用，这将只返回我们 .window.location.hash#hashtag

使用 ES6 解构语法处理 URL

理解如何在 JavaScript 中解析 URL 的下一步是学习如何使用 ES6 的解构语法。这比我们之前介绍的方法更先进一些，但它也是最方便的。

使用 ES6 的解构语法，您可以将 URL 的各个部分分解为单独的变量。为此，您需要做的就是将 URL 括在大括号中，并使用符号分配变量：。=const { protocol, hostname, port } = new URL(url)

这会将 URL 字符串的每个部分（协议、主机名和端口）分配给其自己的变量，您可以在整个代码中自由使用。此方法对于在对象中分配属性或向函数提供参数特别有用。

例：

const { protocol, hostname, port } = new URL(url);
const user = {
protocol: protocol,
domain: hostname,
port: port
};

现在让我们看一些例子：

示例 1：从 URL 解析主机名

要分析主机名，请使用实例的属性。这将返回给定 URL 的主机名部分：hostnameURLSearchParams

let href = "https://www.example.com:8080/search#fragment?q=hello";
let url = new URLSearchParams(href);
console.log(url.hostname); // Output: www.example.com

在上面的示例中，我们在控制台中注销主机名并得到 .www.example.com

因此，这就是我们使用JavaScript轻松找出给定URL的主机名部分的方式。

示例 2：从 URL 解析路径名

我们还可以使用 JavaScript 从给定的 URL 解析出路径名，如下所示：

let href = "https://www.example.com/path/to/file";
let url = new URLSearchParams(href);
console.log(url.pathname); // Output: /path/to/file

在我们的代码示例中，我们创建一个的实例，然后使用其属性仅从该特定 URL 访问路径段;在这种情况下，这是.URLSearchParamspathName`/path

结论

总而言之，URL 解析是 Web 开发的重要组成部分，JavaScript 提供了一组强大的选项来轻松解析 URL。

主机名、路径名、查询和哈希属性允许您将 URL 分解为其组成部分，从而更轻松地构建 Web 应用程序和操作内容。

按照本指南中概述的步骤操作，您将能够快速轻松地解析 URL，从而离目标更近一步。

作者： Rahul 翻译：图恩

本文章由javascript技术分享原创和收集