如何从含重定向URL作为参数的URL中获取所有查询参数

问题原因 #

原代码使用正则[?&]' + name + '=([^&]*)匹配参数值，其中[^&]*表示匹配任意非&的字符。但当参数值本身是带查询参数的URL时，值里的&会被误判为主URL的参数分隔符，导致只截取到第一个&之前的内容。

解决方案 #

方案1：使用原生URLSearchParams API（推荐） #

这是现代浏览器提供的标准API，能正确解析符合规范的URL（参数值已编码）。如果你的场景中URL是规范编码的（即重定向URL里的&已转义为%26），直接用这个方法最可靠：

const getParameterByName = (name, url) => {
  const urlObj = new URL(url);
  return urlObj.searchParams.get(name);
};

// 规范编码后的URL示例
const result = getParameterByName('ru', 'https://test.domain.com?param1=a&ru=https://url2.domain.com/?url2paramA=A%26url2paramB=B');
console.log(result); // 输出：https://url2.domain.com/?url2paramA=A&url2paramB=B

如果遇到未编码的不规范URL，首先应该要求生成URL的方进行编码，这是符合HTTP规范的做法。如果无法修改上游，可尝试下面的方案。

方案2：改进正则表达式（处理不规范URL） #

通过调整正则逻辑，从参数名开始，匹配到下一个不属于参数值的&——也就是当&后面跟着合法的参数名格式（字母、数字、下划线等）时，才认为是主参数的分隔符。

const getParameterByName = (name, search) => {
  // 正则匹配：参数名开头，匹配直到下一个&（且&后是合法参数名）或字符串结束
  const regex = new RegExp(`[?&]${name}=([\\s\\S]*?)(?=&[a-zA-Z0-9_]+=|$)`);
  const match = regex.exec(search);
  if (!match) return null;
  try {
    return decodeURIComponent(match[1].replace(/\+/g, ' '));
  } catch {
    return match[1];
  }
};

const result = getParameterByName('ru', 'https://test.domain.com?param1=a&ru=https://url2.domain.com/?url2paramA=A&url2paramB=B');
console.log(result); // 输出：https://url2.domain.com/?url2paramA=A&url2paramB=B

这里的正则([\s\S]*?)(?=&[a-zA-Z0-9_]+=|$)使用了非贪婪匹配和正向预查：

• [\s\S]*?：匹配任意字符（包括换行），非贪婪模式避免过度匹配
• (?=&[a-zA-Z0-9_]+=|$)：正向预查，确保匹配到的位置后面要么是&+合法参数名=，要么是字符串结尾，这样就不会把参数值里的&当成分隔符

方案3：手动解析查询字符串 #

如果需要兼容非常老旧的浏览器，也可以手动拆分查询字符串，逐个处理参数：

const getParameterByName = (name, url) => {
  const searchStr = url.split('?')[1] || '';
  const params = [];
  let currentParam = '';
  let inValue = false;
  
  for (let char of searchStr) {
    if (char === '=' && !inValue) {
      inValue = true;
      currentParam += char;
    } else if (char === '&' && inValue) {
      // 检查下一个字符是否是参数名开头（字母/数字/下划线）
      const nextIndex = searchStr.indexOf(char) + 1;
      if (nextIndex < searchStr.length && /[a-zA-Z0-9_]/.test(searchStr[nextIndex])) {
        params.push(currentParam);
        currentParam = '';
        inValue = false;
      } else {
        currentParam += char;
      }
    } else {
      currentParam += char;
    }
  }
  if (currentParam) params.push(currentParam);
  
  for (let param of params) {
    const [key, ...valueParts] = param.split('=');
    const value = valueParts.join('=');
    if (key === name) {
      try {
        return decodeURIComponent(value.replace(/\+/g, ' '));
      } catch {
        return value;
      }
    }
  }
  return null;
};

const result = getParameterByName('ru', 'https://test.domain.com?param1=a&ru=https://url2.domain.com/?url2paramA=A&url2paramB=B');
console.log(result); // 输出：https://url2.domain.com/?url2paramA=A&url2paramB=B

内容的提问来源于stack exchange，提问作者Satheesh