JavaScript拆分含多个逗号的URL字符串结果异常如何修复

直接调用split(",")拆分多URL拼接字符串时，没有区分两类逗号：

• 用于分隔不同独立URL的分隔逗号
• 单个URL自身携带的逗号（常见于CDN图片的尺寸、裁剪、水印等参数位，比如示例里resize,0,100里的逗号就是URL的组成部分）
  最终会把完整URL拆成零散的参数片段，无法得到正确的URL列表。

错误实现参考：

// 错误写法：无差别按逗号切割
const rawUrlStr = "https://img.example.com/resize,0,100/100_AL_.jpg,https://img.example.com/resize,200,200/cover.jpg"
const wrongSplitResult = rawUrlStr.split(",")
// 错误输出：["https://img.example.com/resize", "0", "100/100_AL_.jpg", "https://img.example.com/resize", "200", "200/cover.jpg"]

按可改造的优先级选对应方案即可：

• 方案1（优先推荐，零误判）：从拼接源头改造分隔规则
  拼接URL列表时，不要用URL中可能出现的逗号做分隔符，换成URL编码中不会出现的特殊字符串作为分隔符（比如|||、;;;），拆分时直接按约定的特殊分隔符切割即可，完全不会出现误拆问题。

  // 拼接阶段逻辑改造
  const originalUrlList = [
    "https://img.example.com/resize,0,100/100_AL_.jpg",
    "https://img.example.com/resize,200,200/cover.jpg"
  ]
  // 用自定义特殊分隔符拼接
  const joinedStr = originalUrlList.join("|||")
  
  // 拆分阶段直接按约定分隔符切割，结果100%准确
  const correctUrlList = joinedStr.split("|||")
  

• 方案2（适配无法修改拼接逻辑的场景）：基于URL特征做正则提取
  如果已经无法修改上游的拼接逻辑，拿到的原始串就是逗号拼接的混合内容，可以利用「所有独立URL都以http://或https://开头」的特征，用正则匹配提取所有完整URL，自动跳过URL内部的逗号。

  const rawUrlStr = "https://img.example.com/resize,0,100/100_AL_.jpg,https://img.example.com/resize,200,200/cover.jpg"
  // 正则匹配从http/https开头，到下一个http开头位置/字符串末尾的所有内容
  const correctUrlList = rawUrlStr.match(/https?:\/\/.*?(?=,https?:\/\/|$)/g) || []
  

  该方案兼容绝大多数带内部逗号的URL场景，不需要硬编码判断逗号位置。

不要尝试编写硬编码规则判断「哪些逗号属于URL内部、哪些是分隔符」——不同CDN厂商的URL参数规则差异极大，这类判断逻辑漏判率极高，后续维护成本很高。

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