不能直接用正则替换深层嵌套的div，因正则无法处理html语义、嵌套层级和语法变体；应使用parse5解析为ast，结合语义规则遍历替换，并校验合法性与可访问性。
为什么不能直接用正则替换深层嵌套的 div
正则处理 HTML 是高危操作，尤其面对换行、空格、属性顺序不固定、自闭合标签等变体时，div class="card"><div class="body">...</div> 和 div\n class="card"\n><div class="body">\n ...</div> 在语义上完全等价，但正则极易漏匹配或误删。更严重的是，正则无法识别嵌套层级是否合法——比如把 <main></main> 套进 <section></section> 里，浏览器不报错，但会破坏无障碍树和 SEO 权重。
用 parse5 + 自定义遍历脚本替代手写正则
真正可控的重构必须基于真实 HTML AST，而非字符串。parse5 是目前最轻量、最符合 HTML5 规范的解析器，Node.js 环境下几行就能跑起来：
const parse5 = require('parse5');
const document = parse5.parse(htmlString);
// 从 document.documentElement 开始递归遍历
function walk(node, depth = 0) {
if (node.nodeName === 'div' && node.attrs?.some(a => a.name === 'class')) {
const cls = node.attrs.find(a => a.name === 'class')?.value || '';
if (/card|wrap|container|inner/i.test(cls)) {
// 这里触发语义化替换逻辑
replaceWithSemanticTag(node, cls);
}
}
node.childNodes?.forEach(child => walk(child, depth + 1));
}
- 避免用 cheerio —— 它默认启用 XML 模式，对不规范 HTML（如缺失闭合标签）容错差，容易丢节点
- 不要在遍历中直接修改
node.parentNode，parse5 的节点是不可变结构，需用parse5.serialize()重建整个文档 - 深度超过 4 层时，优先检查是否真需要保留该层：若子元素数 > 50 或仅含样式类（无 id、data-*、事件绑定），直接标记为“可扁平化”
替换语义标签前必须校验嵌套合法性
硬替会导致语义断裂。例如：
-
<main></main>只能是或<article></article>的直系子元素，绝不能出现在<section></section>内部 -
<nav></nav>必须包裹主导航链接组；面包屑、分页、文章内锚点不属于它 -
<header></header>和<footer></footer>若出现在<article></article>内，表示该文稿自身的头尾，不是整页的头尾
建议在脚本中加入校验规则：
function isValidParentForMain(node) {
return node.parentNode?.nodeName === 'body' ||
node.parentNode?.nodeName === 'article';
}
重构后必须验证三件事，缺一不可
自动化脚本跑完只是开始，真正落地要看效果：
- 关闭所有 CSS，在浏览器里纯 HTML 打开，确认内容仍按视觉流顺序可读
- 用 Chrome DevTools → Lighthouse → Accessibility 审计，重点盯
heading-levels、landmark-roles、logical-tab-order三项是否全绿 - 运行
document.querySelectorAll("*").forEach(el => console.log(el.tagName, el.children.length))，扫出子元素超 50 的容器节点，它们大概率是后续要拆分或懒加载的目标
深层结构重构最难的从来不是怎么替换，而是判断“哪一层该留、哪一层该压、哪一层根本就是历史包袱”。脚本只能执行规则，但规则本身得靠对语义边界的理解来写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
