正文

掌握JavaScript获取GET参数的5种简单方法

/0 浏览量
0907

在Web开发中，获取URL中的GET参数是常见的需求。JavaScript提供了多种方式来获取这些参数，以下将详细介绍五种简单且实用的方法。

方法一：使用window.location.search

window.location.search属性包含了整个查询字符串，即问号（?）之后的部分。你可以通过解析这个字符串来获取特定的参数。

function getQueryParam(param) {
  const queryString = window.location.search.substring(1);
  const params = queryString.split('&');
  for (let i = 0; i < params.length; i++) {
    const pair = params[i].split('=');
    if (decodeURIComponent(pair[0]) === param) {
      return decodeURIComponent(pair[1]);
    }
  }
  return null;
}

方法二：使用URLSearchParams

URLSearchParams是一个接口，它提供了一个与URL查询字符串交互的方法。这是一个更现代且易于使用的方法。

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

方法三：使用navigator.appName和navigator.appVersion

这是一种非常古老的方法，通过解析navigator.appName和navigator.appVersion来获取参数。

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

方法四：使用document.referrer

document.referrer属性包含了当前页面的引用页面的URL。通过解析这个URL，你可以获取到上一页面的GET参数。

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

方法五：使用第三方库

虽然直接使用原生JavaScript可以完成这个任务，但有时使用第三方库如query-string或qs可以使代码更加简洁和易于维护。

// 假设你已经通过npm安装了query-string库
const queryString = require('query-string');

function getQueryParam(param) {
  const params = queryString.parse(window.location.search);
  return params[param] || null;
}

总结

以上五种方法各有优缺点，选择哪种方法取决于你的具体需求和个人偏好。对于现代Web开发，推荐使用URLSearchParams或第三方库，因为它们提供了更简洁和更强大的功能。

-- 展开阅读全文 --