js获取url参数的方法

js获取url参数的方法

在Web开发中，经常会需要从URL中获取参数的值，以便根据这些参数值做相应的操作。在JavaScript中，我们可以通过几种方法来获取URL中的参数。

方法一：使用window.location.search

可以使用window.location.search来获取URL中的查询字符串部分，例如：

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

var paramValue = getParameterByName('param');
console.log(paramValue);  // 输出URL中名为param的参数值

运行结果：
假设当前页面URL为http://example.com/page?param=value，则以上代码会输出value。

方法二：使用URLSearchParams

URLSearchParams是一个内置的JavaScript对象，可以用于解析URL的查询参数。例如：

var searchParams = new URLSearchParams(window.location.search);
var paramValue = searchParams.get('param');
console.log(paramValue);  // 输出URL中名为param的参数值

运行结果：
假设当前页面URL为http://example.com/page?param=value，则以上代码也会输出value。

方法三：使用正则表达式

还可以使用正则表达式来提取URL中的参数值，例如：

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

var paramValue = getParameterByName('param');
console.log(paramValue);  // 输出URL中名为param的参数值

运行结果：
与方法一类似，假设当前页面URL为http://example.com/page?param=value，以上代码也会输出value。

总结

以上介绍了三种常用的方法来获取URL中的参数值：使用window.location.search、URLSearchParams和正则表达式。在实际应用中，可以根据具体情况选择合适的方法来获取参数值，以便实现相应的功能。