如何用JavaScript将网站归档为单HTML文件并修正资源路径？

你的核心需求是把网页中的所有资源路径（CSS、图片、链接等）转为基于目标URL的绝对路径，避免归档后资源失效。当前正则只覆盖了href="/xxx"这种有限场景，漏了很多情况——比如相对路径（../xxx、xxx）、src属性、单引号/无引号的属性值，还有其他资源标签（如<img>、<script>、<link>）。下面给两种可行方案：

方案一：增强版正则匹配 #

如果坚持用正则，需要覆盖更多属性和路径格式，同时用URL API确保路径转换准确，避免手动拼接出错：

const url = "https://example.com"; // 用户提供的目标URL
const response = await fetch(url);
const html = await response.text();

// 匹配所有href和src属性的相对路径（支持单双引号、无引号）
const absoluteHTML = html.replace(
  /(href|src)=["']?((?!https?:\/\/|\/\/|#).*?)["']?/gi,
  (match, attr, path) => {
    try {
      const absoluteUrl = new URL(path, url).href;
      return `${attr}="${absoluteUrl}"`;
    } catch (e) {
      // 无效路径则保留原内容
      return match;
    }
  }
);

fs.writeFile('output.html', absoluteHTML, (err) => {
  if (err) throw err;
  console.log('归档文件已保存！');
});

这个正则的逻辑：

• 匹配href或src属性
• 排除已经是绝对路径（http:///https://）、协议相对路径（//）、锚点（#）的情况
• 用URL构造函数自动解析相对路径为绝对URL，处理../、./等复杂相对路径更可靠

方案二：DOM解析（推荐） #

正则处理HTML天生容易出错（比如注释里的属性、内联脚本中的字符串），用DOM解析是更稳妥的方式。Node.js环境可以用jsdom库，浏览器环境直接用原生DOMParser：

Node.js（使用jsdom） #

先安装依赖：npm install jsdom

const { JSDOM } = require('jsdom');
const fs = require('fs').promises;

async function archivePage(targetUrl) {
  const response = await fetch(targetUrl);
  const html = await response.text();
  const dom = new JSDOM(html, { url: targetUrl }); // 传入目标URL，自动处理相对路径
  const document = dom.window.document;

  // 处理所有带href的元素：a、link、area等
  document.querySelectorAll('[href]').forEach(el => {
    const href = el.getAttribute('href');
    if (href && !href.startsWith('#') && !/^https?:\/\/|^\/\//.test(href)) {
      el.href = new URL(href, targetUrl).href;
    }
  });

  // 处理所有带src的元素：img、script、iframe、video等
  document.querySelectorAll('[src]').forEach(el => {
    const src = el.getAttribute('src');
    if (src && !/^https?:\/\/|^\/\//.test(src)) {
      el.src = new URL(src, targetUrl).href;
    }
  });

  // 处理style标签内的相对URL（比如background-image）
  document.querySelectorAll('style').forEach(styleEl => {
    styleEl.textContent = styleEl.textContent.replace(
      /url\(['"]?((?!https?:\/\/|\/\/).*?)['"]?\)/gi,
      (match, path) => {
        try {
          const absoluteUrl = new URL(path, targetUrl).href;
          return `url("${absoluteUrl}")`;
        } catch (e) {
          return match;
        }
      }
    );
  });

  const finalHtml = dom.serialize();
  await fs.writeFile('output.html', finalHtml);
  console.log('归档文件已保存！');
}

// 调用示例
archivePage('https://example.com');

这个方案的优势：

• 准确识别所有DOM元素的属性，不会误匹配注释或脚本中的字符串
• 自动处理base标签（如果页面存在）
• 可以扩展处理内联样式中的资源路径，这是正则很难覆盖的场景

注意事项 #

1. 跨域问题：如果在浏览器环境运行，可能遇到CORS限制，Node.js环境则无此问题
2. 动态加载资源：如果页面有JS动态加载的资源，上述方案无法捕获，需要额外处理（比如用Puppeteer等工具渲染页面后再归档）
3. 资源本地打包：如果需要把资源下载到本地并替换为相对路径，还需要额外编写资源下载逻辑，上述方案仅处理URL转换

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