如何从嵌套的 div 标签中抓取数据并从开发工具导出到 CSV

Question

我正在尝试从这里导出div标签“prod-details”我想知道是否有一种方法或脚本可以在chrome开发工具中运行，可以导出带有刮取数据的CSV？

Answer 1

Kayce 不为您执行此操作可能是正确的，但开始可能会很困难，因此这里有一个基本的实现，其中包含您可以使用的注释。请务必阅读并尝试理解它，而不是仅仅复制和粘贴它。

// Create a list of the selectors within each prod-deatils you'd like to export as a column
var columnSelectors = [".brand", ".model", ".finish", ".ProductPriceDetails"];

// Create an array with the column selectors at the top to act as a header
[columnSelectors.join(",")].concat(
    // Grab the product details and arrayify it so we can use standard array functions
    $(".prod-details").toArray()
        // These are elements, and we want to be able to use jquery with them, so wrap each element with jquery
        .map(d => $(d))
        // For each prod-detail element, we want to extract each of the columns
        .map(d =>
            columnSelectors.map(
                // ... so we iterate the selectors and apply each one to the product, grab the text and trim() it to remove whitespace
                sel => d.find(sel).text().trim()
            ).join(",") // Finally join each of the columns with a comma so it follows CSV format
        )
).join("\n"); // And join all the rows with newlines

Answer 2

我不会为您实现它；）但我认为这个工作流程将帮助您实现大部分目标。

1. 创建片段。
2. 抓取代码片段中的数据。

   document.querySelectorAll('.prod-details')

   将帮助您开始。
3. 将代码片段中的数据格式化为 CSV。
4. 使用 XHR 将 CSV 格式的数据发送到代码片段中的 Google 表格（或其他相关服务）。
5. 在页面打开时运行代码片段。