本文探讨为何不应依赖多层 replace 正则拼接清理 html 内容，并推荐使用标准、健壮的 domparser 方案提取纯文本，避免正则解析 html 带来的安全隐患与边界失效问题。
本文探讨为何不应依赖多层 replace 正则拼接清理 html 内容，并推荐使用标准、健壮的 domparser 方案提取纯文本，避免正则解析 html 带来的安全隐患与边界失效问题。
在前端开发中，常遇到从 HTML 属性（如 title）中提取纯文本的需求。初学者容易写出类似以下的“三连 replace”正则链：
const text = $('.text').attr('title');
const clean = text
.replace(/<(span|i)[^>]*>.*?<\/\1>/g, '')
.replace(/<img[^>]*>/g, '')
.replace(/<\/?div[^>]*>/g, '');这段代码看似简洁，实则存在严重缺陷：
- ✅ 能匹配简单嵌套（如 <i>text</i>），但无法处理 <i><span>nest</span></i> 或换行/注释等合法 HTML 变体；
- ❌ 无法识别自闭合标签（如 <img />）、CDATA 区域、HTML 实体（ ）、或属性中含 > 的情况（如 title="a>b"）；
- ⚠️ 正则贪婪/非贪婪行为易导致误删或截断，且维护成本高、可读性差。
更可靠、语义正确、且仅需一行核心逻辑的替代方案是：使用 DOMParser。
它将字符串作为 HTML 解析为真实 DOM 结构，再通过标准 API 提取文本内容，完全规避正则的脆弱性：
立即学习“前端免费学习笔记（深入）”；
const title = $('.text').attr('title');
const cleanText = new DOMParser()
.parseFromString(title, 'text/html')
.documentElement
.innerText;
console.log(cleanText); // "Lorem Ipsum"✅ 优势显著：
- 自动处理所有 HTML 规范（嵌套、转义、命名空间、DOCTYPE 等）；
- 安全隔离脚本执行（parseFromString 默认不执行 JS）；
- 无需记忆复杂正则语法，语义清晰（“解析 HTML → 取文本”）；
- 兼容性良好（Chrome 29+, Firefox 12+, Safari 7.1+, Edge 13+）。
⚠️ 注意事项：
- 若输入含非法 HTML（如未闭合标签），DOMParser 会按浏览器纠错规则自动修复，结果仍稳定；
- 不要对用户可控的 HTML 直接插入 innerHTML —— 本方案仅解析、不渲染，天然防 XSS；
- 如需保留部分标签（如仅移除 <div> 但保留 <b>），应操作 document.body 后遍历删除节点，而非退回到正则。
总结：永远不要用正则解析 HTML。一行 DOMParser + innerText 不仅更短、更安全、更可维护，更是符合 Web 标准的专业实践。
