本文介绍在 node.js 爬虫中，如何从 html 字符串中精准提取 `` 标签内 `href` 属性指向的 css 文件路径（如 `/assets/css/style.css`），避免简单字符串截取导致的误判，推荐使用正则结合语义匹配的稳健方案。
直接对 HTML 字符串调用 indexOf('.css') 并向前截取至 " 或 = 的方式存在明显缺陷：它无法区分 .css 是文件名的一部分、注释内容、JS 字符串，还是真正的样式表引用；更无法保证截取边界准确（例如 href= "/static/main.css" 中空格、换行、单引号或属性顺序变化都会导致失败）。
✅ 推荐做法是基于 HTML 语义解析逻辑，聚焦 <link> 标签中 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 解析；
- 对于内联 <style> 或 @import 引入的 CSS，本方案不覆盖，需额外处理；
- 生产环境建议添加 URL 标准化（如 new URL(url, baseUrl).href）以支持相对路径解析。
综上，与其“向后找 .css 再向前截取”，不如“向前识别 <link> + href + .css”——语义明确、鲁棒性强，是 Web 抓取中提取静态资源路径的最佳实践。
