JavaScript 中利用 DOM 解析 URI 的方法与原理

作者:交互手记

时间:2026-10-29

浏览:457

本文介绍在 JavaScript 中解析统一资源标识符(URI)的实用技巧。通过动态创建隐藏的 a 元素并赋值 href 属性,利用浏览器内置解析能力获取协议、主机、路径及查询参数。文章包含 HTTP 搜索链接与 Mailto 邮件链接的完整解析示例,展示如何提取 protocol、host、pathname 和 search 等关键属性,帮助开发者快速处理 URL 数据。

文章目录

URI 的基本概念与结构

解析 URI 的过程颇具趣味,此前往往忽视了其复杂性。

URI

根据维基百科的定义,

代码如下:

在计算机术语中,统一资源标识符(Uniform Resource Identifier,或 URI)是一个用于标识某一互联网资源名称的字符串。该种标识允许用户对网络中(一般指万维网)的资源通过特定的协议进行交互操作。URI 由包括确定语法和相关协议的方案所定义。

引用网络上对于 URI 组成的解释,这些内容在后续对 URI 的解析中可以得到验证。

URI 一般由三部分组成:

1. 访问资源的命名机制。 2. 存放资源的主机名。 3. 资源自身的名称,由路径表示。

或者可以这样理解,两者在结构上是一致的。

URL 的格式由下列三部分组成:

1. 协议(或称为服务方式) 2. 存有该资源的主机 IP 地址(有时也包括端口号) 3. 主机资源的具体地址,如目录和文件名等

URI 解析

代码如下:

“解析”一个 URI 意味着将一个相对 URI 引用转换为绝对形式,或者通过尝试获取一个可解引 URI 或一个 URI 引用所代表的资源来解引用这个 URI。文档处理软件的“解析”部分通常同时提供这两种功能。

JavaScript 中解析 URI 的实用技巧

Javascript URI 解析

以博客中的搜索 JS 为例,下面就是其的 URL,

https://www.jb51.net/search/?q=js&type= 然后便有了

代码如下:

var parser = document.createElement('a');
parser.href = "https://www.jb51.net/search/?q=js&type="

我们便可以知道其的协议、端口号、主机、具体地址等


代码如下:

parser.protocol;
parser.host;
parser.pathname;
parser.search;

返回的结果便是


代码如下:

protocol:http
host:www.jb51.net
pathname:/search/
search:?q=js&type=

上面的结果加出来,便是一个完整的 URI。只是对于 parser.search 这部分不是很理解,对于 ? 号而言,应该是参数,用于搜索的参数。

如果是对就于一个邮件的 URI 来说,假设 URI 是

代码如下:

mailto:h@jb51.net?subject=hello
 

那么


代码如下:

var parser = document.createElement('a');
parser.href = "mailto:h@jb51.net?subject=hello";
> parser.protocol
 "mailto:"
 > parser.pathname
 "h@jb51.net"
 > parser.search
 "?subject=hello"

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章