如何将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: '这是中文' }
  • 15
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值