Scraper是以XPath與JQuery兩種方式來抓取網頁上的資料,這裡說明以XPath為主。

一、先認識XPath網頁HTML階層與結構概念

所看到的網頁都是以HTML碼所組成,在由瀏覽器解譯後就是我們看到的網頁,目前要抓取的mail名單HTML結構,可分為table與ul還有其他…等等,下面舉例說明。

table結構

上面表格HTML碼

    <table class="staff">
      <tbody>
        <tr>
          <th colspan="3" class="staff_cats"></th>
        </tr>
        <tr>
          <td width="35%"><font size="-2">役職</font><br></td>
          <td width="40%"><font size="-2">氏名</font></td>
          <td><font size="-2">電子メールアドレス "@iae.kyoto-u.ac.jp" を補ってください。</font></td>
        </tr>
        <tr>
          <td width="35%">所長<br></td>
          <td width="40%"><a class="various" data-fancybox-type="iframe" href="/en/common/staffEJ/2017/04/post-133.html" style="opacity: 1;">岸本 泰明</a></td>
          <td>y-kishimoto</td>
        </tr>
        <tr>
          <td width="35%">副所長<br></td>
          <td width="40%"><a class="various" data-fancybox-type="iframe" href="/en/common/staffEJ/2014/12/post-28.html" style="opacity: 1;">森井 孝</a></td>
          <td>t-morii</td>
        </tr>
        <tr>
          <td width="35%">所長秘書<br>
            (事務補佐員)<br></td>
          <td width="40%"><a class="various" data-fancybox-type="iframe" href="/en/common/staffEJ/2017/04/post-134.html">高橋 友子</a></td>
          <td>t-takahashi</td>
        </tr>
      </tbody>
    </table>

上面是網頁呈現表格畫面,下面是網頁表格的HTML碼,以XPath來說我要取職稱、名子、MAIL欄位,階層路徑要如何寫,範例如下。

    //table/tbody/tr/td[1] <-取得 職稱 欄位
    //table/tbody/tr/td[2] <-取得 名子 欄位
    //table/tbody/tr/td[3] <-取得 MAIL 欄位

換個方式說,階層就像電腦的磁碟路徑一樣,如C:\Users\File\Pictures\Ashampoo,跟上面的XPath階層是不是很像,上面中括弧[1][2][3]代表示在同一層的第幾個 ,在HTML碼所顯示 tr 這一層有三個 td ,要哪一個 td 的資料就用中括弧[ ]標數字。

其它結構

HTML碼

<div class="staffsrchbox lbox">
  <div class="ph"><a href="http://yagamix.st.keio.ac.jp/tprofile/personal.html?nickname=fe5ca94edecc61befdc8c586a6911cd6&amp;test=1"><img src="http://yagamix.st.keio.ac.jp/tprofile/images/fe5ca94edecc61befdc8c586a6911cd6.jpg" alt="" title="" width="100" border="0" height="133"></a></div>
  <div class="insidebox">
    <p class="numb"><a href="http://yagamix.st.keio.ac.jp/tprofile/personal.html?nickname=fe5ca94edecc61befdc8c586a6911cd6">青木 義満</a></p>
    <p class="info"> 学科:電子工学科<br>
      専攻:総合デザイン工学専攻<br>
      職名:教授<br>
      キーワード:画像センシング/画像認識/コンピュータビジョ...</p>
  </div>
  <div class="spacer"><img src="../img/cmn/img_spacer.gif" alt="" width="1" height="1"></div>
</div>

上面是網頁呈現畫面,下面是網頁的HTML碼,以XPath來說我要取職稱、名子、名子的連結,階層路徑要如何寫,範例如下。

    //div/div[2]/p[1]/a          <-名子
    //div/div[2]/p[2]/text()[3]  <-職稱
    //div/div[2]/p/a/@href       <-名子的連結網址

上面有說明中括弧[]中的數字代表同一層的第幾個,上面階層第二行,在第二個P裡有三個 br (在網頁裡br屬斷行的意思,如同word的Shift+Enter),我們要取第三的斷行的文字,需要用的XPath語法 text()指取文字的意思,後面在加中括弧[3]就是第三個瞜!上面階層第三行的@href是指取網頁內的HTML碼的連結網址。

 二、使用Scraper快速取得目標階層,在進行修改

如過有上面概念的話,在使用Scraper因該比較會知道如何下階層路徑,先說明Scraper介面功能。

再來就以上一篇慶應義塾大学理工学部頁面為例,開始來說截取步驟。

一、在慶應義塾大学理工学部頁面上教職共有288人,一個頁面有十個人,共28頁,使用Scraper截取第一頁的人名與職稱和連結。滑鼠在頁面上人名按下滑鼠右鍵->點選Scraper similar…如下圖所示.

二、會出現Scraper視窗,會自動抓取階層路徑,如下圖,欄位也自動增加一個url連結網址欄位,右邊視窗現是所抓取到的筆數和結果。

三、增加一個職稱欄位,按下綠色小按鈕增加一欄,階層路徑填入../../p[2]/text()[3],在按下Scrape重新抓取,就可以截取到職稱欄位。

在上面HTML階層與結構概念,的其它結構已說明,已知道職稱階層路徑是div/div裡面的第二個P裡的第三個行文字(div/div/p[2]/text()[3]),Scraper自動抓取的路徑必須退兩層(//div[3]/div[2]/div/div/p/a),所以在增加職位欄位路徑輸入../../p[2]/text()[3]就可以抓到職稱。

    ../     <-在網頁路徑代表示是上一層的意思
    ../../  <-在網頁路徑代表示是上兩層的意思

XPath語法參考->XPath維基

如何查詢網頁的HTML碼,查看HTML階層,善用F12與滑鼠右鍵的檢查功能

最後修改日期: 2020 年 6 月 15 日

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。