js获取url的方法

在Web开发中，经常需要获取当前页面的URL或者对URL进行操作。JavaScript提供了多种方法来实现这一目的，下面将介绍一些常用的方法。

1. window.location对象

window.location对象提供了当前页面的URL信息。可以通过它的不同属性来获取URL的各个部分。

• href：获取完整的URL地址，包括协议、主机名、路径、查询参数和哈希值。例如：

var url = window.location.href;
console.log(url);

• protocol：获取URL的协议部分，如http:或https:。

var protocol = window.location.protocol;
console.log(protocol);

• host：获取主机名和端口号（如果有）。

var host = window.location.host;
console.log(host);

2. 获取查询参数

要获取URL中的查询参数，可以使用以下方法：

• 传统方法：通过window.location.search获取查询参数部分，然后手动解析。例如：

var searchParams = window.location.search.substring(1);
var params = searchParams.split('&');
for (var i = 0; i < params.length; i++) {
    var pair = params[i].split('=');
    console.log(pair[0] + ':' + pair[1]);
}

• URLSearchParams对象：这是一种更方便的方法，它提供了一系列方法来操作查询参数。

var searchParams = new URLSearchParams(window.location.search);
searchParams.forEach(function (value, key) {
    console.log(key + ':' + value);
});

3. 获取哈希值

哈希值通常用于页面内的导航或标识特定的状态。可以通过window.location.hash来获取。

var hash = window.location.hash;
console.log(hash);

4. 注意事项

在使用这些方法时，需要注意兼容性问题。一些较旧的浏览器可能不支持某些新的API。在实际开发中，可以根据项目的需求和目标浏览器的支持情况选择合适的方法。

JavaScript提供了丰富的方法来获取和操作URL，开发者可以根据具体的需求灵活运用这些方法，以实现更好的用户体验和功能实现。