本文介绍一种比串联多个正则表达式更可靠、更可维护的方式——使用 domparser 解析 html 字符串并提取 innertext，彻底避免正则处理标签带来的边界问题与安全隐患。
本文介绍一种比串联多个正则表达式更可靠、更可维护的方式——使用 domparser 解析 html 字符串并提取 innertext，彻底避免正则处理标签带来的边界问题与安全隐患。
在前端开发中，常需从 HTML 片段（如 title 属性值）中提取纯文本内容，移除
、、![]()
等标签。初学者容易尝试用链式 .replace() 配合多个正则表达式，例如：
![]()
const text = $('.text').attr('title');
const clean = text
.replace(/]*>.*?/g, '')
.replace(/@@##@@]*>/g, '')
.replace(/]*>/g, '');⚠️ 但这种方法存在严重缺陷：
- 正则无法正确处理嵌套、自闭合、属性含 >、注释或 CDATA 等复杂 HTML 结构；
- 标签大小写、空格、换行、属性顺序变化都可能导致匹配失败；
- 存在 XSS 风险（如
被误删却未清理事件属性）；
- 维护成本高，新增标签需追加 .replace()，逻辑分散且易出错。
✅ 推荐方案：使用原生 DOMParser 安全解析
DOMParser 是浏览器标准 API，能真正按 HTML 规范解析字符串，生成真实 DOM 结构，再通过 innerText（或 textContent）获取渲染后文本，语义准确、健壮性强：
function extractPlainText(htmlString) {
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');
return doc.documentElement.innerText || '';
}
// 使用示例
const titleHtml = $('.text').attr('title');
const plainText = extractPlainText(titleHtml);
console.log(plainText); // "Lorem Ipsum"
? 关键优势说明：
- ✅ 自动处理所有合法 HTML 变体（大小写、属性顺序、空格、自闭合标签等）；
- ✅ 完全忽略脚本、样式、事件处理器，天然防御 XSS；
- ✅ 支持嵌套结构（如 text→ 正确提取 "text"）；
- ✅ 无需维护正则规则，扩展性极佳（支持任意标签，无需修改代码）。
? 注意事项：
- DOMParser 在所有现代浏览器（包括 IE10+）中均受支持；
- 若需兼容极老环境（如 IE9），可降级为临时创建 div.innerHTML + textContent（但需确保 HTML 可信，避免执行脚本）；
- innerText 会遵循 CSS 可见性（如 display: none 元素内容不包含），若需获取所有文本节点（含隐藏内容），请改用 textContent。
总之，永远不要用正则解析 HTML —— 这是被无数实践验证的黄金准则。用 DOMParser 替代多层 replace()，不仅代码更简洁（一行核心逻辑），更让文本提取真正可靠、安全、可演进。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
