如何提取 HTML 字符串中 CSS 文件的完整 URL 路径 返回列表

本文介绍在 node.js 爬虫中，如何从 html 字符串中精准提取 `` 标签内 `href` 属性指向的 css 文件路径（如 `/assets/css/style.css`），避免简单字符串截取导致的误判，推荐使用正则结合语义匹配的稳健方案。

直接对 HTML 字符串调用 indexOf('.css') 并向前截取至 " 或 = 的方式存在明显缺陷：它无法区分 .css 是文件名的一部分、注释内容、JS 字符串，还是真正的样式表引用；更无法保证截取边界准确（例如 href= "/static/main.css" 中空格、换行、单引号或属性顺序变化都会导致失败）。

✅ 推荐做法是基于 HTML 语义解析逻辑，聚焦 标签中 rel="stylesheet"（或至少含 href 且扩展名为 .css）的合法

样式资源。以下是一个生产就绪的正则提取方案：

function extractCssUrls(htmlString) {
  // 匹配  标签中 href 属性值（支持 rel="stylesheet" 在前/后/缺失，但要求 href 存在且以 .css 结尾）
  const cssUrlRegex = /]*href\s*=\s*["']([^"']*\.(?:css|CSS))(?=["']\s*\/?>)/gi;
  const matches = htmlString.match(cssUrlRegex);
  if (!matches) return [];

  // 提取 href 值中的 URL（去除标签和属性前缀）
  return matches.map(match => {
    const urlMatch = match.match(/href\s*=\s*["']([^"']+\.(?:css|CSS))/i);
    return urlMatch ? urlMatch[1] : null;
  }).filter(Boolean);
}

// 示例使用
const html = `
  
  
  
  
  
  
`;

console.log(extractCssUrls(html));
// 输出: [ '/assets/css/reset.css', 'https://cdn.example.com/theme.css', '/styles/main.min.CSS' ]

? 关键设计说明：

• 正则采用不区分大小写（i 标志）并支持 .CSS；
• 使用 [^>]* 宽松匹配标签内任意属性顺序；
• href\s*=\s*["'] 兼容空格与单/双引号；
• (?=["']\s*\/?>) 确保 URL 后紧跟引号及可选闭合符号，避免跨标签误捕；
• 显式过滤 .css 扩展名，排除 class="my-css" 等干扰。

⚠️ 注意事项：

• 若 HTML 结构极度不规范（如未闭合标签、属性值含未转义引号），正则可能失效——此时应升级为使用 jsdom 或 cheerio 进行 DOM 解析；
• 对于内联
• 生产环境建议添加 URL 标准化（如 new URL(url, baseUrl).href）以支持相对路径解析。

综上，与其“向后找 .css 再向前截取”，不如“向前识别 + href + .css”——语义明确、鲁棒性强，是 Web 抓取中提取静态资源路径的最佳实践。