ctrl+shift+h是vs code开箱即用、语法感知、带预览且可限定范围的默认替换功能，需手动在“包括”框中填写路径（如pages/*/.html）避免误改node_modules等非目标文件。
VS Code 的 Ctrl+Shift+H 为什么是首选
因为它是开箱即用、语法感知、带预览、可限定范围的默认能力，不是插件或高级技巧。它默认对 .html 文件跳过 <script></script> 和 <style></style> 块内的字符串匹配——这点比纯文本编辑器安全得多。
但必须手动在替换面板底部的「包括」框里填 *.html 或 src/**/*.html，否则它会扫整个工作区，把 .js 里的 class="btn" 字符串也改掉。
常见错误现象：Ctrl+Shift+H 输完就点“全部替换”，结果 node_modules 里某个依赖的测试 HTML 片段也被动了，CI 构建失败。
- 先填「包括」：比如
pages/**/*.html，避免误触public/index.html - 右下角看编码：若显示
UTF-8 with BOM或乱码，点它 → 「Reopen with Encoding」→ 选UTF-8，否则中文替换成问号 - 大小写和全字匹配开关别忽略：
btn替换时勾上\bbtn\b，否则subbtn变成subbutton
正则替换 class 属性时 $1 在 Windows 下不生效
写 class="([^"]*)" 捕获值，想在替换框里用 class="button $1"，结果 Windows 用户看到的是字面量 $1，不是捕获内容——这是 Shell 环境变量解析干扰导致的。
解决方案统一用反斜杠转义：\$1，\$2，\$&。macOS 也兼容，不用分平台写两套。
更稳妥的写法是加单词边界和引号灵活性：class\s*=\s*(['"])([^'"]*)btn([^'"]*)，替换为 class=button，其中 自动匹配单/双引号类型，闭合安全。
- 别只写
btn → button：可能误改data-btn-id或注释里的<!-- old btn --> - 多行 class 值（含换行缩进）会让
[^"]*失效，这时正则已越过安全边界，该换cheerio或浏览器内DOMParser - 启用正则后务必点「预览」，看命中的是否全是目标位置，尤其注意 JS 模板字符串和 CDATA 区域
什么时候必须放弃编辑器，改用 DOM 解析器
当你发现「预览替换结果」里有 20 处命中，但只有 3 处该改——其余都在注释、JS 字符串、<script></script> 标签体、CDATA 或自闭合标签属性里，说明文本级替换已经失控。
cheerio（Node.js）和 BeautifulSoup（Python）天然跳过非结构区域；浏览器内可用 DOMParser + createNodeIterator 安全遍历文本节点，再手动改 node.textContent。
-
cheerio.load(html, { xmlMode: false })后用$('div[class*="old"]').attr('class', c => c.replace(/\bold\b/g, 'new'))，精准作用于属性 -
BeautifulSoup用soup.find_all(string=re.compile(r"\bold\b"))只扫纯文本节点，不进<script></script> - 浏览器中用
createNodeIterator必须分两步：先收集所有Text节点，再统一调node.textContent = ...，边遍历边改会跳过后续节点
Notepad++ 批量处理本地 HTML 文件的硬伤
它适合小批量、无嵌套逻辑、编码统一的静态文件，比如老式 CMS 导出的一堆 index_01.html～index_99.html。
但它的「全部打开的文档」模式没有语法感知：你搜 class="btn"，它不管这行是在 <p></p> 标签里，还是在 <script></script> 的 console.log('class="btn"') 字符串里，一并替换。
- 打开多个文件前，先确认它们编码一致（全 UTF-8 或全 GBK），否则部分文件显示乱码，替换结果不可控
- 替换后必须点「文件」→「全部保存」，否则只改了内存，磁盘文件没变
- 若 HTML 文件夹混着多种编码（ANSI / UTF-8 BOM / UTF-16 LE），VS Code 会卡死或乱码，此时 Notepad++ 也救不了——得用 Replace Studio 或命令行工具加
--encoding参数
复杂点在于：HTML 不是纯文本，它的语义边界藏在标签嵌套、属性引号、JS 字符串、注释和编码细节里。工具只是手段，判断「这里能不能用字符串替换」才是关键动作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
