JavaScript如何按&拆分查询字符串且不拆分属性值内的&

直接用split('&')属于无状态拆分，没法区分分隔符&和值内部的&，可以用以下两种方案实现正确拆分：

方案1：正则匹配（代码最简洁） #

核心是利用正向预查识别真正的分隔符位置，只在「后面跟着下一个属性键名+等号」或者字符串末尾的位置断句，不会切到值内部的&：

const query = "attr1=value1&attr2=va & lu&e2&attr3=value3"
const result = query.match(/([^&=]+=[^&]*?(?=&[^&=]+=|$))/g)

console.log(result)
// 输出: ["attr1=value1", "attr2=va & lu&e2", "attr3=value3"]

正则逻辑拆解：

• [^&=]+=：匹配属性名部分，从当前位置匹配到第一个等号，属性名不包含&、=字符
• [^&]*?：非贪婪模式匹配属性值内容
• (?=&[^&=]+=|$)：正向断言，只有当后续内容是「& + 下一个属性名 + =」或者直接到字符串结尾时，才判定当前位置是键值对的结束点

方案2：遍历拼接（逻辑更易维护） #

如果觉得正则可读性差，可以先全量按&拆分，再遍历判断片段是不是新属性的开头，把属于同一个值的片段拼回去：

function splitQuery(queryStr) {
  const rawSegments = queryStr.split('&')
  const keyValuePairs = []
  let currentPair = ''

  for (const seg of rawSegments) {
    // 判断当前片段是不是新属性的开头：片段开头是「不含=的属性名 + =」结构
    if (/^[^=]+=/.test(seg)) {
      if (currentPair) keyValuePairs.push(currentPair)
      currentPair = seg
    } else {
      // 不是新属性开头，说明这个片段是上一个属性值的一部分，把拆分时去掉的&补回来拼接
      currentPair += `&${seg}`
    }
  }
  // 把最后一个键值对推入结果
  if (currentPair) keyValuePairs.push(currentPair)
  return keyValuePairs
}

// 测试用例
const query = "attr1=value1&attr2=va & lu&e2&attr3=value3"
console.log(splitQuery(query))
// 输出: ["attr1=value1", "attr2=va & lu&e2", "attr3=value3"]

补充说明：如果是符合URL编码规范的查询字符串，值内部的&会被自动编码为%26，直接用原生URLSearchParams就能完成解析，不需要额外写逻辑。上面两种方案专门针对未做编码、值内部直接包含&的非标准查询字符串场景。

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