使用 domparser 解析 html 字符串并提取 innertext，比串联多个正则 replace 更可靠、可维护，且能正确处理嵌套、属性、自闭合标签等边界情况。
使用 domparser 解析 html 字符串并提取 innertext，比串联多个正则 replace 更可靠、可维护，且能正确处理嵌套、属性、自闭合标签等边界情况。
在前端开发中，常需从 HTML 片段（如 title 属性值）中提取纯文本内容。初学者易倾向用正则表达式（如 .replace(/
]*>/g, '')）逐个移除标签，但这种方式存在严重缺陷：正则无法正确解析嵌套结构、忽略属性差异（如
）、难以覆盖自闭合标签（![]()
）、且对不规范 HTML 极其脆弱。
更专业、健壮的解决方案是交由浏览器原生 HTML 解析器处理——即使用 DOMParser：
const titleHtml = $('.text').attr('title');
if (titleHtml) {
const parser = new DOMParser();
const doc = parser.parseFromString(titleHtml, 'text/html');
const plainText = doc.documentElement.innerText || doc.body?.innerText || '';
console.log(plainText); // 输出："Lorem Ipsum"
}
✅ 优势说明：
- 自动处理所有 HTML 标签（、、
、、
等），无需手动枚举；- 正确解析嵌套、属性、实体编码（如 ）、注释与 CDATA；
- 兼容性良好（现代浏览器及 IE10+ 支持）；
- 语义清晰，代码意图明确，便于后续维护。
⚠️ 注意事项：
- DOMParser 解析的是完整文档结构，因此推荐取 doc.documentElement.innerText（兼容 包裹场景）；若确保无 外层，也可用 doc.body.innerText；
- 若输入为空字符串或非法 HTML，parseFromString 仍会返回有效 Document 对象，建议增加空值校验；
- 避免在循环中高频创建 DOMParser 实例（可复用），但单次解析无需优化。
总结：放弃“正则拼接”这类看似简洁实则高危的做法，拥抱标准 DOM API —— 它更安全、更准确、也更符合 Web 平台的设计哲学。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
