正文

掌握JS获取URL参数的5种方法，轻松应对各种场景

/0 浏览量
0904

在JavaScript编程中，获取URL参数是一项常见的任务。URL参数可以帮助我们获取来自不同页面的数据，从而实现页面间的数据传递。下面，我将详细介绍五种获取URL参数的方法，帮助你轻松应对各种场景。

方法一：使用window.location.search

这种方法是最直接的方法，通过访问window.location.search属性可以直接获取到URL中的查询字符串。

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

方法二：使用URLSearchParams

URLSearchParams是一个接口，用于解析URL中的查询字符串并对其进行操作。

function getParameterByName(name) {
  const params = new URLSearchParams(window.location.search);
  return params.get(name);
}

方法三：使用RegExp

通过正则表达式匹配查询字符串，这种方法相对灵活，可以处理复杂的URL结构。

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

方法四：使用function和arguments.callee

这种方法通过闭包的方式获取URL参数，但在现代JavaScript开发中已经很少使用。

function getParameterByName(name) {
  name = name.replace(/[\[\]]/g, '\\$&');
  var match = (new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)').exec(location.search) || [])[1];
  return match ? decodeURIComponent(match.split('=')[1]) : null;
}

方法五：使用split和indexOf

这种方法是最简单的，但只适用于简单的URL结构。

function getParameterByName(name) {
  var queryString = window.location.search.substring(1);
  var vars = queryString.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == name) {
      return pair[1];
    }
  }
  return null;
}

以上五种方法各有优缺点，你可以根据自己的需求选择合适的方法。在实际应用中，建议优先考虑前两种方法，因为它们更现代、更易读、更易于维护。

-- 展开阅读全文 --