JS如何获取URL路径_JavaScript当前页面URL路径获取与解析方法-js教程-PHP中文网

JS如何获取URL路径_JavaScript当前页面URL路径获取与解析方法

絕刀狂花

发布： 2025-11-16 20:26:36

原创

209人浏览过

使用window.location.href获取完整URL；2. 通过location对象的protocol、host、pathname等属性解析URL各部分；3. 利用URLSearchParams解析查询参数；4. 结合URL API修改参数并更新地址栏。

js如何获取url路径_javascript当前页面url路径获取与解析方法

在JavaScript中获取和解析当前页面的URL路径非常常见，比如用于路由判断、参数读取或页面跳转。通过浏览器提供的 window.location 对象，我们可以轻松获取URL的各个部分。

1. 获取完整的当前页面URL

使用 window.location.href 可以获取完整的URL字符串。

const fullUrl = window.location.href;
console.log(fullUrl); // 输出：https://example.com/path?name=js&age=12#section

2. 解析URL各组成部分

window.location 提供了多个属性来分别获取URL的不同部分：

protocol：协议（http: 或 https:）
host：主机名 + 端口（如 example.com:8080）
hostname：主机名（如 example.com）
port：端口号（若无则为空）
pathname：路径部分（如 /users/profile）
search：查询参数（从 ? 开始的部分）
hash：锚点部分（从 # 开始的部分）

示例：

立即学习“Java免费学习笔记（深入）”；

console.log(window.location.protocol); // "https:"
console.log(window.location.host); // "example.com"
console.log(window.location.pathname); // "/path"
console.log(window.location.search); // "?name=js&age=12"
console.log(window.location.hash); // "#section"

3. 获取并解析查询参数（Query Parameters）

要提取URL中的参数，可以使用 URLSearchParams API，这是现代浏览器推荐的方式。

如此AI员工

国内首个全链路营销获客AI Agent

查看详情

const params = new URLSearchParams(window.location.search);
console.log(params.get('name')); // 输出: js
console.log(params.get('age')); // 输出: 12

支持多值参数：

params.getAll('tag'); // 返回数组

如果需要兼容老版本浏览器，也可以手动解析：

function getQueryParam(key) {
const match = new RegExp('[?&]' + key + '=([^&]*)').exec(window.location.search);
return match ? decodeURIComponent(match[1]) : null;
}