本文介绍在 node.js 网页爬虫中，如何从原始 html 字符串中可靠提取 `` 标签中 `href` 属性值（即 css 文件的完整路径），避免依赖脆弱的 `indexof()` 和手动截取，推荐使用语义化正则匹配方案。
在 HTML 解析场景中，仅靠 indexOf('.css') 定位并向前截取字符串（如用 substring(0, index)）存在严重缺陷：它无法区分 .css 是文件名的一部分、注释内容、JS 字符串，还是误匹配（如 class="my-css" 中的 .css）。更关键的是，它无法准确回溯到 href= 或引号边界，极易截断出无效路径（如 /assets/css/myCSSfile.css" rel=）。
✅ 推荐方案：使用正则表达式精准匹配 标签中与样式表关联的 href 值。以下正则兼顾兼容性与鲁棒性：
const cssUrls = htmlString.match( /<link[^>]*href="([^"]*\.css[^"]*)"[^>]*rel=["']stylesheet["']/gi )?.map(match => match.match(/href="([^"]*)"/i)[1]);
该正则含义如下：
- ]*：匹配 字符（容纳 rel, type, media 等任意顺序属性）；
- href="([^"]*\.css[^"]*)"：捕获 href="..." 中包含 .css 的完整路径（支持带查询参数如 ?v=abc）；
- [^>]*rel=["']stylesheet["']：确保该 具有 rel="stylesheet"（忽略大小写与单/双引号）；
- gi 标志：全局（g）+ 不区分大小写（i）匹配。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 若需兼容 rel='stylesheet' 或无引号属性（HTML5 允许），建议改用解析器（如 parse5 或 cheerio），它们更安全、可维护性更高；
- 正则无法处理跨行标签或注释干扰（如 href="a.css">），生产环境强烈建议优先使用 DOM 解析器；
- 若必须用正则且需支持单引号 href='...'，可扩展为：href=(?:["'])([^"']*\.css[^"']*?)(?:["'])。
? 总结：从字符串中“获取前序字符”不是目标，精准定位结构化属性值才是关键。用语义化正则替代 indexOf + substring，可显著提升提取准确性；而面向长期维护，集成轻量级 HTML 解析器（如 cheerio.load(html).$('link[rel="stylesheet"]').attr('href')）是更专业、可扩展的选择。
