如何利用 JavaScript 获取页面中的所有文本-js教程-PHP中文网

获取页面所有文本的核心是遍历dom树提取文本节点并过滤无关内容；推荐用innertext（最简）或手动遍历（高控），后者可跳过script/style、排除隐藏元素，并支持按块级元素保留段落结构。

要获取页面中的所有文本，核心是遍历 dom 树，提取所有文本节点的内容，并过滤掉空白、脚本、样式等无关内容。直接用 document.body.innertext 最简单，但灵活性低；若需精细控制（比如排除某些元素、保留换行逻辑、跳过隐藏内容），推荐用 dom 遍历方式。

使用 innerText（最简方案）

innerText 会自动忽略 <script></script>、<style></style>、注释和不可见元素（如 display: none 或 visibility: hidden），返回浏览器渲染后实际显示的文本，且自动处理换行和缩进。

示例：

const allText = document.body.innerText;

⚠️ 注意：innerText 是计算样式后的结果，受 CSS 影响；不同浏览器对换行的处理略有差异；不包含 alt、title 等属性值。

用 textContent 获取原始文本节点

textContent 返回所有文本节点的纯内容，包括被 CSS 隐藏的、<script></script> 和 <style></style> 中的内容，也不做格式压缩。

更安全的做法是手动遍历并过滤：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

只收集 nodeType === 3（文本节点）
跳过父节点为 script、style、comment 的文本节点
用 node.textContent.trim() 去除首尾空白，避免空行

示例代码：

function getAllText() {
  const texts = [];
  function walk(node) {
    if (node.nodeType === 3) {
      const text = node.textContent.trim();
      if (text) texts.push(text);
      return;
    }
    if (node.nodeType === 1) {
      if (['SCRIPT', 'STYLE', 'NOSCRIPT'].includes(node.tagName)) return;
    }
    for (let child of node.childNodes) {
      walk(child);
    }
  }
  walk(document.body);
  return texts.join(' ');
}

排除特定区域或按需筛选

如果想跳过页眉、侧边栏、广告位等区域，可先用 querySelectorAll 排除它们，再对剩余元素调用 innerText：

给不需要的区域加 class（如 no-text-extract），然后用 :not(.no-text-extract)
或显式排除常见容器：document.querySelectorAll('body > *:not(header):not(aside):not(nav)')
对每个匹配元素调用 el.innerText 并拼接

这样比全局遍历更可控，也更容易调试。

处理换行与段落结构

纯文本常需保留基本段落语义。可利用块级元素（如 <p></p>、<h1>–<h6></h6> </h1>、<div>）作为分隔符： <ul> <li>遍历所有块级元素，对每个调用 <code>textContent.trim()

非空结果用 \n 连接，模拟自然段落

避免重复换行：连续多个空行可合并为一个

示例片段：

const blocks = Array.from(
  document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, div[role="article"], article')
).map(el => el.textContent.trim()).filter(t => t);
const textWithLineBreaks = blocks.join('\n\n');