Ctrl+Shift+H（Windows/Linux）或Cmd+Shift+H（macOS）是VS Code内置HTML查找替换入口，需手动在“包括”框填*.html等glob模式、确保编码为UTF-8、正则中$1应写为\$1，避免使用万能正则处理嵌套或复杂HTML结构。
VS Code 的 Ctrl+Shift+H（Windows/Linux）或 Cmd+Shift+H（macOS）就是最直接、最可靠的 HTML 查找替换入口，不用装插件、不需写脚本，但必须手动限定范围，否则极易误改。
为什么 Ctrl+Shift+H 找不到目标内容
常见错误是打开面板后直接输入内容就点“全部替换”，结果没命中——根本原因不是功能失效，而是 VS Code 默认搜索整个工作区所有文件类型，而你的目标只在 *.html 里。
- 确认右下角显示编码为
UTF-8；若显示UTF-8 with BOM或乱码，点击它 → “Reopen with Encoding” → 选UTF-8，否则中文会被替成问号 - 在替换面板底部的「包括」框里必须填
*.html；如果 HTML 集中在src/pages下，填src/pages/**/*.html更精准 - 别信右上角那个「文件类型」下拉菜单——它只是视觉提示，真正起作用的只有「包括」框里的 glob 模式
替换 class 属性值时 $1 不生效怎么办
正则捕获组在 Windows 版 VS Code 中默认被 Shell 解析干扰， 会原样输出而非插入匹配内容。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 统一写成
\$1，macOS 和 Windows 都兼容；同理，$2→\$2，$&→\$& - 例如把
class="btn-primary"改成class="button-primary"，正则用(\sclass\s*=\s*["'])(btn-primary)(["'])，替换填$1button-primary$3→ 实际要写成\$1button-primary\$3 - 启用正则后务必检查「区分大小写」和「全字匹配」：想只换独立单词
old，得加词界符\bold\b，否则subold也会中招
为什么 <div.*?>.*?</div> 总是替换错
这种“万能正则”在 HTML 场景下等于放弃控制权。它不处理换行、不识别嵌套、不区分引号类型，更不会跳过注释或 <script> 块。
立即学习“前端免费学习笔记（深入）”；
-
.*?是非贪婪，但遇到<div>\n <p>text</p>\n</div>中的换行就会断匹配 - 嵌套如
<div><div>nested</div></div>，正则会在第一个</div>就结束，外层标签被截断 - 属性含 HTML 片段时更危险，比如
<div data-html="<span>test</span>">，正则可能提前闭合 - 真要改结构，请用
cheerio（Node.js）或DOMParser（浏览器），它们按标准解析 DOM 树，不被格式细节带偏
真正难的不是写出一个能跑的正则，而是判断哪一段 HTML 还能靠文本替换兜住——一旦出现多行 class 值、data- 属性混用、JS 模板字符串内嵌，边界就已消失。这时候停手、切解析器，比调一小时正则更省时间。
