正文

轻松掌握：JS获取地址栏信息的实用技巧与示例

/0 浏览量
0715

在Web开发中，获取地址栏信息是一个常见的需求。JavaScript提供了多种方法来获取URL的各个组成部分，如查询参数、路径、域名等。下面，我将详细介绍一些实用的技巧和示例，帮助你轻松掌握如何在JavaScript中获取地址栏信息。

1. 获取整个URL

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

console.log(window.location.href); // 输出当前页面的完整URL

2. 获取域名和路径

使用window.location.hostname和window.location.pathname可以分别获取域名和路径。

console.log(window.location.hostname); // 输出域名
console.log(window.location.pathname); // 输出路径

3. 获取查询参数

查询参数通常以?开头，后面跟着一系列键值对。可以使用window.location.search获取整个查询字符串，或者使用new URLSearchParams()对象来解析查询参数。

3.1 获取整个查询字符串

console.log(window.location.search); // 输出查询字符串

3.2 解析查询参数

const params = new URLSearchParams(window.location.search);
console.log(params.get('key')); // 根据键名获取值

4. 获取URL片段

URL片段（也称为锚点）是页面中的一部分，可以通过window.location.hash获取。

console.log(window.location.hash); // 输出URL片段

5. 动态修改URL

在JavaScript中，你可以通过修改window.location对象的属性来改变当前页面的URL，而无需重新加载页面。

window.location.href = 'https://www.example.com'; // 跳转到新页面
window.location.search = '?key=value'; // 添加查询参数

示例：构建一个简单的URL参数解析器

以下是一个简单的URL参数解析器的示例，它可以将查询字符串转换为对象。

function parseQueryParams(queryString) {
  const params = {};
  const query = queryString.substring(1);
  const vars = query.split('&');
  for (let i = 0; i < vars.length; i++) {
    const pair = vars[i].split('=');
    params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
  }
  return params;
}

const params = parseQueryParams(window.location.search);
console.log(params); // 输出解析后的查询参数对象

通过以上技巧和示例，你可以轻松地在JavaScript中获取和操作地址栏信息。希望这些内容能帮助你更好地理解和应用JavaScript的URL处理功能。

-- 展开阅读全文 --