Javascript 获取链接(url)参数的方法[正则与截取字符串]

当需要在JavaScript中获取链接（URL）的参数时，通常我们会考虑使用正则表达式（RegExp）或者简单地截取字符串两种方法来完成。下面，本文将为大家细细讲解这两种方法的具体实现。

方法一：使用正则表达式

1. 获取单个参数的值

假设一个链接为：https://www.example.com/?name=John&age=26&gender=male

我们需要获取参数name对应的值，可以通过正则表达式来实现。

function getQueryParams(name) {
  const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i');
  const match = window.location.search.substr(1).match(reg);
  if (match) {
    return decodeURIComponent(match[2]);
  }
  return null;
}

const nameValue = getQueryParams('name');
console.log(nameValue);
// Output: "John"

上面这段代码中，我们使用了RegExp正则表达式对象来匹配参数name对应的值。其中(^|&)表示参数name前面可能是一个问号(?)或一个&符号；&表示参数name后面必须是一个&符号；i表示忽略大小写。而substr(1)是为了排除问号(?)。

实现了函数之后，只需要传入参数名即可获取参数的值。

2. 获取多个参数的值

如果需要获取链接中的多个参数的值，我们仍然可以使用正则表达式来处理。实现方式与单个参数的值类似，只不过需要在函数中增加遍历所有参数的逻辑。

function getQueryParams() {
  const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i');
  const match = window.location.search.substr(1).match(reg);
  const queryParams = {};
  if (match) {
    for (let i = 1; i < match.length; i += 2) {
      const key = match[i];
      queryParams[key] = decodeURIComponent(match[i + 1]);
    }
  }
  return queryParams;
}

const params = getQueryParams();
console.log(params.name); // Output: "John"
console.log(params.age); // Output: "26"
console.log(params.gender); // Output: "male"

在这段代码中，我们使用了一个for循环来遍历所有查询参数，将参数名和对应的值存储在一个对象中并返回。

方法二：字符串截取

字符串截取是一种较为原始的方式，与正则表达式相比较来说不够灵活，但是在某些场景下仍然有着较好的表现。

1. 获取单个参数的值

与正则表达式相同，需要获取参数name对应的值。下面的代码中，我们使用了字符串的indexOf和substring方法来实现。

function getQueryParam(name) {
  const url = window.location.href;
  const start = url.indexOf(`?${name}=`);
  if (start === -1) {
    return null;
  }
  const end = url.indexOf('&', start);
  const value = url.substring(start + name.length + 2, end === -1 ? url.length : end);
  return decodeURIComponent(value);
}

const nameValue = getQueryParam('name');
console.log(nameValue);
// Output: "John"

上面代码中，indexOf用来查找参数name在链接中的位置，substring用于截取参数值，并且使用了decodeURIComponent将参数值解码。

2. 获取多个参数的值

需要获取链接中的多个参数的值，我们仍然可以使用字符串截取的方式。这里同样可以使用for循环来实现。

function getQueryParams() {
  const url = window.location.href;
  const start = url.indexOf('?');
  if (start === -1) {
    return {};
  }
  const queryParams = {};
  const paramString = url.substring(start + 1);
  const paramList = paramString.split('&');
  for (let i = 0; i < paramList.length; i++) {
    const [key, value] = paramList[i].split('=');
    const decodeValue = decodeURIComponent(value);
    queryParams[key] = decodeValue;
  }
  return queryParams;
}

const params = getQueryParams();
console.log(params.name); // Output: "John"
console.log(params.age); // Output: "26"
console.log(params.gender); // Output: "male"

在这段代码中，我们将参数列表分割成一个数组，然后使用for循环遍历数组中的每个参数，将每个参数截取成键值对，存储在一个对象中并返回。