如何处理URL查询字符串中的&符号以避免参数解析错误？

问题现象 #

给定URL：

http://localhost:3000/?team=Video%20QA%20&%20Test%20Team&teamCode=XXXXX

使用URLSearchParams解析：

const searchParams = Object.fromEntries(new URLSearchParams(window.location.search).entries());

或者用query-string库解析：

qs.parse('http://localhost:3000/?team=Video%20QA%20&%20Test%20Team&teamCode=XXXXX')

得到的结果均为：

{"team":"Video QA "," Test Team":"","teamCode":"XXXXX"}

不符合预期，期望解析结果是：

{"team":"Video QA & Test Team","teamCode":"XXXXX"}

原因分析 #

URL里的&是HTML实体转义后的&符号，但按照URL参数规则，未编码的&是参数分隔符。解析器会把&中的&当成新参数的起始标记，导致team的值被截断，后续的 Test Team被误识别为一个空值的参数键。

解决方法 #

1. 编码阶段（推荐方案） #

生成URL参数时，必须用encodeURIComponent对参数值进行完整编码，而非encodeURI。encodeURI不会编码&这类URL参数分隔符，而encodeURIComponent会将&编码为%26，确保解析时不会被误判成分隔符。

示例代码：

const teamValue = 'Video QA & Test Team';
const encodedTeam = encodeURIComponent(teamValue);
const url = `http://localhost:3000/?team=${encodedTeam}&teamCode=XXXXX`;
// 生成的正确URL：http://localhost:3000/?team=Video%20QA%20%26%20Test%20Team&teamCode=XXXXX

2. 修复已存在的错误URL #

如果无法修改URL生成逻辑，只能处理现有错误URL，可以先将URL中的&替换为%26，再进行解析：

// 处理当前页面的URL
const fixedSearch = window.location.search.replace(/&/g, '%26');
const searchParams = Object.fromEntries(new URLSearchParams(fixedSearch).entries());

// 处理字符串形式的URL
const faultyUrl = 'http://localhost:3000/?team=Video%20QA%20&%20Test%20Team&teamCode=XXXXX';
const fixedUrl = faultyUrl.replace(/&/g, '%26');
const parsed = qs.parse(fixedUrl);

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