如何获取HTML中CSS文件的完整路径

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《如何提取 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) {
  // 匹配 <link> 标签中 href 属性值（支持 rel="stylesheet" 在前/后/缺失，但要求 href 存在且以 .css 结尾）
  const cssUrlRegex = /<link[^>]*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 = `
  <link rel="stylesheet" href="/assets/css/reset.css">
  <link href='https://cdn.example.com/theme.css' rel="stylesheet">
  <link type="text/css" href="/styles/main.min.CSS" />
  <!-- 不匹配： -->
  <script src="app.js"></script>
  <link href="/img/icon.png" rel="icon">
`;

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 解析；
• 对于内联