本文介绍如何在导出 Excel（.xls）前，通过原生 JavaScript 精准移除页面中所有 id 属性值以 "id-" 开头的 DOM 元素，避免污染导出内容，同时保留结构和非目标节点。
本文介绍如何在导出 excel（.xls）前，通过原生 javascript 精准移除页面中所有 `id` 属性值以 "id-" 开头的 dom 元素，避免污染导出内容，同时保留结构和非目标节点。
在 Web 表格导出场景中（如使用 SheetJS 或 table2excel 等库），常需清理 HTML 源码中的干扰元素（例如带 id="id-1" 的 <input>），确保导出的 .xls 文件仅包含纯展示性内容（如 <p> 文本），而非交互控件。不能依赖字符串 replace() 处理 HTML 字符串——这极易破坏 DOM 结构、遗漏闭合标签、引发 XSS 风险，且无法正确处理嵌套或属性含引号的边界情况。
✅ 正确做法是：操作真实 DOM 节点，利用现代浏览器原生 API 精准定位并移除目标元素：
// 选择所有 id 属性值以 "id-" 开头的元素（注意：不是以 "id" 字母开头，而是完整匹配前缀）
const elementsToRemove = document.querySelectorAll('[id^="id-"]');
// 批量移除（兼容性好，比 innerHTML 重写更安全）
elementsToRemove.forEach(el => el.remove());⚠️ 注意事项：
- [id^="id-"] 使用 CSS 属性选择器 ^= 表示“以…开头”，确保只匹配 id="id-1"、id="id-abc" 等，不会误删 id="identifier" 或 id="my-id"；
- 若需移除所有含 id 属性的元素（无论值为何），请改用 [id]；
- element.remove() 是标准 DOM 方法（IE 不支持，如需兼容 IE，可用 el.parentNode.removeChild(el)）；
- 务必在导出前执行移除操作，并在导出完成后（如需还原界面）考虑备份节点或使用 cloneNode(true) 预先复制原始 DOM。
执行后，原始 HTML 将从：
立即学习“Java免费学习笔记（深入）”；
<td> <input id="id-1" value="111"><br> <p>111</p> <input id="id-2" value="222"><br> <p>222</p> </td>
变为：
<td> <br> <p>111</p> <br> <p>222</p> </td>
完美满足导出精简表格的需求。该方案语义清晰、性能高效、零依赖，是 DOM 清理的最佳实践。
