如何使用jQuery或JavaScript获得基本URL？

当我们在处理前端开发的时候，经常需要获取当前页面的URL地址。这个过程看起来很简单，但是具体实现却有许多细节需要注意。在本文中，我将介绍如何使用jQuery和JavaScript获取基本URL，并提供示例代码。

什么是基本URL？

基本URL指的是当前页面的协议、主机名和端口号组成的部分。例如，在以下URL中，https://www.example.com:8080/index.html 是基本URL：

https://www.example.com:8080/index.html?name=John&age=25#about

使用JavaScript获取基本URL

在JavaScript中，我们可以使用 location 对象来获取当前URL信息。该对象包含了当前页面所有的URL相关信息。要获取基本URL，可以使用以下代码：

var baseUrl = location.protocol + "//" + location.hostname + (location.port ? ":" + location.port : "");

上面的代码中，location.protocol 表示协议（http或https），location.hostname 表示主机名（例如：www.example.com），`location.port` 表示端口号（如果有的话）。最终，我们将这些部分拼接起来，形成一个完整的基本URL。

下面是一个示例，展示了如何使用JavaScript获取基本URL并将其输出到控制台：

var baseUrl = location.protocol + "//" + location.hostname + (location.port ? ":" + location.port : "");
console.log(baseUrl);
// 输出结果：https://www.example.com:8080

使用jQuery获取基本URL

在jQuery中，我们可以使用 $(location) 对象来获取当前URL信息。同样地，该对象包含了当前页面所有的URL相关信息。要获取基本URL，可以使用以下代码：

var baseUrl = $.trim(location.protocol + "//" + location.hostname + (location.port ? ":" + location.port : ""));

上面的代码中，我们同样将协议、主机名和端口号拼接起来，形成一个完整的基本URL。不同的是，在jQuery中我们使用 $.trim() 方法来去除字符串两端的空格。

下面是一个示例，展示了如何使用jQuery获取基本URL并将其输出到控制台：

var baseUrl = $.trim(location.protocol + "//" + location.hostname + (location.port ? ":" + location.port : ""));
console.log(baseUrl);
// 输出结果：https://www.example.com:8080

总结

在本文中，我们介绍了如何使用JavaScript和jQuery获取基本URL。对于初学者来说，这是一个非常基础的知识点。但是在实际开发中，获取URL地址是一个必须要掌握的技能。我希望本文对你有所帮助，并能够让你更好地理解和应用这个知识点。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13712