批量替换类名前必须确认css作用域安全，否则直接全局搜索替换class="btn"为class="button"会误改btn-primary等嵌入式文本，引发样式或js异常；需用正则\bbtn\b匹配独立类名，排除style/script/注释及模板语法，并验证css与js中相关引用是否同步更新。
批量替换类名前必须确认 CSS 作用域是否安全
直接全局搜索替换 class="btn" 为 class="button" 很危险——如果项目里有 class="btn-primary" 或 data-btn-action="submit"，一并被改掉就会出样式或 JS 行为异常。
真正安全的批量操作，得先区分「纯类名 token」和「嵌入式文本」：
- 用正则
\bbtn\b（带单词边界）匹配独立类名，避开btn-primary中的btn - 排除
<style></style>、<script></script>和注释块，避免误改 CSS 规则或 JS 字符串 - 检查是否有 Vue/React 模板语法，如
:class="['btn', isActive ? 'btn-active' : '']"，这类需手动核对
VS Code 里用正则 + 文件范围精准替换
VS Code 是最常用且可控的 HTML 批量编辑器，关键在开启正则模式并限定文件类型：
- 打开替换面板（
Ctrl+H/Cmd+H），点右侧.*图标启用正则 - 查找内容填：
\bbtn\b(?=(?:[^>]*?]*?>)*?(?![^（简化版可先用 <code>\s+class\s*=\s*["']([^"']*?)["']提取 class 属性再处理） - 替换为：
button（仅替换匹配到的btn，不碰属性值整体） - 点击右上角文件夹图标，选「在文件中查找」，输入
*.html或src/**/*.html限定范围
注意：不要勾选「跨文件夹」除非你明确要扫 node_modules；替换前务必点「全部替换」旁的预览箭头，逐个确认上下文。
命令行用 sed 或 perl 处理大量静态文件
当 HTML 文件超 50 个，图形界面效率低，终端更稳：
-
sed -i 's/\bbtn\b/button/g' *.html（macOS 需加空参数：sed -i '' 's/\bbtn\b/button/g' *.html） - 更安全的 Perl 方案（支持非贪婪和上下文）：
perl -i -pe 's{class\s*=\s*["\']([^"\']*)["\']}{my $c = $1; $c =~ s/\bbtn\b/button/g; "class=\"$c\""}ge' *.html - 执行前先用
grep -n '\bbtn\b' *.html | head -20抽样检查实际出现位置
警告：sed 不支持 `\b` 在部分旧版本中失效，优先用 perl 或 GNU sed -r；所有命令务必先备份目录（cp -r src src.bak）。
替换后必须验证 class 是否仍被 CSS/JS 正确识别
类名改了，但样式表和脚本未必同步更新，这是上线后白屏或交互失效的主因：
- 检查 CSS 文件里是否还有
.btn { }规则残留，特别是第三方库的本地覆盖样式 - 运行
grep -r '\.btn' src/ --include="*.css" --include="*.scss"确认样式层已清理 - 搜索 JS 中的
getElementsByClassName("btn")、querySelector(".btn")、$(".btn")，这些调用必须同步更新 - 浏览器里打开 DevTools，用
document.querySelectorAll(".button")看是否真命中元素，再看 computed 样式是否生效
最容易被忽略的是 CSS 自定义属性继承链或 BEM 命名中的修饰符（比如 btn--large 改成 button--large 后，父选择器 .btn 若未删，会导致样式叠加冲突）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
