用 JavaScript 解析 URL 的方法

最新推荐文章于 2024-05-13 04:52:23 发布

木森林哥哥

最新推荐文章于 2024-05-13 04:52:23 发布

阅读量2.3k

点赞数

分类专栏：前端面试题文章标签： javascript es6

本文链接：https://blog.csdn.net/weixin_47021982/article/details/109366242

版权

统一资源定位符，缩写为URL，是对网络资源(网页、图像、文件)的引用。URL指定资源位置和检索资源的机制(http、ftp、mailto)。

举个例子，这里是这篇文章的 URL 地址：

> https://dmitripavlutin.com/parse-url-JavaScript

很多时候你需要获取到一段 URL 的某个组成部分。它们可能是 hostname（例如 dmitripavlutin.com），或者 pathname（例如 /parse-url-JavaScript）。

一个方便的用于获取 URL 组成部分的办法是通过 URL() 构造函数。
在这篇文章中，我将给大家展示一段 URL 的结构，以及它的主要组成部分。

接着，我会告诉你如何使用 URL() 构造函数来轻松获取 URL 的组成部分，比如 hostname，pathname，query 或者 hash。

一图胜千言。不需要过多的文字描述，通过下面的图片你就可以理解一段 URL 的各个组成部分：

URL() 构造函数允许我们用它来解析一段 URL：

const url = new URL(relativeOrAbsolute [, absoluteBase]);

参数 relativeOrAbsolute 既可以是绝对路径，也可以是相对路径。如果第一个参数是相对路径的话，那么第二个参数 absoluteBase 则必传，且必须为第一个参数的绝对路径。

举个例子，让我们用一个绝对路径的 URL 来初始化 URL() 函数：

const url = new URL('http://example.com/path/index.html');
url.href; // => 'http://example.com/path/index.html'

或者我们可以使用相对路径和绝对路径：

const url = new URL('/path/index.html', 'http://example.com');
url.

关注