如何完整获取URL中嵌套的查询字符串参数？

问题原因 #

你当前的URL里，url参数的值未做URL编码，其中的&被浏览器解析成了外层查询参数的分隔符，导致lang、sign这些参数被当成了track页面的独立参数，而非url参数的一部分。

解决方法 #

方法一：从源头编码参数（推荐） #

生成track页面的URL时，对url参数的值进行URL编码，把其中的&替换为%26，?替换为%3F（浏览器通常会自动处理?，但编码更规范）。

比如原url参数值是https://somewebsite.com/?968061242&lang=EN&sign=daff4be265096eb31aca5c986ac51c6c&source=api_wrapper，编码后变为：

https%3A%2F%2Fsomewebsite.com%2F%3F968061242%26lang%3DEN%26sign%3Ddaff4be265096eb31aca5c986ac51c6c%26source%3Dapi_wrapper

此时完整的track URL为：

http://localhost:3000/track?url=https%3A%2F%2Fsomewebsite.com%2F%3F968061242%26lang%3DEN%26sign%3Ddaff4be265096eb31aca5c986ac51c6c%26source%3Dapi_wrapper

这时用你原来的代码就能直接拿到完整的url参数值：

let search = window.location.search;
let params = new URLSearchParams(search);
let resp = params.get('url');
console.log("resp => ", resp); // 输出完整的嵌套参数URL

方法二：手动拼接（仅当无法修改源头时使用） #

如果没办法修改生成URL的逻辑，只能手动从location.search中截取url参数的完整部分：

const search = window.location.search.slice(1); // 去掉开头的?
const urlParamStart = search.indexOf('url=');
const nextParamStart = search.indexOf('&', urlParamStart + 4); // 从url=之后找下一个&的位置
const fullUrlValue = nextParamStart === -1 
  ? search.slice(urlParamStart + 4) 
  : search.slice(urlParamStart + 4, nextParamStart);
console.log("fullUrlValue => ", fullUrlValue);

这种方法有局限性：如果url参数不是最后一个参数，需准确判断下一个参数的起始位置；且如果url参数值本身包含未编码的&，会导致截取错误，因此优先推荐方法一。

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