本文介绍为何应避免用正则表达式清洗 html 标签，推荐使用原生 domparser 解析并提取 innertext，实现健壮、可维护的纯文本提取方案。
本文介绍为何应避免用正则表达式清洗 html 标签，推荐使用原生 domparser 解析并提取 innertext，实现健壮、可维护的纯文本提取方案。
在前端开发中，常需从 HTML 字符串（如 title 属性值）中提取纯文本内容，剔除 <div>、<i>、<img> 等标签。许多开发者会尝试将多个 .replace() 链式调用“合并为一行”，例如：
text.replace(/<(span|i)[^>]*>.*?<\/\1>/g, '')
.replace(/<img[^>]*>/g, '')
.replace(/<\/?div[^>]*>/g, '');⚠️ 但这种方法存在严重缺陷：
- 正则无法正确处理嵌套、自闭合、属性含 >、注释或 CDATA 等边界情况；
- <i> 与 </i> 之间若含换行或复杂结构，.*? 可能跨标签匹配失败；
- <div class="a>b"> 中的 > 会提前截断匹配，导致解析错误；
- 维护成本高，且无法覆盖未来新增的标签或变体。
✅ 更优解：使用 DOMParser 进行真实 HTML 解析
DOMParser 是浏览器原生 API，能按标准 HTML 规范解析字符串为 DOM 文档，再通过 innerText（或 textContent）安全获取渲染后文本——它天然忽略所有标签、脚本、样式，仅保留用户可见内容，语义准确、鲁棒性强。
以下为完整实践示例：
立即学习“前端免费学习笔记（深入）”；
// 获取 title 属性值
const titleAttr = $('.text').attr('title');
// 使用 DOMParser 解析 HTML 字符串
const parser = new DOMParser();
const doc = parser.parseFromString(titleAttr, 'text/html');
// 提取纯文本（等价于浏览器渲染后看到的文字）
const cleanText = doc.documentElement.innerText;
console.log(cleanText); // 输出："Lorem Ipsum"? 关键说明：
- parseFromString(..., 'text/html') 确保以 HTML 模式解析（非 XML），兼容常见 HTML 语法；
- doc.documentElement.innerText 获取 <html> 下整个文档的可视文本（等效于 doc.body?.innerText || doc.documentElement.textContent）；
- 若需兼容旧版 IE（已不推荐），可降级为 textContent，但 innerText 更贴近用户实际阅读效果（会忽略 display: none 元素）；
- 此方案自动处理嵌套、属性转义、实体编码（如 ）、空格折叠等，无需手动维护正则逻辑。
? 总结：
不要用正则“修补” HTML —— 它不是正则设计的场景。用 DOMParser + innerText 是语义正确、浏览器原生支持、零依赖、一次写对的工业级方案。尤其在处理动态、不可信或结构多变的 HTML 片段时，这是唯一值得信赖的选择。
