详解获取url各个部分的方法

大家好，欢迎来到IT知识分享网。

以这个网址为例子进行讲解

https://www.expamle.com/index.html#/myConcern?from=reduce&endTime=2023-12-02

window.location 对象具有以下属性：

window.location.href：获取或设置完整的 URL 地址。

https://www.expamle.com/index.html#/myConcern?from=reduce&endTime=2023-12-02

window.location.protocol：获取或设置 URL 的协议部分（例如，http:、https:）。

https:

window.location.host：获取或设置 URL 的主机部分（包括域名和端口号）。

www.expamle.com

window.location.hostname：获取或设置 URL 的主机名部分（不包括端口号）。

www.expamle.com

window.location.port：获取或设置 URL 的端口号部分。

‘’

window.location.pathname：获取或设置 URL 的路径部分。

‘/index.html’

‘’

window.location.hash：获取或设置 URL 的片段标识符部分（以 # 开头的锚点部分）。

#/myConcern?from=reduce&endTime=2023-12-02

除了上述属性，window.location 还有一些方法可以用于页面导航和重定向：

那如果对于hash类型的url想要拿到到url后面的内容怎么办呢？
没有现成的办法，只能取window.location.hash后截取获得了

const data = window.location.hash.split('?')[1] 

如果想要取得？后的参数的值

const params = new URLSearchParams(data) 

URLSearchParams对象的用法

// 创建一个 URLSearchParams 对象，并传入查询字符串 const params = new URLSearchParams('?from=reduce&endTime=2023-12-02'); // 获取特定参数的值 const from = params.get('from'); // "reduce" const endTime = params.get('endTime'); // "2023-12-02" // 添加新的参数 params.append('newParam', 'value'); console.log(params.toString()); // "from=reduce&endTime=2023-12-02&newParam=value" // 修改参数的值 params.set('from', 'update'); console.log(params.toString()); // "from=update&endTime=2023-12-02&newParam=value" // 删除参数 params.delete('endTime'); console.log(params.toString()); // "from=update&newParam=value"