正文

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

/0 浏览量
1010

在Web开发中，获取URL中的GET参数是一项基本技能。无论是进行页面跳转、表单验证，还是实现更复杂的业务逻辑，掌握获取GET参数的方法都是必不可少的。以下，我将为你详细介绍五种简单而实用的JavaScript获取GET参数的方法，帮助你轻松应对各种场景。

方法一：使用window.location.search获取

window.location.search可以获取到当前URL的查询字符串，即问号（?）后面的部分。以下是一个简单的示例：

function getQueryParam(key) {
  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]) === key) {
      return decodeURIComponent(pair[1]);
    }
  }
  return null;
}

// 使用示例
const userId = getQueryParam('userId');
console.log(userId); // 输出：123

方法二：使用URLSearchParams接口

URLSearchParams是HTML5中新增的一个接口，可以方便地处理URL的查询字符串。以下是一个使用URLSearchParams的示例：

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

// 使用示例
const userId = getQueryParam('userId');
console.log(userId); // 输出：123

方法三：使用jQuery的.param()方法

如果你正在使用jQuery，可以利用.param()方法轻松获取GET参数。以下是一个示例：

function getQueryParam(key) {
  return $.param.querystring(key);
}

// 使用示例
const userId = getQueryParam('userId');
console.log(userId); // 输出：123

方法四：使用History API的pushState和replaceState方法

History API的pushState和replaceState方法可以在不刷新页面的情况下修改URL。以下是一个使用这些方法的示例：

function getQueryParam(key) {
  const url = new URL(window.location.href);
  return url.searchParams.get(key);
}

// 使用示例
const userId = getQueryParam('userId');
console.log(userId); // 输出：123

方法五：使用正则表达式

正则表达式是处理字符串的利器，以下是一个使用正则表达式获取GET参数的示例：

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

// 使用示例
const userId = getQueryParam('userId');
console.log(userId); // 输出：123

总结

以上五种方法可以帮助你轻松获取JavaScript中的GET参数。在实际开发中，你可以根据具体场景和需求选择合适的方法。希望这篇文章能对你有所帮助！

-- 展开阅读全文 --