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

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

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

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

使用方式

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

請支持《傑瑞窩在這》原創文章。原文標題：<a href="https://jerrynest.io/js-book/">部落客、書評必備！透過 JavaScript 抓取並整理博客來書籍資料</a>，原文網址：<a href="https://jerrynest.io/js-book/">https://jerrynest.io/js-book/</a>

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 執行程式碼後，就會看見右下角有小框框出現啦

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