部落客、書評必備!透過 JavaScript 抓取並整理博客來書籍資料

誰說只有美食旅遊類文章才需要做資訊整理,許多讀書心得筆記除了撰寫摘要、抒發心得之外,也會附上整理好的書籍資訊,就像我之前這篇,還順便放上博客來推薦碼 (雖然沒什麼人點就是了XDD)

book reco - 部落客、書評必備!透過 JavaScript 抓取並整理博客來書籍資料

這些資料基本上不會有太多變化,大多是到博客來的書籍介紹頁面複製貼上過來,不過每次都要自己手動整理真的很麻煩,有沒有比較輕鬆快速的方式呢?

通常在做分享的時候,頂多也就一兩本書,不需要同時間大量抓取,所以我們還不用搬出爬蟲技巧,直接透過 JavaScript 來幫我們整理資訊就可以了。以下這個小程式,可以直接在網頁上整理出書籍資料,效果就像這樣 (右下方會出現一個框框讓你複製)

bookjs1 - 部落客、書評必備!透過 JavaScript 抓取並整理博客來書籍資料


使用方式

到博客來隨便找一本書試試看,比如這個

請支持《傑瑞窩在這》原創文章。原文標題:部落客、書評必備!透過 JavaScript 抓取並整理博客來書籍資料,原文網址:https://jerrynest.io/js-book/
https://www.books.com.tw/products/0010796370?loc=P_asb_001

以 Windows 版本的 Chrome 為例,打開「開發人員工具」或按下 F12 快捷鍵 ,在 Console 輸入下方程式碼:

javascript: (function() {
  const content = {};
  function parseData() {
      content['書名'] = document.querySelector('.type02_p002 h1').textContent;
      content['原文書名'] = document.querySelector('.type02_p002 h2').textContent;
      const list = document.querySelectorAll('.type02_p003 li');
      const author = Array.from(list).find(e => e.textContent.includes('作者'));
      content["作者"] = author ? author.querySelectorAll('a')[3].innerHTML : "";
      const originalAuthor = Array.from(list).find(e => e.textContent.includes('原文作者'));
      content['原文作者'] = originalAuthor ? originalAuthor.querySelector('a').innerText : "";
      const translator = Array.from(list).find(e => e.textContent.includes('譯者'));
      content['譯者'] = translator ? Array.from(translator.querySelectorAll('div a')).map(e => e.innerText).join('、') : "";
      const publisher = Array.from(list).find(e => e.textContent.includes('出版社'));
      content['出版社'] = publisher ? publisher.querySelectorAll('div a span')[0].textContent : "";
      const date = Array.from(list).find(e => e.textContent.includes('出版日期'));
      content['出版日期'] = date ? date.textContent.replace('出版日期:', '') : "";
  };
  function toCssString(obj) {
      let text = "";
      for (key in obj) {
          if (obj[key]) {
              text += key + ':' + obj[key] + ';';
          }
      }
      return text;
  }
  function display(content) {
      const box = document.createElement('div');
      const boxStyle = {
          width: '30%',
          height: '200px',
          padding: '20px',
          'background-color': '#555',
          position: 'absolute',
          bottom: '0',
          right: '0',
      };
      box.style.cssText = toCssString(boxStyle);
      const textarea = document.createElement('textarea');
      textarea.style.width = '100%';
      textarea.style.height = '100%';
      textarea.style.zIndex = 100;
      let text = "";
      for (key in content) {
          if (content[key]) {
              text += key + ':' + content[key] + '\n';
          }
      }
      textarea.appendChild(document.createTextNode(text));
      const injectPoint = document.querySelector('body');
      box.appendChild(textarea);
      injectPoint.appendChild(box);
  };
  parseData();
  display(content);
})();

如下圖,按下 Enter 執行程式碼後,就會看見右下角有小框框出現啦bookjs2 - 部落客、書評必備!透過 JavaScript 抓取並整理博客來書籍資料

你甚至可以把它設置為書籤,之後就不用每次都要找這段程式碼使用了。把剛剛那串程式碼貼在網址欄就行囉

bookjs3 - 部落客、書評必備!透過 JavaScript 抓取並整理博客來書籍資料

如果您覺得這篇文章有幫助,歡迎按個讚或分享出去唷:

樂於分享的軟體工程師,曾在新創與大型科技公司實習,獲得黑客松競賽冠軍,擔任資安研討會講者。長期熱衷於資訊安全、雲端服務、網路行銷等領域,希望將科技知識分享給更多人。內容轉載請來信:jlee58tw@gmail.com

發表回應