应分层迁移：先用正则提取<script>和<style>内容存为独立文件；将onclick等内联事件替换为data-action属性，由外部JS统一绑定；对style属性仅保留关键布局声明，其余转为语义化class。
老旧HTML里混着JS/CSS，怎么安全剥离？
直接删掉内联脚本和样式是高危操作——很多老页面的交互逻辑依赖 onclick、onload 这类属性，或靠 style 属性动态控制显隐。硬切会直接让功能失效。
真正可行的做法是分层迁移：
- 先用正则匹配所有
<script>...</script>和<style>...</style>块，提取内容并保存为独立文件（如legacy-interactions.js） - 把内联事件属性（如
onclick="doSubmit()"）批量替换为 data 属性（如data-action="submit"），再由新 JS 统一绑定 - 对
style属性做最小化提取：只保留影响布局的关键声明（如display、float），其余转成 class 类名映射到外部 CSS
div 嵌套过深、class 名语义混乱，如何批量重写？
靠人工逐个改 class="box-wrapper-inner-left" 这种命名，效率低且易漏。需要用 DOM 分析+规则引擎驱动重构。
推荐用 cheerio 搭配自定义规则：
立即学习“前端免费学习笔记（深入）”；
- 识别连续三层以上
<div>嵌套，且无语义标签包裹 → 插入<section>或<article>替代最外层 - 扫描高频 class 名（如
clear、float-left、hidden）→ 映射为现代语义类（clearfix、text-start、visually-hidden） - 对空
<div>且带 class 的节点，先检查是否被 JS 选中（搜索document.querySelector(".xxx")），再决定保留或删除
自动化替换后，怎么验证没破坏原有行为？
光看 HTML 结构变“干净”没用，关键得确认功能还在。不能只跑 W3C 验证器，那只能查语法，不查逻辑。
必须叠加行为验证：
- 用
puppeteer录制老页面关键操作路径（如点击按钮 → 弹窗出现 → 表单提交），生成 baseline 脚本 - 替换后在同一环境重放脚本，比对 DOM 快照、network 请求列表、console.error 日志是否一致
- 特别注意第三方组件（如旧版 jQuery UI、swfobject）生成的标签，它们常绕过标准解析流程，需单独加白名单规则
为什么有些替换在本地跑通，上线就出问题？
因为老旧页面往往依赖全局变量、隐式执行顺序、甚至 document.write，而自动化工具默认按现代模块化假设运行。
最容易被忽略的三点：
-
document.write()在页面加载完成后调用会清空整个文档 —— 替换时若未检测并拦截，会导致空白页 - 某些 JS 依赖
window.onload触发时机，但新结构可能提前触发 DOMContentLoaded → 需统一改为事件委托或延迟初始化 - CDN 加载的库（如旧版 jQuery 1.x）与新 HTML 结构存在兼容性问题（例如
$("div:first")在 fragment 解析下行为不同）→ 必须锁定对应版本并隔离执行上下文
