JS获取当前路径

JS获取当前路径

在Web开发中，有时候我们需要获取当前页面的URL路径。这在很多情况下都是非常有用的，比如用于动态加载资源、路由跳转等。本文将详细介绍在JavaScript中如何获取当前路径的方法。

window.location.href

在JavaScript中，我们可以使用window.location.href来获取当前页面的完整URL。这个属性返回的是包括协议、主机、路径、参数和锚点等完整信息的字符串。

console.log(window.location.href);

运行以上代码，会在控制台输出当前页面的URL。例如，如果当前页面的URL是https://www.example.com/index.html?query=123#section2，那么输出的结果将是https://www.example.com/index.html?query=123#section2。

window.location.pathname

除了window.location.href之外，我们也可以使用window.location.pathname来获取当前页面的路径部分。这个属性返回的是不包括协议、主机、参数和锚点等其他信息的路径字符串。

console.log(window.location.pathname);

假设当前页面的URL是https://www.example.com/index.html?query=123#section2，那么以上代码将会输出/index.html。

获取URL参数

有时候我们可能还需要获取URL中的参数，以便进行相应的处理。这可以通过window.location.search来实现，它返回的是URL中的查询字符串部分（即?后面的内容）。

console.log(window.location.search);

如果当前页面的URL为https://www.example.com/index.html?query=123#section2，那么以上代码将输出?query=123。

接下来，我们可以编写一个函数来解析URL中的参数，将其转换成一个对象返回。

function getSearchParams() {
    var searchParams = window.location.search.substring(1).split('&');
    var params = {};

    searchParams.forEach(function(param) {
        var parts = param.split('=');
        var key = decodeURIComponent(parts[0]);
        var value = decodeURIComponent(parts[1]);

        params[key] = value;
    });

    return params;
}

console.log(getSearchParams());

比如当我们调用getSearchParams()函数时，如果当前页面URL为https://www.example.com/index.html?query=123&page=2，则输出将为{query: "123", page: "2"}。

通过上述方法，我们可以方便地获取当前页面的路径以及参数信息，从而在开发中更灵活地应用。