本文介绍为何不应使用多层正则替换清理 html 标签，推荐使用 domparser 解析并提取 innertext 的健壮方案，兼顾安全性、可维护性与浏览器兼容性。
本文介绍为何不应使用多层正则替换清理 html 标签，推荐使用 domparser 解析并提取 innertext 的健壮方案，兼顾安全性、可维护性与浏览器兼容性。
在前端开发中，常需从 HTML 属性（如 title）中提取“无标签的纯文本”。初学者易倾向用链式 .replace() 配合多个正则表达式移除
、、![]()
等标签，例如：
const text = $('.text').attr('title');
const clean = text
.replace(/]*>.*?/g, '')
.replace(/@@##@@]*>/g, '')
.replace(/]*>/g, '');⚠️ 但这种写法存在严重隐患：
- 正则无法正确处理嵌套、自闭合、属性含 >、注释或 CDATA 等边界情况；
- 标签若未闭合（如 ），正则会误删后续内容；
-
b.png"> 中的 > 会提前终止匹配，导致解析失败；
- 维护成本高，新增标签需追加 .replace()，逻辑脆弱且不可扩展。
✅ 更优解：交由浏览器原生 HTML 解析器处理
使用 DOMParser 将字符串安全解析为 DOM 文档，再通过 innerText（或 textContent）获取渲染后文本——这正是浏览器处理 HTML 的标准方式，天然支持所有合法语法、编码与嵌套结构。
完整示例代码：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
// 获取 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 规范处理，能正确识别自闭合标签（如
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
