多光标替换最轻量可控，适用于无嵌套、不跨行、无属性换行的标签；正则替换需满足单行、引号统一、无嵌套前提；dom操作最安全但需现代浏览器支持；批量文件处理推荐cheerio脚本。
用编辑器多光标快速改单个标签名（如把 全换成 ）
只要标签不嵌套、不跨行、没属性换行，多光标是最轻量、最可控的方式。它不依赖解析器，也不怕正则误伤。
操作步骤很直接：
- 用
Ctrl + F（Win/Linux）或 Cmd + F（Mac）搜索 <div>，勾选“全词匹配”和“区分大小写”
<li>点“全部选中”或反复按 <code>Ctrl + D 逐个加选
- 所有开标签光标就位后，直接输入
<section></section>
- 再搜
，同样操作替成
只要标签不嵌套、不跨行、没属性换行，多光标是最轻量、最可控的方式。它不依赖解析器，也不怕正则误伤。
操作步骤很直接：
- 用
Ctrl + F（Win/Linux）或Cmd + F（Mac）搜索<div>，勾选“全词匹配”和“区分大小写” <li>点“全部选中”或反复按 <code>Ctrl + D逐个加选 - 所有开标签光标就位后，直接输入
<section></section> - 再搜
注意：如果 div 带属性（比如 <div class="card">），别只搜 <code><div>——得搜 <code><div>（<code>\b 表示单词边界），否则会误中 <dividend></dividend> 这类词。
用正则替换带属性的标签（如统一改 <span class="label"></span> 为 <em></em>）
正则能处理简单属性，但必须满足三个前提：标签单行书写、引号统一（都用双引号或都用单引号）、无嵌套内容。否则立刻放弃，改用 DOM 方式。
安全写法示例（VS Code / Sublime）：
- 开启正则模式（
.*按钮） - 查找：
<span>]*)?>([^</span> - 替换：
<em>$1</em> - 确认“点号不匹配换行符”（即不勾选
.匹配\n）
关键点：(?:\s+[^>]*)? 能跳过 class 后可能存在的其他属性（如 id 或 data-），又不会吞掉闭合角括号；$1 确保原文本内容不丢。别用 .* 替代 [^——前者在含 HTML 实体（如 <code> ）时极易截断失败。
浏览器里用 querySelectorAll 批量改已有 DOM 标签
这是真正安全、可验证的批量修改方式，适合改完立即看效果的场景，比如本地调试或 CMS 前端预览页。
核心是两步：精准选中 + 统一替换结构。
- 先运行：
const spans = document.querySelectorAll('span.label'); - 再遍历并替换：
spans.forEach(s => { const em = document.createElement('em'); em.textContent = s.textContent; s.replaceWith(em); });
注意：replaceWith() 是现代 API（Chrome 54+/Firefox 49+），IE 不支持；若需兼容旧环境，改用 s.parentNode.insertBefore(em, s); s.remove();。别用 innerHTML 直接拼字符串——会丢失事件监听器、破坏表单状态，且有 XSS 风险。
处理大量文件时，别手改，用 cheerio 脚本
当要改整个 /src/pages/ 下几十个 HTML 文件，手动开编辑器不现实。Node.js + cheerio 是平衡开发成本与安全性的最优解。
最小可用脚本（保存为 rename-tags.js）：
const fs = require('fs').promises;
const cheerio = require('cheerio');
async function renameTags(html) {
const $ = cheerio.load(html, { xmlMode: false });
$('span.label').replaceWith((i, el) => `<em>${$(el).html()}</em>`);
return $.html();
}
async function main() {
const html = await fs.readFile('input.html', 'utf8');
const result = await renameTags(html);
await fs.writeFile('output.html', result);
}
main();
容易被忽略的细节：cheerio.load() 默认会重排属性顺序、折叠空白；如果你的构建流程依赖原始格式（比如某些静态站点生成器对空格敏感），就得用 $.root().toString() 替代 $.html()，并搭配 xmlMode: true 控制解析行为。
