在 JavaScript 中读取 URL 中的多个参数

在 web 开发中，经常需要获取 URL 中的参数来进行对应的操作。本文将介绍如何使用 JavaScript 从 URL 中读取多个参数。

获取 URL 参数

获取 URL 中的参数有很多种方式，本文介绍其中两种。

方法一：使用正则表达式

function getParams(url) {
  const reg = /([^&=]+)=([^&]*)/g;
  const params = {};
  while (true) {
    const match = reg.exec(url);
    if (!match) {
      break;
    }
    params[match[1]] = match[2];
  }
  return params;
}

// Example:
const url = "https://www.example.com/?name=John&age=20&gender=male";
const params = getParams(url);
console.log(params);
// Output: {name: "John", age: "20", gender: "male"}

该方法使用正则表达式匹配 URL 中的参数，并将其存储到对象中，最终返回该对象。注意，该方法需要传入完整的 URL，包括 ? 和 &。

方法二：使用 URLSearchParams

function getParams(url) {
  const searchParams = new URLSearchParams(url.search);
  const params = {};
  for (const [key, value] of searchParams.entries()) {
    params[key] = value;
  }
  return params;
}

// Example:
const url = new URL("https://www.example.com/?name=John&age=20&gender=male");
const params = getParams(url);
console.log(params);
// Output: {name: "John", age: "20", gender: "male"}

该方法使用 URLSearchParams 对象来获取 URL 中的参数，并将其存储到对象中。需要注意的是，该方法需要传入 URL 对象而非字符串。

获取单个参数

获取 URL 中的单个参数也有很多种方式，本文介绍其中一种。

function getParam(url, name) {
  const searchParams = new URLSearchParams(url.search);
  return searchParams.get(name);
}

// Example:
const url = new URL("https://www.example.com/?name=John&age=20&gender=male");
const name = getParam(url, "name");
console.log(name);
// Output: "John"

该方法使用 URLSearchParams 对象的 get 方法来获取指定参数的值。

总结

本文介绍了如何在 JavaScript 中从 URL 中读取多个参数和单个参数的方法。值得注意的是，对于较老的浏览器，可能不支持某些方法，需要在编写代码时进行兼容性处理。