最直接兼容的方式是用 document.queryselectorall('p') 获取所有 p 标签，再通过 map(p => p.textcontent.trim()) 提取干净文本；动态内容需定位容器后扩展选择器，字符串 html 需用 jsdom 或 parse5 解析，中文视觉段落需文本分析补充。
用 querySelectorAll 选中所有 p 标签再取 textContent
这是最直接、兼容性最好的方式，适用于静态 HTML 或已加载完成的 DOM。浏览器原生支持，不需要额外库。
注意：textContent 会保留所有空白（包括换行和缩进），但不包含 HTML 标签；如果需要去除多余空白，得手动 .trim() 或正则清理。
常见错误是误用 innerHTML——它返回带标签的字符串，不是纯文本。
- 用
document.querySelectorAll('p')获取 NodeList - 用
Array.from(...).map(p => p.textContent.trim())转成干净文本数组 - 若 HTML 来自字符串（非当前页面），需先用
DOMParser解析，不能直接querySelectorAll
处理动态渲染或富文本中的嵌套段落
有些 CMS 或编辑器（如 TinyMCE、Quill）会把段落包裹在 div 或 article 里，甚至用 br 模拟换行，此时单纯选 p 会漏内容。
更稳妥的做法是：先定位内容容器（比如 class="content"），再在其范围内查找语义化段落元素，同时 fallback 到 div[role="paragraph"] 或带 line-height/margin-bottom 的块级元素（需结合 CSS 计算，不推荐自动化）。
- 优先查
p、div[data-type="paragraph"]、section（视业务约定而定） - 避免用
div:not([class])这类泛选择器——太容易匹配到导航、侧栏等无关区块 - 若内容含
iframe或 Shadow DOM，需单独调用其内部contentDocument或shadowRoot
从字符串 HTML 中提取（服务端或 Node.js 场景）
在 Node.js 或 Deno 中无法使用 document，得靠解析器。推荐 jsdom（模拟完整 DOM）或轻量级的 parse5 + css-select。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
jsdom 写法接近浏览器，但启动开销大；parse5 更快，但 API 是回调式或 Promise 风格，需手动遍历节点树。
- 用
jsdom：创建new JSDOM(htmlStr)后调用dom.window.document.querySelectorAll('p') - 用
parse5：解析后用select('p', document)（需配合css-select） - 别用正则匹配
<p>.*?</p>——嵌套、自闭合、注释、CDATA 都会导致错乱
中文段落常被忽略的边界情况
中文内容里，段落可能没用 p，而是靠两个连续 br、hr，或纯空行分隔。这类“视觉段落”无法靠 CSS 选择器捕获，必须走文本分析逻辑。
例如：提取后对文本做 .split(/\n\s*\n/)，再逐段 .trim() 去首尾空白。但要注意，这会破坏原文中的缩进排版（如诗歌、代码说明），且无法区分标题与正文。
- 若原始 HTML 有
br换行但无段落标签，textContent本身已含换行符，可按\n切分 - 遇到
<p><span>第一句</span><span>第二句</span></p>，textContent仍是一整段，无需额外合并 - 某些站点用
display: contents移除p的盒模型，但不影响querySelectorAll('p')匹配
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
