本文详解如何在 Puppeteer 中通过 $$eval 和选择器定位，安全、高效地获取特定 容器（如带类名的卡片）内部全部 元素的文本内容，并结构化提取关键字段（如属性标签+值、评论正文等）。 本文详解如何在 Puppeteer 中通过 `$$eval` 和选择器定位，安全、高效地获取特定 `` 容器（如带类名的卡片）内部全部 `` 元素的文本内容，并结构化提取关键字段（如属性标签+值、评论正文等）。在 Web 自动化与数据抓取场景中，常需从结构化 HTML 片段（如商品评价卡片）中精准提取嵌套 标签的内容。直接使用 page.evaluate() 配合错误的选择器或作用域容易导致 null 异常或范围越界——例如将 page.evaluate('div > p', ...) 误写为字符串形式传入，或未正确限定查询上下文。正确做法是：利用 page.$$eval(selector, callback) 在浏览器上下文中批量处理匹配的容器元素，并在每个容器内使用 querySelectorAll 或 querySelector 进行局部 DOM 遍历。这既避免了跨上下文传递 DOM 节点的限制，又保证了作用域隔离。以下是一个完整、健壮的 Puppeteer 示例，针对你提供的 .c-product-review-card 容器结构：const data = await page.$$eval(".c-product-review-card", (els) => els.map((el) => { // 辅助函数：安全提取单个子元素文本（自动清理多余空白和换行） const text = (selector) => { const node = el.querySelector(selector); return node ? node.textContent.replace(/\s+/g, " ").trim() : ""; }; // 提取用户名 const name = text(".c-product-review-user-info__username"); // 提取多组属性项（每个 .c-product-review-user-info__item 下的 ） const infoItems = [...el.querySelectorAll(".c-product-review-user-info__item")].map((itemEl) => Object.fromEntries( [...itemEl.querySelectorAll("p")].map((pEl) => { const labelSpan = pEl.querySelector("span"); const label = labelSpan ? labelSpan.textContent.trim().replace(/\s+/g, " ").replace(/:$/, "") : "Unknown"; // 获取 后的纯文本节点（跳过标签和空格） const valueNode = Array.from(pEl.childNodes).find( (n) => n.nodeType === Node.TEXT_NODE && n.textContent.trim() ); const value = valueNode ? valueNode.textContent.trim() : ""; return [label, value]; }) ) ); // 提取评论标题与正文 const reviewTitle = text(".c-product-review-card__review-title"); const reviewBody = text(".c-product-review-card__review-body p"); return { name, infoItems, reviewTitle, reviewBody }; }) );✅ 关键要点说明： $$eval 的第一个参数是全局 CSS 选择器（如 ".c-product-review-card"），第二个参数是在页面上下文中执行的函数，其 els 是匹配到的 DOM 元素数组； 每个 el 是独立的容器节点，所有 querySelector/querySelectorAll 均以其为根，天然实现“容器内限定范围”； 使用 Array.from(nodeList) 或展开语法 [...nodeList] 将 NodeList 转为数组，方可调用 map、filter 等方法； 文本清洗（.replace(/\s+/g, " ").trim()）可有效处理 HTML 中常见的换行、缩进、多余空格问题； 若目标内容为异步加载（如通过 AJAX 渲染），务必在 $$eval 前添加等待： await page.waitForSelector(".c-product-review-card", { timeout: 5000 });⚠️ 常见错误规避： ❌ 错误：page.evaluate('div > p', el => ...) —— 字符串选择器不能这样传入； ❌ 错误：el.querySelector('p') 返回单个元素，无法遍历全部 ；应改用 el.querySelectorAll('p')； ❌ 错误：未处理 querySelector 可能返回 null，直接调用 .textContent 会报错；建议封装 text() 辅助函数做空值防护。最终 data 将是一个结构清晰的 JavaScript 对象数组，可直接序列化为 JSON、存入数据库或用于后续分析。该模式具备强可读性、可维护性与抗 HTML 微调能力，推荐作为 Puppeteer 结构化爬取的标准实践。