JavaScript如何按指定字符分割URL拆分基础链接与查询参数

直接用JavaScript原生字符串的split()方法就能实现需求，核心是从?字符的位置把链接切为前后两段。

基础单条处理写法 #

针对单个链接的处理逻辑非常简单，适合刚入门理解：

// 原始待处理链接
const rawLink = "http//example.com/product/iphone?source=ac";
// 以?为分隔符拆分，限制最多拆成2段，避免多?场景拆分出错
const splitParts = rawLink.split('?', 2);

const link1 = splitParts[0]; // ?前面的基础路径
const link2 = '?' + splitParts[1]; // 拆分时?会被当成分隔符移除，手动补回即可

// 打印结果和预期完全一致
console.log(link1); // http//example.com/product/iphone
console.log(link2); // ?source=ac

其余两个链接替换rawLink的取值，用相同逻辑处理就能得到对应结果。

批量处理写法 #

如果要一次性处理所有链接，不用重复写逻辑，直接存到数组里循环处理即可：

// 所有待处理的链接统一放到数组中
const allLinks = [
  "http//example.com/product/iphone?source=ac",
  "http//example.com/product/samsung?source=tz",
  "http//example.com/product/sony?source=sn"
];

// 遍历每个链接完成拆分
allLinks.forEach(url => {
  const [link1, queryPart] = url.split('?', 2);
  const link2 = '?' + queryPart;
  // 这里写后续要用到link1、link2的业务逻辑即可
  console.log(link1, link2);
});

补充说明 #

• split方法传入第二个参数2，是为了保证就算链接里后续还有其他?字符，也只会拆成两段，不会出现多余的拆分结果，稳定性更好
• 因为split会把分隔符（也就是这里的?）从结果里剔除，所以参数部分记得手动在前面拼接回?，就能完全匹配你要的输出格式。

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