如何用JavaScript修改网站基础URL为带路径的自定义URL？

要实现将页面中的链接从https://原域名/路径转换为https://自定义域名/原域名/路径的效果，可以通过以下JavaScript代码在浏览器环境中完成：

批量修改所有链接 #

如果需要处理页面中所有<a>标签，可使用以下代码：

// 替换成你的自定义基础域名
const customBase = 'https://example.com';

// 获取页面所有链接元素
const allLinks = document.querySelectorAll('a');

allLinks.forEach(link => {
  try {
    // 用URL对象解析原链接，避免手动字符串处理的误差
    const originalUrl = new URL(link.href);
    // 拼接新URL：自定义域名 + 原域名 + 完整路径（含查询参数、哈希）
    const newUrl = `${customBase}/${originalUrl.hostname}${originalUrl.pathname}${originalUrl.search}${originalUrl.hash}`;
    // 更新链接的href属性
    link.href = newUrl;
  } catch (error) {
    // 跳过无效URL，避免中断整个处理流程
    console.warn(`无法处理链接: ${link.href}`, error);
  }
});

处理单个特定链接 #

如果只需要修改某个指定的链接，可以封装成函数单独处理：

function updateLinkHref(linkEl, customDomain) {
  if (!linkEl || !customDomain) return;
  
  try {
    const originalUrl = new URL(linkEl.href);
    linkEl.href = `${customDomain}/${originalUrl.hostname}${originalUrl.pathname}${originalUrl.search}${originalUrl.hash}`;
  } catch (err) {
    console.warn(`处理链接失败: ${linkEl.href}`, err);
  }
}

// 使用示例：修改指定的Google链接
const targetLink = document.querySelector('a[href="https://google.com/A7239J"]');
updateLinkHref(targetLink, 'https://example.com');

关键说明 #

• 使用URL对象的优势：相比手动切割字符串，URL对象能可靠解析出域名、路径、查询参数和哈希值，避免因链接格式差异导致的错误。
• 动态内容处理：如果页面存在AJAX动态加载的链接，需要在新内容渲染完成后重新执行上述代码。
• DOM加载时机：确保代码在DOM完全加载后执行，可以将代码放在DOMContentLoaded事件监听中，或者直接放在页面底部：

  document.addEventListener('DOMContentLoaded', () => {
    // 这里放上述修改链接的代码
  });
  

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