如何在请求URL的?后正确添加换行符分隔查询参数

1. 给URL的?后添加换行 #

直接用字符串替换方法即可，之前插入\n不生效，一般是因为使用场景不识别纯文本换行符，根据你的展示场景选对应替换字符就行：

const rawUrl = 'https://www.something.com?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAZUEVHTLQQK3BBSM6%2F20220707%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20220707T080637Z&X-Amz-Expires=6000&X-Amz-Signature=e18ed7e584af5f00b7bb451e19e5dd6319998f676ecb006f3cf4528cd1fe3feb&X-Amz-SignedHeaders=host'

// 普通文本、控制台打印、代码块场景用\n
const textFormattedUrl = rawUrl.replace('?', '?\n')

// HTML页面渲染展示场景用<br>
const htmlFormattedUrl = rawUrl.replace('?', '?<br>')

执行后得到的文本格式URL就是你预期的分行效果：

https://www.something.com?
X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAZUEVHTLQQK3BBSM6%2F20220707%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20220707T080637Z&X-Amz-Expires=6000&X-Amz-Signature=e18ed7e584af5f00b7bb451e19e5dd6319998f676ecb006f3cf4528cd1fe3feb&X-Amz-SignedHeaders=host

2. 无需修改URL格式，直接正确提取文件扩展名（更推荐） #

你之前的正则匹配失效，本质是因为正则会匹配字符串末尾所有非.的字符，查询参数里带.的内容会被一起匹配到，完全不需要靠加换行绕路，只要先把URL里的查询参数部分截断再匹配即可，兼容带/不带查询参数的所有URL场景：

var str = 'https://sample.s3.eu-central-1.amazonaws.com/ad/0-frame.json?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAZUEVHTLQQK3BBSM6%2F20220707%2Feu-central-1%2Fs3%2Faws4_request&X-Amz-Date=20220707T080233Z&X-Amz-Expires=6000&X-Amz-Signature=b01777006a08d9d251f46789d50a5873eb5b74eb8580f4af427ffd657d8c45b3&X-Amz-SignedHeaders=host';

// 先截取?之前的路径部分，再执行扩展名匹配
const fileExt = str.split('?')[0].toLowerCase().match(/[^\.]*$/)[0];
console.log(fileExt) // 输出：json

这个写法不会修改原始URL格式，也不会出现换行符导致URL请求失效的问题，鲁棒性更强。

内容的提问来源于stack exchange，提问作者Tommy is my cat