如何使用HTML提取文本并组成数组-html教程-PHP中文网

最稳妥方式是用 document.queryselectorall 选中元素后，通过 array.from 转数组并映射 textcontent.trim() 提取纯文本；textcontent 比 innertext 更稳定，适用于多数场景。

如何使用html提取文本并组成数组

用 `document.querySelectorAll` 选中元素再提取文本内容

直接用 document.querySelectorAll 获取节点列表，再用 Array.from() 转成数组并映射出 textContent，是最常用也最稳妥的方式。它不依赖元素是否可见、是否含 HTML 标签，只取纯文本内容。

常见错误是误用 innerHTML——它会把标签当字符串带进来，或者遇到空元素时返回空字符串而非 null，导致数组里混入意外值。

document.querySelectorAll('p') 返回的是 NodeList，不是数组，不能直接调用 map
必须用 Array.from(nodeList, el => el.textContent.trim()) 或展开语法 [...nodeList].map(...)
加 trim() 很关键：避免换行、缩进、前后空格污染数据

处理 `innerText` 和 `textContent` 的差异

textContent 读取所有文本节点（包括 display: none 元素），innerText 只读取渲染后可见的文本，且会触发重排（性能略差）。多数场景该用 textContent——除非你明确需要跳过隐藏内容。

Article To Html

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

下载

例如：<div style="display:none">secret</div> <div>visible</div>，textContent 会拿到 "secretvisible"，而 innerText 只有 "visible"。

若页面有动态显示/隐藏逻辑，且你只想要用户实际看到的文本，才考虑 innerText
innerText 在某些旧版 Safari 中对换行处理不一致，textContent 更稳定
两者都自动合并连续空白符（多个空格/换行 → 单个空格），但 textContent 不受 CSS 影响

从非标准结构（如无 class/id 的嵌套 span）中提取

当目标文本分散在没有统一选择器的子元素里（比如一堆无 class 的 <span></span> 或 <a></a>），别硬写多层 querySelector，优先用树遍历方式。

一个轻量解法：选中父容器，用 childNodes 过滤出文本节点，再拼接或分组：

const container = document.querySelector('#list');
const texts = Array.from(container.childNodes)
  .filter(node => node.nodeType === Node.TEXT_NODE)
  .map(node => node.textContent.trim())
  .filter(text => text.length > 0);