在網站copy時自帶的版權小尾巴以及“複製程式碼“,可以怎麼實現
阿新 • • 發佈:2022-04-11
前言
每天網上的部落格各個領域都會湧現新文章,有時候看到感興趣的知識就想把某段文字 copy下來 摘錄下來,等有時間後慢慢品味
在部分網站上,如果只是複製少量文字,並沒有什麼不同。但是當我們複製的文字多的話會發現多了一個小尾巴
所謂小尾巴是指在複製文字的最後會多一個作者和出處資訊,如下:
···(複製的內容)···
————————————————
版權宣告:本文為xxx的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本宣告。
原文連結:https://www.cnblogs.com/rainy-night/
部落格園可能並沒有這種情況,但是在很多技術論壇、部落格都有這樣的處理。當我們複製文章內容的時候,往往會自動加上一段文字資訊版權
那麼如果我們也想實現這樣的效果要怎麼做呢?
實現
版權小尾巴
前提:假定所選擇的字串長度大於等於130時帶上版權資訊
<div id="copy"> <div>示例一:這不是一個 bug,這只是一個未列出來的特性。</div> <div> 示例二:ES6 是一個泛指,含義是 5.1 版以後的 JavaScript。 ES6 是 JavaScript 語言的下一代標準,已經在 2015 年 6 月正式釋出了。 它的目標,是使得 JavaScript 語言可以用來編寫複雜的大型應用程式,使之成為企業級開發語言。 </div> </div> <script> var copyEl = document.getElementById('copy'); copyEl.oncopy = function (e) { if (window.getSelection(0).toString().length >= 130) { var clipboardData = event.clipboardData || window.clipboardData; // 阻止預設事件 e.preventDefault(); var copyMsg = window.getSelection() + '\r\n————————————————\r\n版權宣告:本文為xxx的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本宣告。' + '\r\n原文連結:' + location.href; // 將處理完的資訊新增到剪下板 clipboardData.setData('Text', copyMsg); // 將處理完的資訊新增到剪下板 clipboardData.setData('Text', copyMsg); } }; </script>
演示
瀏覽器相容性
當複製示例一後可以發現貼上是正常的;複製示例二則會在末尾攜帶版權資訊
複製程式碼功能
我們直接複製程式碼,會發現當字數超過一定值時也是會攜帶版權資訊。但是點選“複製程式碼”的時候可以一鍵複製區域內的程式碼,這可以怎麼實現呢?
<div> <pre> <code id="copyable">// 浮點數相加 function mathMultiply(arg1, arg2) { var m = 0; var s1 = arg1.toString(); var s2 = arg2.toString(); try { m += s1.split('.')[1].length; // 小數相乘,小數點後個數相加 } catch (e) {} try { m += s2.split('.')[1].length; } catch (e) {} return ( (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) / Math.pow(10, m) ); }<code /> </pre> <button id="btn">複製程式碼</button> </div> <script> var btn = document.getElementById('btn'); btn.onclick = function copyCode() { window.getSelection().removeAllRanges(); // 清除選中的文字 var range = document.createRange(); range.selectNode(document.getElementById('copyable')); var selection = window.getSelection(); selection.addRange(range); // 新增選中的內容 document.execCommand('copy'); // 執行復制 window.getSelection().removeAllRanges(); // 清除複製選中的文字 alert('程式碼複製成功'); }; </script>
演示
瀏覽器相容性
document.execCommand()因為安全問題已經廢棄,不適合長期使用
第三方工具
除了以上實現方式,也可以使用第三方庫封裝好的函式來實現
clipboard.js
- 介紹:只有3k大小,不依賴任何框架
- GitHub:https://github.com/zenorocha/clipboard.js