js获取当前url方法：js如何方便地获取URL中各个组成部分

统一资源定位符(URL)，是对 Web 资源（网页、图像、文件）的引用。URL 是指定资源位置和检索资源的一种协议（如http、ftp、mailto）。

如下代码，这是今日头条发布文章的URL地址：

https://mp.toutiao.com/profile_v4/graphic/publish

有时需要从URL中获取特定的信息，比如域名、页面地址、查询参数等，这里介绍如何使用URL对象来解析。

URL结构

如下图，详细介绍组成URL的各个部分：

js获取当前url方法：js如何方便地获取URL中各个组成部分(1)

图1

protocol —— 网络协议，如http、https、mailto、ftp等。
username—— 用户名，如ftp访问时需要用户名。
password——密码，如ftp访问时需要密码。
hostname——主机名称。
port——端口号。
host——主机地址，包括hostname，和port。
pathname——路径名称。
search——查询字符串，问号“？”开头。
path——完整路径，包括路径名称和查询参数。
hash——哈希值，#号开头。

URL()构造函数

创建一个URL解析实例，如下：

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

通过上面url实例对象就可以解析一个路径地址。

relativeOrAbsolute参数可以是绝对或相对 URL。如果第一个参数是相对的，那么第二个参数absoluteBase必须要有，并且必须是一个绝对 URL，作为第一个参数的基础路径。

例如，使用绝对 URL 进行初始化

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

或者，使用相对路径初始化

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

你可以在控制台打印url实例，看到如下接口：

interface URL { href: USVString; protocol: USVString; username: USVString; password: USVString; host: USVString; hostname: USVString; port: USVString; pathname: USVString; search: USVString; hash: USVString; readonly origin: USVString; readonly searchParams: URLSearchParams; toJSON(): USVString; }

在JavaScript 中 USVString 返回url中对应部分的字符串值。

获取路径上查询字符串

使用 url.search 属性访问以 ? 为前缀的查询字符串，如下：

const url = new URL( 'http://example.com/path/index.html?message=hello&who=world' ); console.log(url.search); // => '?message=hello&who=world'

如果没有查询字符串，则url.search 返回空字符串''。

解析查询字符串

使用url.searchParams属性解析查询字符串，通过get方法获取对应参数值，或者has方法判断是否存在某一个参数。

让我们看一个例子：

const url = new URL( 'http://example.com/path/index.html?message=hello&who=world' ); url.searchParams.get('message'); // => 'hello' url.searchParams.get('missing'); // => null url.searchParams.has('who'); // => true url.searchParams.has('missing'); // => false

关于URLSearchParams更多方法，可以参考 https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

获取主机名

使用 url.hostname 属性获取 URL 的主机名，如下：

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

路径名

url.pathname 属性获取 URL 的路径名：

const url = new URL('http://example.com/path/index.html?param=value'); url.pathname; // => '/path/index.html'

如果 URL 没有路径，则该url.pathname属性返回一个斜杠字符/：

const url = new URL('http://example.com/'); url.pathname; // => '/'

哈希值

最后，可以使用 url.hash 属性获取哈希值：

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

当 URL 中的哈希值丢失时，url.hash计算结果为空字符串''：

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

网址验证

当new URL()构造函数创建实例时，它还会验证 URL 的正确性。如果 URL 值无效，则抛出 TypeError。

例如，http ://example.com 是一个无效的 URL，因为 http 后面有空格字符。

让我们使用这个无效的 URL 来初始化解析器：

try { const url = new URL('http ://example.com'); } catch (error) { error; // => TypeError, "Failed to construct URL: Invalid URL" }

URL 修改

除了使用 search、hostname、pathname等属性获取值，您还可以通过这些属性重新赋值修改URL。

例如，让我们将现有的 URL 的主机名从 red.com 修改为 blue.io：

const url = new URL('http://red.com/path/index.html'); url.href; // => 'http://red.com/path/index.html' url.hostname = 'blue.io'; url.href; // => 'http://blue.io/path/index.html'

注意，url实例中只有origin和searchParams属性是只读的，其他都是可写的，并在您更改它们时修改 URL。

总结

JavaScript 中的 URL()对象可以方便地解析和验证URL。

new URL(relativeOrAbsolute [, absoluteBase])接受绝对或相对 URL 作为第一个参数。当第一个参数是相对的时，您必须将提供第二个参数做为第一个参数的基础URL。

创建URL()实例后，您可以轻松访问最常见的 URL 属性值，例如：