如何使用JavaScript从URL中提取参数信息

在JavaScript中，获取URL中的参数是一项常见的任务，尤其是在开发需要操作页面跳转、数据传递等功能的Web应用时。下面将详细介绍如何使用JavaScript来获取URL中的参数。

使用内置的URLSearchParams对象

现代浏览器中提供了一个名为`URLSearchParams`的内置对象，它提供了一种简单的方式来处理URL的查询字符串。

// 假设当前的URL是：http://www.example.com/?name=JohnDoe&age=30

// 创建一个URLSearchParams实例
const params = new URLSearchParams(window.location.search);

// 获取参数值
const name = params.get('name'); // JohnDoe
const age = params.get('age'); // 30

// 检查参数是否存在
const hasName = params.has('name'); // true

// 遍历所有参数
for (const [key, value] of params) {
console.log(`${key}: ${value}`);
}

手动解析查询字符串

如果需要支持不兼容`URLSearchParams`的浏览器，或者出于学习目的，我们还可以手动解析查询字符串。

function getParameterByName(name) {
name = name.replace(/[\[\]]/g, '\\$&');
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(window.location.href);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

// 使用示例
// 假设当前的URL是：http://www.example.com/?name=JohnDoe&age=30
const name = getParameterByName('name'); // JohnDoe


const age = getParameterByName('age'); // 30