使用 domparser 解析 html 字符串并提取 innertext，比串联多个正则 replace 更可靠、可维护，且能正确处理嵌套、属性、自闭合标签等边界情况。

使用 domparser 解析 html 字符串并提取 innertext，比串联多个正则 replace 更可靠、可维护，且能正确处理嵌套、属性、自闭合标签等边界情况。

在前端开发中，常需从 HTML 片段（如 title 属性值）中提取纯文本内容。初学者易倾向用正则表达式（如 .replace(/<div[^>]*>/g, '')）逐个移除标签，但这种方式存在严重缺陷：正则无法正确解析嵌套结构、忽略属性差异（如 <div class="x" onclick="...">）、难以覆盖自闭合标签（<img>）、且对不规范 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"
}

✅ 优势说明：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 自动处理所有 HTML 标签（<div>、<i>、<img>、<span>、<br> 等），无需手动枚举；
• 正确解析嵌套、属性、实体编码（如  ）、注释与 CDATA；
• 兼容性良好（现代浏览器及 IE10+ 支持）；
• 语义清晰，代码意图明确，便于后续维护。

⚠️ 注意事项：

立即学习“前端免费学习笔记（深入）”；

• DOMParser 解析的是完整文档结构，因此推荐取 doc.documentElement.innerText（兼容 <html> 包裹场景）；若确保无 <html> 外层，也可用 doc.body.innerText；
• 若输入为空字符串或非法 HTML，parseFromString 仍会返回有效 Document 对象，建议增加空值校验；
• 避免在循环中高频创建 DOMParser 实例（可复用），但单次解析无需优化。

总结：放弃“正则拼接”这类看似简洁实则高危的做法，拥抱标准 DOM API —— 它更安全、更准确、也更符合 Web 平台的设计哲学。