不能用正则全局替换 标签，因其易跨标签匹配破坏结构、丢失关键视觉样式、忽略动态插入节点；应通过 DOM 遍历迁移属性后移除，或用 cheerio 服务端安全清洗。
<font></font> 标签在现代 HTML 中早已被废弃，批量删除它不是“清理冗余”，而是避免语义污染和样式不可控——直接用正则或 DOM 操作硬删，容易连带干掉内联 color、size 等关键视觉信息，尤其当它包裹着 <span></span> 或嵌套在 <td> 里时。<h3>为什么不能用正则全局替换 <code><font.></font.>？
看似省事，但实际会踩三个坑：
- 匹配到
<font face="arial">文本</font>没问题，但遇到<font color="#333"><b>加粗</b></font>时，正则可能跨标签吞掉<b></b>，破坏结构 - 某些 CMS 导出的 HTML 里，
<font></font>是唯一携带颜色/字号的载体，删完就变黑体 16px，设计稿全崩 - 若页面已用 JS 动态插入
<font></font>（比如富文本编辑器回显），正则只处理初始 HTML，后续节点仍存在
安全批量移除：用 DOM 遍历 + 属性迁移
核心思路是不删标签本身，而是把它的样式属性“升权”到父元素或子元素，再移除空壳 <font></font>。适用于已加载完成的页面或服务端预处理：
示例代码（浏览器环境）：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('font').forEach(font => {
const { color, size, face } = font;
const parent = font.parentNode;
if (!parent) return;
<p>// 把 color 提升为父级 style，避免影响子元素继承
if (color) parent.style.color = color;</p><p>// size 转成 em（旧 size=3 ≈ 1em，需按比例映射）
if (size && !isNaN(size)) {
const sizes = ['xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large'];
const idx = Math.max(0, Math.min(6, parseInt(size) - 1));
parent.style.fontSize = sizes[idx];
}</p><p>// face 转 font-family，注意引号包裹
if (face) parent.style.fontFamily = <code>"${face}", sans-serif</code>;</p><p>// 替换节点：用 childNodes 而非 innerHTML，保留事件绑定和 data-* 属性
while (font.firstChild) {
parent.insertBefore(font.firstChild, font);
}
font.remove();
});服务端批量处理：用 cheerio（Node.js）更稳
比浏览器 DOM 更适合批量清洗存量 HTML 文件，且能规避运行时环境限制：
- 安装：
npm install cheerio - 关键逻辑：遍历
<font></font>，读取属性 → 写入父节点style→ 替换子节点 → 删除自身 - 注意
cheerio.load(html, { xmlMode: false })必须关掉xmlMode，否则自闭合标签（如<font></font>）解析失败 - 对含 CDATA 或注释的 HTML，建议先用
htmlparser2做预清洗，cheerio 对非法嵌套容忍度低
删完还得检查这三处
批量操作后，以下地方最容易出问题，必须人工 spot-check：
<table> 内的 <code><font></font>：常用于控制单元格文字颜色，删完可能导致整列变色异常- 富文本区域（如
contenteditable容器）：有些编辑器用<font></font>存储临时格式，删掉后光标定位错乱 - CSS 选择器里写了
font { color: red; }：虽然语义废弃，但若项目 CSS 还有残留规则，删标签后该样式失效，反而暴露隐藏 bug
真正麻烦的从来不是删标签，而是删完之后谁来承接它的表现职责——字体、颜色、大小这些信息一旦丢失，就没有后悔键。
