如何使用JavaScript简单高效地修改URL域名并兼容所有浏览器

嘿，这个需求其实用JavaScript原生的URL对象就能轻松搞定，完全不用自己写复杂的正则去处理各种URL边缘情况，而且兼容性拉满，覆盖所有主流浏览器甚至旧版IE！

核心实现思路 #

原生URL对象会帮你自动解析URL的各个组成部分（协议、域名、路径、参数等等），我们只需要修改域名部分，再重新拼接成完整URL就行，简单又高效。

代码示例 #

function replaceUrlDomain(originalUrl, newDomain) {
  try {
    // 把原始URL解析成URL对象
    const originalUrlObj = new URL(originalUrl);
    // 解析新域名，提取它的origin（协议+域名+端口）
    const newDomainObj = new URL(newDomain);
    
    // 替换域名部分，这里用origin的话会连协议一起替换，用host则只换域名+端口
    originalUrlObj.origin = newDomainObj.origin;
    
    // 返回修改后的完整URL
    return originalUrlObj.href;
  } catch (error) {
    // 处理无效URL的异常情况，避免页面报错
    console.error('Failed to process URL:', error);
    return originalUrl;
  }
}

// 测试一下你的需求场景
const inputUrl = "https://www.example1.com/xyz/abc/123";
const targetDomain = "https://www.modifiedexample.com/";
const outputUrl = replaceUrlDomain(inputUrl, targetDomain);
console.log(outputUrl); 
// 输出结果：https://www.modifiedexample.com/xyz/abc/123

兼容性说明 #

URL对象在Chrome、Firefox、Safari、Edge这些现代浏览器里完全支持，甚至在IE11中也能正常使用（IE11的URL对象仅存在一些细微的API差异，核心的origin、host、href属性都能正常工作），完全满足你兼容所有浏览器的要求。

备用方案：正则替换（不推荐） #

如果你确实需要兼容一些极端古老的浏览器（比如IE10及以下），可以用正则方案，但要注意正则很容易在复杂URL场景下出错（比如带端口、子域名、不同协议的情况）：

function replaceDomainWithRegex(originalUrl, newDomain) {
  // 匹配URL开头的协议+域名部分
  const domainPattern = /^https?:\/\/[^\/]+/;
  // 移除新域名末尾的斜杠，避免替换后出现双斜杠
  const cleanedNewDomain = newDomain.replace(/\/$/, '');
  return originalUrl.replace(domainPattern, cleanedNewDomain);
}

但还是强烈推荐使用原生URL对象，因为它能处理所有标准URL的边缘情况，不用你自己维护复杂的正则规则。

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