如何将URL参数解析为对象

前言

将URl参数解析为对象是方便在代码中处理和操作这些参数,通过将URL参数解析为对象,可以更轻松地访问、修改和操作这些参数的键值对。

URL(Uniform Resource Locator)组成部分

协议（Protocol）：定义了访问资源所使用的协议或规范，例如 HTTP、HTTPS、FTP等。

主机名（Host）：指定了资源所在的主机的域名或 IP 地址，例如 www.baidu.com。

端口号（Port）：可选部分，指定了服务器监听的端口号。如果未指定，默认使用协议默认的端口（如 HTTP 的端口80），再同一域名中可能有多个网站,需要用端口号区分

路径（Path）：指定了服务器上资源的路径或位置，用于唯一标识资源在服务器上的位置。

查询字符串（Query String）：以问号（?）开头，包含了用于传递给服务器的参数，参数之间用 & 分隔，一般用于传递 GET 请求中的参数。

片段标识（Fragment）：以井号（#）开头，指定了资源内的一个特定部分，用于直接定位到资源内的某个位置或元素。

我们经常需要操作查询字符串 所以代码实现

const url = `https://juejin.cn/post/7221048707239444540?searchId=202403080845529B31397BAAA60BED336A`;

const url1 = `https://search.bilibili.com/all?vt=59221047&keyword=a`;

const url2 = `https://search.bilibili.com/all?keyword=%E8%BF%99%E6%98%AF%E4%B8%AD%E6%96%87`;

function getUrl(url) {
const decodeUrl = decodeURIComponent(url); // 调用 `decodeURIComponent(url)` 函数，可以将这些被编码的特殊字符还原为它们原始的形式，比如中文之类的
const index = url.indexOf("?");
let Url = decodeUrl.slice(index + 1);
const obj = {};
Url.split("&").map((item) => {
let key = item.split("=")[0];
let value = item.split("=")[1];
obj[key] = value;
});
return obj;
}
console.log(getUrl(url));

console.log(getUrl(url1));

console.log(getUrl(url2));

// { searchId: '202403080845529B31397BAAA60BED336A' }

// { vt: '59221047', keyword: 'a' }

// { keyword: '这是中文' }