HTML中被标记为obsolete或non-conforming的属性（如align、bgcolor、hspace等）属废弃属性，现代CSS已有替代方案，主流浏览器已忽略或仅兼容处理。
哪些属性算“废弃属性”要先明确
HTML 中没有官方定义的“废弃属性”清单，但浏览器厂商和规范（如 HTML Living Standard）已明确标记部分属性为 obsolete 或 non-conforming。常见被清理的目标包括：align、bgcolor、border（在 <img alt="HTML怎么用脚本批量清理废弃属性" > 外使用）、hspace、vspace、clear、valign、nowrap 等。这些属性在现代 CSS 中已有标准替代方案，且多数已被主流浏览器忽略或仅作向后兼容处理。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 不是所有旧属性都该删：比如
id、class、data-*永远有效；name在表单控件中虽被id/formControlName分流，但未废弃 - 浏览器控制台通常不报错，所以靠肉眼或手动检查极不可靠
- 建议以 WHATWG Obsolete features 页面为权威参考
用 Node.js + jsdom 批量扫描并移除废弃属性
本地批量处理 HTML 文件最稳的方式是用 Node.js 脚本解析 DOM 并操作。jsdom 提供浏览器级 DOM API，能准确识别元素、属性和上下文（例如 border 在 <table> 和 <code><img alt="HTML怎么用脚本批量清理废弃属性" > 中语义不同）。
const { JSDOM } = require('jsdom');
const fs = require('fs').promises;
<p>const OBSOLETE_ATTRS = new Set([
'align', 'bgcolor', 'hspace', 'vspace', 'clear', 'valign', 'nowrap',
'border' // 注意：只删非 img/table 的 border（见下条）
]);</p><p>async function cleanHtmlFile(path) {
const html = await fs.readFile(path, 'utf8');
const dom = new JSDOM(html, { includeNodeLocations: true });
const doc = dom.window.document;</p><p>for (const el of doc.querySelectorAll('*')) {
const attrsToRemove = [];
for (const attr of el.attributes) {
// 特殊处理：保留 <img border alt="HTML怎么用脚本批量清理废弃属性" >（历史用法，虽废弃但仍有渲染影响）
if (attr.name === 'border' && el.tagName === 'IMG') continue;
// 保留 <table border>（同理，仍被部分邮件客户端依赖）
if (attr.name === 'border' && el.tagName === 'TABLE') continue;
if (OBSOLETE_ATTRS.has(attr.name)) attrsToRemove.push(attr.name);
}
attrsToRemove.forEach(name => el.removeAttribute(name));
}</p><p>await fs.writeFile(path, dom.serialize(), 'utf8');
}</p>-
jsdom不处理内联样式或<style></style>，它只管 HTML 属性层 -
includeNodeLocations: true不是必须，但方便后续定位问题行号（如配合 lint 工具） - 直接调用
el.removeAttribute()比正则替换安全得多：避免误删属性值中的字符串（如class="align-center"）
用正则快速清理（仅限简单场景）
如果只有少量文件、无复杂嵌套或模板语法（如 Handlebars、Vue 单文件组件），可用正则临时救急：
-
匹配并删除孤立废弃属性（不带等号和引号）：
align\s<em>=\s</em>["'][^"']*["']→ 替换为空立即学习“前端免费学习笔记（深入）”；
更稳妥的写法（避免破坏注释或 JS 字符串）：
(?=\s["'][^"']*<a href="https://www.php.cn/link/c225873006fb2679019ea8b81e9bd278">"'</a>切记：正则无法判断上下文，
border="0"在<img alt="HTML怎么用脚本批量清理废弃属性" >中删了可能导致旧邮件客户端显示边框，务必先测试正则适合 grep 查找：
grep -rE '\b(align|bgcolor|valign)\s*=' src/不要用正则处理含
{{mustache}}或v-bind:的文件，极易误伤
清理后必须验证的三个地方
脚本跑完不等于万事大吉。废弃属性往往和过时的 CSS 或 JS 行为耦合，删掉后可能表面正常、实则断裂：
邮件模板：Outlook（尤其是 Windows 版）仍严重依赖
border、cellspacing、align，删了表格可能错位第三方组件初始化逻辑：有些老 jQuery 插件通过
$(el).attr('align')读取配置，删属性会导致 JS 报Cannot read property 'align' of undefined无障碍（a11y）退化：比如用
align="center"替代text-align: center，删了又没补 CSS，视觉居中就没了推荐用 Puppeteer 启动真实浏览器快照比对清理前后渲染差异
对关键页面，加一行
document.querySelectorAll('[align], [bgcolor], [valign]').length控制台检查是否真清零
真正麻烦的不是删属性，而是确认哪些地方删了会触发隐藏副作用——尤其当项目混着 10 年前的遗留代码和现代构建流程时。
