網頁富文本複製技巧：用瀏覽器書籤一鍵貼到筆記、文書與 AI 工具
平常我們在整理網頁資料時，最常用的方法大概就是滑鼠選取、右鍵複製，或是直接 Ctrl+A 全選後 Ctrl+C。
如果只是偶爾複製一篇文章，這樣其實沒什麼問題。貼到 Word、Evernote 或其他支援富文本的工具時，通常可以保留原本的文字大小、粗體、連結，甚至部分圖片與排版。
但如果今天要處理好幾篇網頁，這件事就會開始變麻煩。
例如我想把網頁內容備份到 Evernote，之後方便複習。或者我想把一篇文章貼到 Word 裡整理重點。又或者現在很常見的情境，是把網頁內容先整理到本地端，再交給本地 AI agent 做分析、摘要或改寫。
這時候一直切換視窗、手動選取、複製貼上，就會變成一個很瑣碎的動作。重點是，這個動作本身沒有什麼技術含量，但它會打斷工作節奏。
所以我後來做了兩個很輕量的瀏覽器書籤工具：
⚡一鍵複製富文本🎯 智慧擷取內文
它們不需要安裝瀏覽器外掛。簡單講，就是把一小段 JavaScript 放進瀏覽器書籤列。以後看到想保存的網頁，點一下書籤，就可以把網頁內容用富文本格式放進剪貼簿，再貼到 Evernote、Word 或其他工具裡。
這裡先補一句：我說的富文本，也有人稱為富文字，英文是 Rich Text。它除了文字本身，也會保留粗體、標題、超連結、項目符號、部分排版等資訊。相對的，純文本或純文字，也就是 Plain Text，通常只保留字元本身，不保留視覺格式。
我之前在 Blogger 轉 FB 貼文神器：純文字也能有層級排版，一鍵轉換教學＋工具分享 裡，談過純文字在 Facebook 這類平台上的處理方式。另一篇 為什麼文件轉成 Markdown 會更適合 AI？我的 Universal Markdown 極簡轉檔器實作分享，則是從 AI 分析的角度談 Markdown。這篇要處理的剛好是另一個需求：我想把網頁看起來的格式盡量保留下來，貼到像是 Evernote 或 Word 這類本地記事工具或文書處理軟體後，可以直接閱讀或進一步編輯。
為什麼不是直接 Ctrl+A 就好？
Ctrl+A 加上 Ctrl+C 其實是最直覺的方法。
一般靜態文章網頁通常沒有問題。你在頁面空白處點一下，按 Ctrl+A，再按 Ctrl+C，貼到 Word 或 Evernote，常常就能保留不錯的富文本格式。
但實際用起來會遇到幾種狀況。
第一，有些現代網頁比較像網頁版應用程式，不太像傳統文章頁。像 Notion 這類服務，頁面上的內容是用前端程式動態渲染出來的。你按 Ctrl+A 時，網站可能會攔截鍵盤事件，只選到某個區塊，或根本沒有照瀏覽器原本的方式全選。
第二，有些網頁很長，手動用滑鼠拖曳選取很容易漏掉前後段落，或不小心多選到旁邊的區塊。
第三，如果一次要處理很多頁，每一頁都要點畫面、全選、複製、切換視窗、貼上，累積起來其實很煩。
所以我想要的是一個小工具，可以把這件事變成「點一下」。
傳統方式可以怎麼做？
在做這兩個書籤之前，我先整理列出幾種常見方法。
方法一：手動全選頁面文字或 Ctrl+A
這是最不用準備的方法。
好處是瀏覽器原生支援，不需要安裝任何東西。貼到 Word、Evernote 這類支援富文本的工具，也常常可以保留原本網頁的格式與超連結。
缺點是遇到複雜網頁、動態網頁、超長網頁時，穩定性不一定好。大量處理時，也會一直重複同樣動作。
方法二：Evernote Web Clipper
如果最後目的地就是 Evernote，那 Evernote Web Clipper 當然很好用。
它可以直接把完整網頁、簡化文章、截圖等內容存到 Evernote。對 Evernote 使用者來說，這是一個很完整的解法。
但它的限制就是僅針對把內容送到 Evernote。如果我今天想先貼到 Word、貼到其他筆記軟體，或貼到本地 AI 工具裡，這條路線就比較不彈性。
方法三：瀏覽器閱讀模式
很多瀏覽器都有類似「閱讀模式」的功能，只是名稱和介面不太一樣。
例如 Edge 叫做沉浸式閱讀。Chrome 也有 Reading Mode，不過常見形式比較像側邊欄或分割閱讀介面，會依版本與平台略有差異。Firefox 有 Reader View。Safari 則有 Reader。
這些功能的共同目的，是把文章整理成比較乾淨的閱讀版面，減少廣告、側邊欄、導覽列的干擾。
如果你的目標只是閱讀，這類功能很好用。如果你已經進入閱讀模式，有些情況下也可以直接在閱讀模式裡全選、複製，再貼到 Word 或 Evernote。
不過我實測時也遇到幾個問題。第一，不是每個網頁都能成功進入閱讀模式。第二，有些頁面進入閱讀模式後，內容反而少很多。這通常跟網站 HTML 結構有關，瀏覽器判斷哪裡是正文時，可能抓錯範圍。
另外，進入閱讀模式後，像 bookmarklet 這類自訂 JavaScript 通常不能執行，因為閱讀模式多半是瀏覽器保護起來的特殊頁面。這也是我後來覺得，與其完全依賴閱讀模式，不如另外準備一個可以在原網頁上執行的書籤工具。
方法四：Markdown 轉換工具或外掛
現在也有很多工具可以把網頁轉成 Markdown，例如一些 Markdown clipper、網頁轉 Markdown 的服務，或專門給 AI agent 使用的轉換工具。
這類工具對 AI 分析很有幫助，因為 Markdown 乾淨、節省 token，也方便後續處理。
但這篇文章想解決的是另一件事：我希望貼上後看起來仍然像富文本，不要看到一堆 #、*、[]() 這些 Markdown 符號，畢竟 Markdown 的格式對一般使用者仍然不夠親切直觀。
所以如果目標是「貼到 Evernote 或 Word 後直接能看」，富文本還是比較合適。
我的做法：用 Bookmarklet 當成輕量工具
Bookmarklet 可以把一小段 JavaScript 存成瀏覽器書籤。
平常我們點書籤，是打開某個網址。Bookmarklet 則是點下去後，在目前網頁執行一小段程式。
這個方法的好處是很輕：
- 不需要安裝瀏覽器外掛
- 不需要登入額外服務
- 可以放在書籤列，點一下就用
- 可以把結果放進系統剪貼簿
- 貼到 Evernote、Word 或其他支援富文本的工具都很方便
我最後保留兩個版本。一個是完整複製整頁富文本，另一個是盡量只擷取主要內文。
書籤工具一：⚡一鍵複製富文本
第一個工具叫做 ⚡一鍵複製富文本。
它的做法很粗暴：抓目前網頁 body 裡的 HTML，連同純文字版本一起放進剪貼簿。
也就是說，貼到支援富文本的工具時，它會優先用 text/html 的內容。貼到只支援純文字的地方時，還是有 text/plain 可以用。
程式碼
新增書籤時，網址欄位貼上這段：
javascript:(async function(){try{const html=document.body.innerHTML;const text=document.body.innerText;const item=new ClipboardItem({'text/html':new Blob([html],{type:'text/html'}),'text/plain':new Blob([text],{type:'text/plain'})});await navigator.clipboard.write([item]);alert('網頁富文本已成功複製！可以切換視窗貼上了。');}catch(err){alert('複製失敗，可能是此網站安全限制阻擋：'+err);}})();這個版本最適合用在你想完整保留整頁內容的時候。
例如：
- 一般部落格文章
- 新聞頁面
- 文件頁面
- Notion 公開頁面
- 想先完整備份，再慢慢整理的資料
它的優點是完整。缺點也就是太完整，會把頁面裡的導覽列、側邊欄、頁尾、推薦文章、版權資訊都一起抓下來。
所以如果那個網頁本身很乾淨，這個版本很好用。
如果那個網頁旁邊有很多雜訊，那貼出來就可能需要再整理。
書籤工具二：🎯 智慧擷取內文
第二個工具叫做 🎯 智慧擷取內文。
這個版本比較像是進階版。它會先嘗試找網頁中的主要內容區，不直接抓整個 body。
它會優先找這些常見結構：
articlemain.post-content.article-content.entry-content#main-content#content.notion-page-content
找到之後，它會複製一份內容，然後先移除一些常見雜訊，例如：
scriptstylenavasidefooteriframe.ad.advertisement
最後再把清理後的 HTML 富文本與純文字一起放進剪貼簿。
程式碼
新增書籤時，網址欄位貼上這段：
javascript:(async function(){try{let t=document.querySelector("article")||document.querySelector("main")||document.querySelector(".post-content, .article-content, .entry-content, #main-content, #content, .notion-page-content");if(!t){t=document.body;console.log("找不到特定文章標籤，將轉換全頁");}let c=t.cloneNode(!0);c.querySelectorAll("script, style, nav, aside, footer, iframe, .ad, .advertisement").forEach(e=>e.remove());const h=c.innerHTML,x=c.innerText,i=new ClipboardItem({"text/html":new Blob([h],{type:"text/html"}),"text/plain":new Blob([x],{type:"text/plain"})});await navigator.clipboard.write([i]);alert("成功擷取主要內文並複製富文本！\n現在可以直接去 Word 或 Evernote 貼上了。");}catch(e){alert("複製失敗，可能受網站安全機制阻擋："+e);}})();這個版本適合用在網頁內容很雜，但你只想要正文的時候。
例如：
- 側邊欄很多的文章頁
- 頁首頁尾資訊很多的網站
- 瀏覽器閱讀模式會漏內容的頁面
- 想貼到 Evernote 後直接變成比較乾淨筆記的情境
它的優點是乾淨。缺點是它需要依賴網站本身的 HTML 結構。如果網站沒有把正文包在常見標籤裡，或用了很特殊的前端結構，它可能抓不到最理想的範圍。
所以我會把它定位成「先試試看」的工具。成功時很省事，失敗時就換回第一個完整複製版本。
怎麼在瀏覽器設定這類書籤？
以 Edge 或 Chrome 來說，做法大同小異。
-
先打開書籤列
如果書籤列沒有顯示，可以到瀏覽器設定裡開啟「顯示我的最愛列」或「顯示書籤列」。 -
在書籤列按右鍵
選擇「新增書籤」或「新增頁面」。 -
填入名稱
第一個可以命名為⚡一鍵複製富文本。
第二個可以命名為🎯 智慧擷取內文。 -
在網址欄貼上 JavaScript 程式碼
注意要從javascript:開頭完整貼上。 -
儲存
之後看到想複製的網頁，就點一下書籤列上的工具。 -
貼到目標工具測試
可以貼到 Evernote、Word、Google Docs、支援富文本的 Markdown 編輯器，或其他你平常整理資料的地方。
第一次設定時，我建議兩個都放在書籤列上。因為這兩個工具處理的情境不太一樣，保留兩個反而比較彈性。
這兩個工具差在哪裡？
簡單講：
⚡一鍵複製富文本：完整複製整個頁面🎯 智慧擷取內文：盡量只複製主要文章內容
如果用情境來看，我會這樣選：
| 情境 | 建議工具 |
|---|---|
| 想完整備份整頁內容 | ⚡一鍵複製富文本 |
| 網頁本身很乾淨 | ⚡一鍵複製富文本 |
| 網頁側邊欄、頁尾、推薦文章很多 | 🎯 智慧擷取內文 |
| 瀏覽器閱讀模式會漏內容 | 🎯 智慧擷取內文 |
| 不確定網站結構，想先保守保存 | ⚡一鍵複製富文本 |
| 貼到 Evernote 後希望少整理一點 | 🎯 智慧擷取內文 |
我自己的習慣是：先用 🎯 智慧擷取內文。如果貼出來內容少了，或看起來抓錯區塊，就改用 ⚡一鍵複製富文本。
如果那篇內容很重要，我會貼上後快速檢查一次開頭、結尾與中間段落。這個步驟不能省，因為不同網站的 HTML 結構差異很大，沒有一個小腳本可以保證百分之百完美。
使用時要注意什麼？
這類 bookmarklet 很方便，但有些地方不能用。
有幾個限制要先知道。
第一，某些網站的安全政策可能會限制剪貼簿 API。這時候點書籤可能會跳出複製失敗。
第二，瀏覽器內部頁面不能用。例如 chrome://、edge://、擴充功能頁面、PDF 內建檢視頁，或各瀏覽器的閱讀模式頁面，通常都不能執行這類自訂 JavaScript。
第三，動態載入的網站可能只抓到當下已經載入的內容。如果文章需要一直往下捲才會載入後段，那最好先把頁面捲到底，確認內容都出現後再複製。
第四，貼到不同工具的效果可能不一樣。Word、Evernote、Google Docs、Notion、Markdown 編輯器，對富文本 HTML 的接受程度都不同。這件事沒有辦法只靠腳本完全控制。
所以我的建議是，把它當成一個提高效率的小工具。重要資料還是要檢查，不要把它當成正式歸檔系統。
小結：把瑣碎動作變成一個按鈕
富文本擷取書籤工具，幫我們把一個每天可能會重複很多次的小動作，變成一個按鈕。
以前要手動選取、全選、複製、切換視窗、貼上。現在看到想保留的網頁，先點一下 🎯 智慧擷取內文，如果不理想，再點 ⚡一鍵複製富文本。
對常常整理網頁資料、寫部落格、做筆記，或把資料交給本地 AI agent 分析的人來說，這種小工具就是簡單粗暴。
如果不想特別安裝專屬的 Evernote Web Clipper 外掛，也不想特別安裝 Markdown 轉換工具。就可以用富文本擷取書籤來彌補這類需求：把目前看到的網頁，用富文本形式快速複製下來，然後貼到自己想用的地方。
輕巧小工具，能讓你簡化很多土法煉鋼的重複動作，歡迎試試看。
留言
張貼留言