如何優雅地從 HTML 文檔中提取 JSON 數據技术頭條網

2020-03-09 21:05:58 劉佰晟

本文內容已假定您已擁有一些 html 以及爬蟲的基礎知識

需求背景

這幾天在做一款資源站產品，開發過程中需要一定的測試數據，就考慮從網絡中的一些網站中爬取一些，但由於用量較少不想因此去寫一個爬蟲，而且需要對取回的數據能快速調整轉換。

市場上雖然有很多爬蟲工具和開源庫，但大部分用下來都覺得過於“重”了。雖然需要獲取的數據較少，但要求的即時性高、數據返回格式便於調整，在試用各種工具和庫的時候，發現了一款基於cherrio 封裝實現的庫 temme，試用之後感覺真的是神器，所以也很希望分享給大家。

temme 是一個類 jQuery 的選擇器，用於簡潔優雅地從 HTML 文檔中提取所需的 JSON 數據。有在線版本和 vscode-temme 插件，文尾有開源庫地址。

案例實踐

實戰一個例子體驗一下：

要求如下：

從一個設計資源站 design.maliquankai.com，中提取一些 JSON 格式內容數據，網站如下：

需要將網站 html 內容提取為以下格式的數據：

<code>  "圖庫": [
    {
      "cover": "images/img/pexels.jpg",
      "guid": "https://www.pexels.com",
      "description": "免費高品質圖片下載網站",
      "title": "Pexels",
      "content": "提供海量共享圖片素材，每週都會定量更新，所有的圖片都會顯示詳細的信息，例如拍攝的相機型號、光圈、焦距、ISO、圖片大分辨率等，高清大圖質量很不錯。"
    },

……
/<code>

用瀏覽器查看網站的 html 源，它的內容格式部分如下：

<code>
  
    
      圖庫網站已收錄36個網站

    


    
       

        
          
        

        
          
        

        ……
      

    

  

/
/<code>

需求和源都準備就緒，開始實操：

1 安裝環境

<code># 全局安裝 temme
yarn global add temme
/<code>

2 編寫 temme 選擇器

temme 原理是根據 CSS 選擇器語法從 HTML 文檔/片段中抓取想要的數據。語法支持JavaScript 字面量（string/number/null/boolean/RegExp）

將下面內容，存為 selector.temme 文件

<code>// 因為這個是可重複利用的代碼，可以寫成代碼片斷供下面抓取的語法共享使用 

@contentInfo = {
  img[data-class="lazy" src="//p2.ttnews.xyz/loading.gif" data-original=$cover class="lazy" data-original=$imgUrl];
  a[href=$guid];
  .case-info-logo p{$description};
  .case-info-title {$title};
  .case-info-text {$content}
};

// 這個 floor1 對應 html 文檔中的 ，由此可以分區域抓取
.floor1 li@插畫{
    @contentInfo;
};

.floor2 li@圖庫{
    @contentInfo;
};

//<code>

執行以下命令

<code>curl -s https://design.maliquankai.com/ | temme selector.temme --format
 

# 輸出如下:
#{
#  "插畫": [
#    {
#      "cover": "images/illustration/undraw.jpg",
#      "guid": "https://undraw.co/illustrations",
#      "description": "一個扁平化插畫圖庫",
#      "title": "unDraw",
#      "content": "unDraw是由Katerina Limpitsouni創建的一個扁平化插畫圖庫，從網站上就可以直接調整所有插圖的主要顏色，支持下載SVG和PNG格式，不需要標示出處，可用於商業用途。"
#    },
#    ……
#  ],
#  "圖庫": [
#    {
#      "cover": "images/img/pexels.jpg",
#      "guid": "https://www.pexels.com",
#      "description": "免費高品質圖片下載網站",
#      "title": "Pexels",
#      "content": "提供海量共享圖片素材，每週都會定量更新，所有的圖片都會顯示詳細的信息，例如拍攝的相機型號、光圈、焦距、ISO、圖片大分辨率等，高清大圖質量很不錯。"
#    },
#    ……
#  ]
#}
/<code>