本文介绍为何不应使用多层正则替换清理 html 标签，推荐使用 domparser 解析并提取 innertext 的健壮方案，兼顾安全性、可维护性与浏览器兼容性。
本文介绍为何不应使用多层正则替换清理 html 标签，推荐使用 domparser 解析并提取 innertext 的健壮方案，兼顾安全性、可维护性与浏览器兼容性。
在前端开发中，常需从 HTML 属性（如 title）中提取“无标签的纯文本”。初学者易倾向用链式 .replace() 配合多个正则表达式移除 <div>、<i>、<img> 等标签，例如：
const text = $('.text').attr('title');
const clean = text
.replace(/<(span|i)[^>]*>.*?<\/\1>/g, '')
.replace(/<img[^>]*>/g, '')
.replace(/<\/?div[^>]*>/g, '');⚠️ 但这种写法存在严重隐患：
- 正则无法正确处理嵌套、自闭合、属性含 >、注释或 CDATA 等边界情况；
- <i> 标签若未闭合（如 <i class="fa">），正则会误删后续内容；
- <img src="a>b.png"> 中的 > 会提前终止匹配，导致解析失败；
- 维护成本高，新增标签需追加 .replace()，逻辑脆弱且不可扩展。
✅ 更优解：交由浏览器原生 HTML 解析器处理
使用 DOMParser 将字符串安全解析为 DOM 文档，再通过 innerText（或 textContent）获取渲染后文本——这正是浏览器处理 HTML 的标准方式，天然支持所有合法语法、编码与嵌套结构。
完整示例代码：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
// 获取 title 属性值
const titleAttr = $('.text').attr('title');
// 使用 DOMParser 安全解析 HTML 字符串
const parser = new DOMParser();
const doc = parser.parseFromString(titleAttr, 'text/html');
// 提取纯文本（自动忽略所有标签、脚本、样式，保留换行与空格语义）
const plainText = doc.documentElement.innerText || doc.body?.innerText || '';
console.log(plainText); // 输出："Lorem Ipsum"? 关键说明：
立即学习“前端免费学习笔记（深入）”；
- parseFromString(..., 'text/html') 告知解析器按 HTML 规范处理，能正确识别自闭合标签（如 <img>）、实体编码（如 ）及嵌套结构；
- 优先取 doc.documentElement.innerText（兼容 <html> 包裹场景），回退到 doc.body.innerText 更稳妥；
- innerText 会按实际渲染效果返回文本（如隐藏元素不包含），若需严格原始结构文本，可用 textContent（但对 title 属性通常 innerText 更符合语义预期）；
- DOMParser 在现代浏览器中已广泛支持（Chrome 29+、Firefox 12+、Edge 10+、Safari 7.1+），无需额外依赖。
? 总结：
永远避免用正则“解析”HTML——这不是正则的设计目标。将 HTML 字符串交给 DOMParser，让浏览器做它最擅长的事，既简洁、可靠，又面向未来。对于 jQuery 项目，该方案无缝集成，且显著提升代码鲁棒性与可读性。
