正文

掌握原生JS轻松获取URL参数，告别繁琐操作！

/0 浏览量
0321

在Web开发中，获取URL参数是一项常见的任务。原生JavaScript提供了多种方法来获取URL参数，下面将详细介绍几种常用的方法，帮助开发者轻松获取URL参数，告别繁琐的操作。

1. 使用location.search获取整个查询字符串

location.search属性返回当前页面的查询字符串，即问号?之后的部分。以下是一个获取整个查询字符串的示例：

var searchStr = location.search.substring(1); // 移除问号
console.log(searchStr); // 输出查询字符串，如：id=123&name=John

2. 使用URLSearchParams对象解析查询字符串

从ECMAScript 2015（ES6）开始，URLSearchParams对象被引入，用于解析查询字符串。以下是一个使用URLSearchParams的示例：

var params = new URLSearchParams(location.search);
console.log(params.get('id')); // 输出：123
console.log(params.get('name')); // 输出：John

3. 使用正则表达式解析查询字符串

如果你对正则表达式比较熟悉，可以使用正则表达式来解析查询字符串。以下是一个使用正则表达式的示例：

var searchStr = location.search.substring(1);
var regex = /([^&=]+)=?([^&]*)/g;
var params = {};
while (match = regex.exec(searchStr)) {
  params[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
}
console.log(params); // 输出：{ id: "123", name: "John" }

4. 使用函数封装获取URL参数

为了提高代码的可读性和复用性，可以将获取URL参数的逻辑封装成一个函数。以下是一个封装示例：

function getQueryParam(key) {
  var searchStr = location.search.substring(1);
  var regex = new RegExp('[?&]' + key + '(=([^&#]*)|&|#|$)');
  var results = regex.exec(searchStr);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

console.log(getQueryParam('id')); // 输出：123
console.log(getQueryParam('name')); // 输出：John

总结

通过以上几种方法，开发者可以轻松获取URL参数，提高代码的可读性和可维护性。在实际开发过程中，可以根据项目需求选择合适的方法来实现。希望本文对你有所帮助！

-- 展开阅读全文 --