HTML文本提取技巧：高效去标签方法

const text = $('.text').attr('title');
const clean = text
  .replace(/<(span|i)[^>]*>.*?<\/\1>/g, '')
  .replace(/<img[^>]*>/g, '')
  .replace(/<\/?div[^>]*>/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()，不仅代码更简洁（一行核心逻辑），更让文本提取真正可靠、安全、可演进。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~