JavaScript获取当前URL
在Web开发过程中，经常需要获取当前URL来进行一些操作，比如根据URL参数做不同的处理，或者跳转到其他页面等。JavaScript提供了多种方式来获取当前URL，本文将介绍其中几种常用的方法，并提供相应的代码示例。
方法一：使用window.location.href
window.location对象提供了与浏览器当前URL相关的信息，其中href属性是一个字符串，表示当前页面的完整URL。
const currentUrl = window.location.href;
console.log(currentUrl);
上述代码输出的结果即为当前页面的URL。
方法二：使用document.URL
document对象也提供了一个URL属性，用于获取当前页面的URL。
const currentUrl = document.URL;
console.log(currentUrl);
与window.location.href相同，document.URL也返回当前页面的完整URL。
方法三：使用window.location的其他属性
除了href属性外，window.location对象还有其他属性可以获取URL的不同部分。
window.location.protocol：获取URL的协议部分（如http、https等）。window.location.host：获取URL的主机部分（如www.example.com）。window.location.hostname：获取URL的主机名部分（如www）。window.location.port：获取URL的端口部分（如80）。window.location.pathname：获取URL的路径部分（如/path/to/page.html）。window.location.search：获取URL的查询字符串部分（如?id=123&name=example）。window.location.hash：获取URL的哈希部分（如#section1）。
下面是一个使用这些属性的示例代码：
const protocol = window.location.protocol;
const host = window.location.host;
const hostname = window.location.hostname;
const port = window.location.port;
const pathname = window.location.pathname;
const search = window.location.search;
const hash = window.location.hash;
console.log(protocol); // 输出：http
console.log(host); // 输出：www.example.com
console.log(hostname); // 输出：www
console.log(port); // 输出：80
console.log(pathname); // 输出：/path/to/page.html
console.log(search); // 输出：?id=123&name=example
console.log(hash); // 输出：#section1
通过访问window.location对象的不同属性，我们可以获取URL的不同部分，以便进行相应的操作。
方法四：使用正则表达式
如果需要从URL中提取特定的信息，比如获取查询字符串中的参数值，可以使用正则表达式。
下面的代码演示了如何获取URL中的查询字符串，并将其转换为一个对象：
function getQueryParams(url) {
const params = {};
const regex = /[?&]([^=#]+)=([^&#]*)/g;
let match;
while ((match = regex.exec(url))) {
const key = decodeURIComponent(match[1]);
const value = decodeURIComponent(match[2]);
params[key] = value;
}
return params;
}
const queryParams = getQueryParams(window.location.search);
console.log(queryParams);
上述代码中的getQueryParams函数接受一个URL字符串作为参数，并使用正则表达式将查询字符串解析为一个对象，该对象包含查询参数名和对应的值。例如，对于URLid: '123', name: 'example' }。
方法五：使用URLSearchParams对象
在较新的浏览器中，可以使用URLSearchParams对象来处理URL的查询参数。
下面的代码展示了如何使用URLSearchParams对象获取查询参数：
const searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get('id')); // 输出：123
console.log(searchParams.get('name')); // 输出：example
上述代码中，URLSearchParams构造函数接受一个URL的查询字符串作为参数，然后可以使用get方法获取指定参数的值。
总结
本文介绍了通过JavaScript获取当前URL的几种常用方法，包括使用window.location.href、document.URL、window.location的其他属性、正则表达式和URLSearchParams对象。根据具体的需求，可以选择适合的方法来获取URL，并进一步进行相应的操作
