JavaScript批量移除逗号分隔URL查询字符串问题求助

我需要移除逗号分隔的URL字符串中的所有查询参数，但当前代码仅能部分实现需求。

现有代码 #

const urls = '//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-2.psd?fmt=png-alpha&scl=1&hei=77&wid=92&qlt=100,1&resMode=sharp2&size=92,77&chrss=full,//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-4.psd?fmt=png-alpha&scl=1&hei=59&wid=92&qlt=100,1&resMode=sharp2&size=92,59&chrss=full,//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-6.psd?fmt=png-alpha&scl=1&hei=79&wid=92&qlt=100,1&resMode=sharp2&size=92,79&chrss=full,//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-7.psd?fmt=png-alpha&scl=1&hei=79&wid=92&qlt=100,1&resMode=sharp2&size=92,79&chrss=full,//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-8.psd?fmt=png-alpha&scl=1&hei=59&wid=92&qlt=100,1&resMode=sharp2&size=92,59&chrss=full,//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-9.psd?fmt=png-alpha&scl=1&hei=47&wid=92&qlt=100,1&resMode=sharp2&size=92,47&chrss=full,https://i.dell.com/das/dih.ashx/57x57/sites/csimages/Video_Imagery/all/lati-ys-video-thumbnail-hero-1280x720.jpg';

const urlsWithoutQueryParams = urls.replace(/(\?.*?(?=,)\|\?.+$)/g, '');

console.log(urlsWithoutQueryParams);

期望输出 #

//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-2.psd
//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-4.psd
//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-6.psd
//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-7.psd
//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-8.psd
//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-9.psd
https://i.dell.com/das/dih.ashx/57x57/sites/csimages/Video_Imagery/all/lati-ys-video-thumbnail-hero-1280x720.jpg

代码错误点 #

你的正则表达式/(\?.*?(?=,)\|\?.+$)/g存在三个关键问题：

1. 逻辑或符号使用错误：正则中的\|是转义后的字面量竖线，而非逻辑或分支。你原本想匹配两种场景（?到逗号前、?到字符串结尾），但写法错误导致无法触发分支匹配。
2. 非贪婪匹配的误判：.*?是非贪婪匹配，会在查询参数内部的逗号（比如qlt=100,1）处停止，导致只删除部分查询参数，剩余内容残留。
3. 匹配范围不准确：无法正确区分查询参数内部的逗号和URL分隔用的逗号，导致匹配范围偏离预期。

修正方案 #

方案一：分割处理再拼接（直观可靠） #

将字符串按逗号分割为单个URL，对每个URL截取?之前的部分，最后按期望格式拼接：

const urls = '//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-2.psd?fmt=png-alpha&scl=1&hei=77&wid=92&qlt=100,1&resMode=sharp2&size=92,77&chrss=full,//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-4.psd?fmt=png-alpha&scl=1&hei=59&wid=92&qlt=100,1&resMode=sharp2&size=92,59&chrss=full,//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-6.psd?fmt=png-alpha&scl=1&hei=79&wid=92&qlt=100,1&resMode=sharp2&size=92,79&chrss=full,//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-7.psd?fmt=png-alpha&scl=1&hei=79&wid=92&qlt=100,1&resMode=sharp2&size=92,79&chrss=full,//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-8.psd?fmt=png-alpha&scl=1&hei=59&wid=92&qlt=100,1&resMode=sharp2&size=92,59&chrss=full,//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-9.psd?fmt=png-alpha&scl=1&hei=47&wid=92&qlt=100,1&resMode=sharp2&size=92,47&chrss=full,https://i.dell.com/das/dih.ashx/57x57/sites/csimages/Video_Imagery/all/lati-ys-video-thumbnail-hero-1280x720.jpg';

const urlsWithoutQueryParams = urls.split(',')
  .map(url => url.split('?')[0])
  .join('\n');

console.log(urlsWithoutQueryParams);

方案二：修正正则表达式 #

使用\?[^,]+(?=,|$)匹配查询参数：\?匹配问号，[^,]+匹配所有非逗号字符（避免误判查询参数内的逗号），(?=,|$)正向预查URL分隔的逗号或字符串结尾：

const urls = '//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-2.psd?fmt=png-alpha&scl=1&hei=77&wid=92&qlt=100,1&resMode=sharp2&size=92,77&chrss=full,//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-4.psd?fmt=png-alpha&scl=1&hei=59&wid=92&qlt=100,1&resMode=sharp2&size=92,59&chrss=full,//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-6.psd?fmt=png-alpha&scl=1&hei=79&wid=92&qlt=100,1&resMode=sharp2&size=92,79&chrss=full,//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-7.psd?fmt=png-alpha&scl=1&hei=79&wid=92&qlt=100,1&resMode=sharp2&size=92,79&chrss=full,//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-8.psd?fmt=png-alpha&scl=1&hei=59&wid=92&qlt=100,1&resMode=sharp2&size=92,59&chrss=full,//i.dell.com/is/image/DellContent/content/dam/ss2/products/laptops-and-2-in-1s/latitude/13-9330-touch/media-gallery/2in1/notebook-latitude-13-9330-gray-gallery-9.psd?fmt=png-alpha&scl=1&hei=47&wid=92&qlt=100,1&resMode=sharp2&size=92,47&chrss=full,https://i.dell.com/das/dih.ashx/57x57/sites/csimages/Video_Imagery/all/lati-ys-video-thumbnail-hero-1280x720.jpg';

const urlsWithoutQueryParams = urls.replace(/\?[^,]+(?=,|$)/g, '')
  .split(',')
  .join('\n');

console.log(urlsWithoutQueryParams);

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