前言
将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: '这是中文' }