正文

揭秘JS获取URL路径的简单技巧，轻松掌握核心代码！

/0 浏览量
0325

在Web开发中，获取URL路径是一个常见的需求。JavaScript提供了多种方法来获取URL的各个组成部分，如域名、路径、查询参数等。以下是一些简单的技巧和核心代码，帮助您轻松掌握如何在JavaScript中获取URL路径。

1. 获取完整的URL

要获取完整的URL，可以使用window.location.href属性。

var fullUrl = window.location.href;
console.log(fullUrl); // 输出完整的URL

2. 获取域名

要获取当前页面的域名，可以使用window.location.host属性。

var domain = window.location.host;
console.log(domain); // 输出域名，例如：example.com

3. 获取路径

要获取URL的路径部分，可以使用window.location.pathname属性。

var path = window.location.pathname;
console.log(path); // 输出路径，例如：/about

4. 获取查询参数

要获取URL中的查询参数，可以使用window.location.search属性。

var queryParams = window.location.search;
console.log(queryParams); // 输出查询参数，例如：?id=123&name=John

为了更方便地解析查询参数，可以使用以下函数：

function getQueryParams() {
  var queryParams = {};
  var queryString = window.location.search.substring(1);
  var vars = queryString.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    queryParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
  }
  return queryParams;
}

var params = getQueryParams();
console.log(params); // 输出查询参数对象，例如：{ id: '123', name: 'John' }

5. 获取URL片段

要获取URL的片段部分（即锚点），可以使用window.location.hash属性。

var hash = window.location.hash;
console.log(hash); // 输出URL片段，例如：#section1

6. 获取协议和端口

要获取URL的协议和端口，可以使用window.location.protocol和window.location.port属性。

var protocol = window.location.protocol;
var port = window.location.port;

console.log(protocol); // 输出协议，例如：http:
console.log(port); // 输出端口，例如：80

总结

以上是JavaScript中获取URL路径的简单技巧。通过使用这些方法和函数，您可以轻松地获取URL的各个组成部分，以便在Web开发中进行进一步的操作。希望这些技巧能帮助您提高开发效率！

-- 展开阅读全文 --