本文介绍在 node.js 网页爬虫中，如何从 html 字符串中精准提取 `` 标签内 `href` 属性指向的 css 文件完整路径（如 `/assets/css/style.css`），避免简单字符串截取导致的路径不完整或误匹配问题。
在网页抓取场景中，仅依赖 indexOf('.css') 并向前截取字符串（如 substring(0, index)）存在明显缺陷：它无法识别属性边界，容易截断到错误位置（例如混入 class="main-css" 中的 .css）、遗漏协议/路径、或因换行/空格/属性顺序变化而失效。更健壮的方式是基于 HTML 结构语义进行解析——优先匹配 <link> 标签中 rel="stylesheet"（或兼容无 rel 属性但含 href 的样式链接），再安全提取 href 值。
推荐使用正则表达式进行轻量级提取（适用于已知 HTML 结构较规范的场景）。以下是一个经过优化、兼顾兼容性与准确性的正则方案：
const extractCssUrls = (htmlString) => {
// 匹配 <link> 标签中 href 属性值，要求标签包含 rel="stylesheet"（可选位置），且 href 在同一标签内
const regex = /<link[^>]*rel\s*=\s*["']stylesheet["'][^>]*href\s*=\s*["']([^"']+)["'][^>]*>|<link[^>]*href\s*=\s*["']([^"']+)["'][^>]*rel\s*=\s*["']stylesheet["'][^>]*>/gi;
const matches = [...htmlString.matchAll(regex)];
return matches.map(m => m[1] || m[2]).filter(Boolean);
};
// 示例使用
const htmlString = `
<link rel="stylesheet" href="/assets/css/main.css">
<link href="https://cdn.example.com/lib/theme.css" rel="stylesheet">
<link type="text/css" href="/static/css/print.css" rel="stylesheet">
`;
console.log(extractCssUrls(htmlString));
// 输出: [ '/assets/css/main.css', 'https://cdn.example.com/lib/theme.css', '/static/css/print.css' ]✅ 关键设计说明：
- 使用两个交替模式（|）覆盖 rel="stylesheet" 在 href 前或后的常见写法；
- [^>]* 确保匹配限定在单个 <link> 标签内部，避免跨标签误捕；
- 捕获组 ([^"']+) 安全提取 href 的双引号/单引号内值，自动排除引号本身；
- filter(Boolean) 清除空匹配，提升鲁棒性。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 正则适用于预处理过的、格式相对规整的 HTML；若 HTML 存在严重嵌套、注释干扰或自闭合错误（如 <link ... > 缺失 /），建议改用专用 HTML 解析器（如 cheerio 或 jsdom）：
const cheerio = require('cheerio'); const $ = cheerio.load(htmlString); const cssUrls = $('link[rel="stylesheet"][href]').map((_, el) => $(el).attr('href')).get(); - 避免使用 .* 等贪婪匹配，防止跨标签或跨行误匹配；
- 提取后建议对 URL 进行标准化（如用 new URL(href, baseUrl).href 补全相对路径），以支持后续下载或分析。
综上，与其“向前截取字符”，不如“定位结构并提取属性”——这是 Web 抓取中处理 HTML 内容的通用原则，既提升准确性，也增强代码可维护性。
