jQuery 如何使用jQuery或纯JavaScript获取URL参数

在本文中，我们将介绍如何使用jQuery或纯JavaScript来获取URL参数。获取URL参数是在Web开发中非常常见和有用的操作之一，它可以用来获取URL中的查询字符串参数或路径参数。

什么是URL参数？

URL参数是指URL中的查询字符串参数或路径参数。查询字符串参数通常出现在URL的？号后面，由键值对组成，多个参数用&符号隔开。路径参数则是URL路径中的一部分，通常用于标识特定的资源或页面。

例如，在以下URL中：

https://example.com/product?id=123&category=electronics

查询字符串参数为 id=123 和 category=electronics
路径参数为 product

使用jQuery获取URL参数

jQuery提供了两种方法来获取URL参数：一种是通过URL字符串解析，另一种是通过jQuery的$.param()方法解析当前页面的URL。

1. 通过URL字符串解析

可以使用jQuery的$.url()方法来解析URL字符串并获取参数。

var url = "https://example.com/product?id=123&category=electronics";
var params = $.url(url).param();
console.log(params.id); // 输出：123
console.log(params.category); // 输出：electronics

2. 通过$.param()方法解析当前页面的URL

可以使用$.param()方法解析当前页面的URL并获取参数。

var params =  $.param($ .url().param());
console.log(params.id); // 输出：123
console.log(params.category); // 输出：electronics

使用纯JavaScript获取URL参数

如果你不想依赖于jQuery，你也可以使用纯JavaScript来获取URL参数。下面是几种获取URL参数的常见方法：

1. 使用location.search属性获取查询字符串参数

可以使用location.search属性获取URL中的查询字符串参数，并利用正则表达式和字符串操作来解析参数。

function getUrlParams() {
  var params = {},
      queryString = location.search.slice(1),
      regex = /([^&=]+)=([^&]*)/g,
      match;

  while (match = regex.exec(queryString)) {
    params[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
  }

  return params;
}

var params = getUrlParams();
console.log(params.id); // 输出：123
console.log(params.category); // 输出：electronics

2. 使用URLSearchParams对象获取查询字符串参数

在最新的浏览器中，可以使用URLSearchParams对象来解析URL中的查询字符串参数。

function getUrlParams() {
  var params = {},
      queryString = window.location.search,
      searchParams = new URLSearchParams(queryString);

  searchParams.forEach(function(value, key) {
    params[key] = value;
  });

  return params;
}

var params = getUrlParams();
console.log(params.id); // 输出：123
console.log(params.category); // 输出：electronics

3. 使用正则表达式获取路径参数

如果需要获取URL中的路径参数，可以使用正则表达式来匹配并解析。

function getUrlParams() {
  var params = {},
      pathname = window.location.pathname,
      regex = /\/product\/([^/]+)/,
      match;

  if (match = regex.exec(pathname)) {
    params.id = match[1];
  }

  return params;
}

var params = getUrlParams();
console.log(params.id); // 输出：123