部落客、書評必備！透過 JavaScript 抓取並整理部落格來書籍資料
摘要：
誰說只有美食旅遊類文章才需要做資訊整理，許多讀書心得筆記除了撰寫摘要、抒發心得之外，也會附上整理好的書籍資訊，就像我之前這篇，還順便放上部落格來推薦碼 (雖然沒什麼人點就是了XDD)
這些資料基本上不會有太多變化，大多是到部落格來的書籍介紹頁面複製貼上過來，不過每次都要自己手動整...
誰說只有美食旅遊類文章才需要做資訊整理，許多讀書心得筆記除了撰寫摘要、抒發心得之外，也會附上整理好的書籍資訊，就像我之前這篇，還順便放上部落格來推薦碼 (雖然沒什麼人點就是了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 執行程式碼後，就會看見右下角有小框框出現啦 
你甚至可以把它設定為書籤，之後就不用每次都要找這段程式碼使用了。把剛剛那串程式碼貼在網址欄就行囉
