html废弃标签在多版本共存场景下无法被主流ast工具识别，因其被解析为“未知标签”而非标准节点，导致重构脚本失效；需结合正则匹配、条件构建及行为补偿策略进行精准替换。
HTML废弃标签在多版本共存场景下无法被AST工具识别
主流AST解析器（如parse5、htmlparser2、@babel/parser的HTML插件）默认不将<font></font>、<center></center>、<frame>等废弃标签纳入语义节点树——它们被当作“未知标签”或直接忽略，导致重构脚本找不到目标节点。浏览器渲染时这些标签仍能工作，但AST层面已无结构可依。
常见错误现象：document.querySelector('font')能取到元素，但用ast.find(node => node.tagName === 'FONT')返回空；Webpack的html-webpack-plugin在编译阶段对废弃标签不做警告，直到Lighthouse扫描才报出“使用过时标签”。
- Chrome DevTools 的 Elements 面板会把
<font color="red"></font>渲染成有效样式，但其outerHTML中 tagName 仍是小写font，而 AST 工具常按 HTML5 规范只建模标准元素 - 多版本共存指同一项目需兼容 IE11（支持
<marquee></marquee>）、旧版 Safari（依赖<blink></blink>模拟）和现代 Chromium，此时不能简单全局替换，得按User-Agent或构建目标条件处理 - 若用 PostHTML 插件做重构，必须显式启用
recognizeSelfClosing: true，否则<font></font>类自闭合写法会被截断
用正则+上下文锚点替代纯AST匹配
当AST不可靠时，Find in Path配合正则是更稳的选择，关键是要加位置约束，避免误伤注释或JS字符串里的标签文本。
推荐模式：<font>]*>([\s\S]*?)</font>，但必须勾选「Match case」和「In comments」关闭——否则<!-- <font> -->也会被命中。
- 匹配
<center></center>时，用<center>)[^>]*>([\s\S]*?)</center>，避免捕获<centered></centered>这种拼写变体 - 替换为
<div class="text-center">$1</div>后，要手动检查是否嵌套了<table>——老代码里<code><center><table>常见，而<code>text-center对表格无效，得补margin: 0 auto - 对
<frame>不能直接删，得先确认是否被window.framesJS 引用，否则删掉后frames[0].location会抛TypeError -
<u></u>在 Chrome 里默认带text-decoration: underline，但语义上它表示“非超链接的下划线”，替换成<span class="underline"></span>后，得在 CSS 里加.underline { text-decoration: underline; text-decoration-skip-ink: none; }，否则跳过字母 g、j 的下划线会难看 -
<strike></strike>被<del></del>替代后，del默认是红字+删除线，而strike只是删除线，需重置color: inherit - 含
<applet></applet>的老页面，即使已用<object></object>替换，也得补data-legacy-applet="true"供 JS 检测，因为有些初始化逻辑绑在document.applets集合上 - Vite 用户注意：
vite-plugin-html不支持模板参数透传，得用transformIndexHtml钩子读取process.env.TARGET，再用正则替换 - PostHTML 插件中，通过
options.target区分环境，对ie11目标只转换<frame>，跳过<font></font> - 最易忽略的是
<isindex>——它早已被移除，但某些 CMS 导出的 HTML 还残留，且没有对应现代语义标签，只能用<input type="search">加aria-label模拟，还得手动补form包裹
重构后样式与行为断裂的三个隐性坑
废弃标签自带默认样式和 DOM 行为，替换成<div>后这些隐性契约就断了，光改结构不够。<p><code><font size="3"></font>对应的是font-size: medium，不是16px；<marquee></marquee>的滚动逻辑无法用 CSS animation 完全复现，尤其停顿、方向切换。
多版本构建时如何动态注入重构策略
不能让一套重构规则跑所有环境。IE11 构建产物里保留<font></font>并加data-legacy标记，现代构建则彻底移除——这得靠构建时条件判断，而非运行时 UA 检测。
Webpack 示例：在html-webpack-plugin的templateParameters里传入isLegacy: process.env.TARGET === 'ie11'，模板中用<font><span class="font-legacy"></span></font>。
重构不是找完替换完就结束。废弃标签背后连着样式继承链、JS 选择器、无障碍属性缺失、甚至 SEO 权重衰减——每个<font></font>删掉前，得先查它是否被getElementsByClassName或querySelectorAll('[style*="color"]')间接依赖。
