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

时间:2016-12-02 14:27:43

标签: javascript google-chrome-devtools scrape

我正在尝试从here导出div标签的“prod-details”我想知道是否有一种方法或脚本我可以在chrome dev工具中运行,这些工具会导出带有数据的CSV刮?

2 个答案:

答案 0 :(得分:0)

我不会为你实现它;)但我认为这个工作流程可以帮助你完成任务。

  1. 创建snippet
  2. 抓取代码段中的数据。 document.querySelectorAll('.prod-details')会让你开始。
  3. 在您的代码段中将数据格式化为CSV格式。
  4. 使用XHR将CSV格式的数据发送到您的代码段中的Google表格(或其他相关服务)。
  5. 在页面打开时运行代码段。

答案 1 :(得分:0)

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