怎么在 HTML 渲染链路中利用 textContent 过滤所有标签以提取纯文本内容-html教程-PHP中文网

textcontent 能自动提取节点及所有后代的文本内容并过滤标签，无需递归遍历；它保留空白符、不执行脚本、可获取隐藏元素文本，但不解析 html 实体，赋值会清空子树而非过滤。

怎么在 html 渲染链路中利用 textcontent 过滤所有标签以提取纯文本内容

textContent 本身就能过滤所有标签，不需要额外递归或遍历

textContent 是浏览器原生行为，只要目标节点是 Element 或 Document，它就自动提取该节点及其所有后代中**所有文本节点的内容**，跳过 script、style、注释、CDATA 和所有标签。你不需要手动写 for 循环、也不用判断 nodeType。

常见错误是以为它只取直接子文本——比如对 <div><p>hello</p></div> 调用 div.textContent，结果发现有值，就误以为“得先找 p”，其实完全没必要。

它保留原始空白符（换行、缩进、多个空格）
它不执行脚本、不触发重排、不解析 HTML 实体（就是字面量）
它能拿到 display: none 或 visibility: hidden 元素里的文字，这点比 innerText 稳定得多
如果目标元素不存在，document.getElementById('xxx').textContent 会报 Cannot read property 'textContent' of null，务必先判空

从 HTML 字符串转纯文本：必须用 DOMParser + textContent

如果你手头是一段 HTML 字符串（比如 API 返回的富文本、邮件正文），不能直接对字符串调用 textContent——它只作用于 DOM 节点。

正确做法是先用 DOMParser 解析成文档对象，再取 body.textContent：

function htmlToText(html) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  return doc.body?.textContent || '';
}

这个方法能安全处理嵌套、自闭合、<script></script>、<style></style> 等内容，比正则可靠一个数量级。

Exa AI

Exa AI是一款AI图像与设计工具，专门为AI模型设计的搜索引擎平台。

下载

不用临时 div.innerHTML = html，避免意外执行内联脚本或污染当前 DOM
doc.body 可能为 null（比如传入空字符串或纯文本），所以要用可选链 ?.textContent
它仍不解析 HTML 实体；如需把 © 变成 ©，得额外走一次 textarea 中转或二次 DOMParser

赋值时用 textContent 会清空整个子树，不是“过滤”而是“重置”

很多人想“把某个 div 里的 HTML 标签去掉，只留文字”，然后写 el.textContent = el.innerHTML——这确实能显示纯文本，但副作用极强：

所有子元素被彻底移除，包括事件监听器、data- 属性、表单状态、Canvas 上下文等
内联样式、class、id 全部丢失
如果原结构里有 <input value="xxx">，赋值后它的当前值不会保留在 textContent 里（因为 value 是属性，不是文本节点）
这不是“过滤”，是“销毁重建”；真要保留结构只改内容，得用更细粒度操作（比如遍历文本节点替换）

需要转义 HTML 实体？textContent 不管这事，得另加一层

textContent 对、<、© 这类实体完全不做处理，原样输出字符串。如果你的原始 HTML 字符串里含大量实体，而你期望得到的是渲染后的语义文本（比如把当作空格、< 当作 ），就不能只靠 <code>textContent。

安全且兼容的做法是借道 textarea：

function decodeHtmlEntities(str) {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = str;
  return textarea.value;
}
// 再组合：decodeHtmlEntities(htmlToText(html))

注意：这个组合调用顺序不能反，必须先 htmlToText 再 decodeHtmlEntities，否则 textarea.innerHTML 会把原始 HTML 标签当语法解析，导致意料外的结构。

真正容易被忽略的点是：**textContent 的“纯文本”是 DOM 层面的纯，不是语义层面的纯**。它忠于 DOM 树结构，但不管 HTML 实体含义、CSS 渲染效果、用户是否真的能看到——这些都得靠你根据场景补足。