本文详解如何用 sed 命令精准定位 html 中带缩进的 `` 标签，并在其前安全插入新样式链接，重点解决因空白符导致匹配失败的常见问题。

在处理自动生成或模板化的 HTML 文件时，常需通过命令行工具（如 sed）自动化注入资源引用，例如添加 Google Fonts 的 标签。但直接套用正则匹配常因 HTML 缩进、空格或制表符而失败——正如示例中 sed "/^ 实际位于缩进行（即行首含空格或制表符），而 ^ 锚点严格要求从行首真正开始匹配，导致正则无法命中。

✅ 正确做法是显式兼容前置空白符。推荐使用 POSIX 字符类 [[:space:]]*，它可匹配任意数量的空格、制表符等空白字符：

sed '/^[[:space:]]*<link[[:space:]]\+rel="stylesheet"[[:space:]]\+href="[^"]*styles\.css"[^>]*>/i\
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">'
test.html

⚠️ 注意事项：

Google Drive Setup

在 Linux 上使用 rclone + gog OAuth 配置 Google Drive 挂载。适用于将 Google Drive 挂载为本地文件系统、设置开机自动挂载或进行其他相关配置。

下载

• 使用 [[:space:]]* 替代 ^ 后的硬空格，确保跨编辑器/生成器兼容（不同工具缩进习惯不同）；
• i\ 是 GNU sed 的插入命令（换行后写内容），注意反斜杠后必须换行，且插入内容不能与 i 在同一行；
• URL 中空格需编码为 +（Noto Serif → Noto+Serif），引号需转义（双引号内用 \" 或改用单引号包裹整个 sed 表达式）；
• 若需原地修改文件，添加 -i 参数（如 sed -i '' ... 在 macOS；Linux 直接 sed -i ...）；
• 强烈建议先用 --dry-run 类似方式预览：sed -n '/^[[:space:]]*

? 进阶提示：若 HTML 结构复杂或需多条件判断（如排除注释中的伪 link），建议切换至 xmlstar 或 Python + BeautifulSoup，避免正则解析 HTML 的固有风险。但对于简单、格式稳定的静态插入任务，健壮的 sed 表达式仍是高效可靠的选择。

立即学习“前端免费学习笔记（深入）”；