【分享】JS如何为复制的Web文本添加其他信息

看到了两篇关于这题的讨论，简单的记录一下！o(*￣▽￣*)ブ

1.  stackoverflow , How to add extra info to copied web text

2.  黑客派，https://hacpai.com/article/1510544423932

第一条使用两种方法对文章进行粘贴追加信息~~~

方法一：

①监听copy事件，然后将隐藏盒子中的信息添加到其中；

②结合window.selection()方法；

③浏览器兼容情况是主流浏览器IE8以上；

④线上demo http://jsfiddle.net/jp6nhmxf/ ；

⑤使用：复制一段文本再粘贴就会出现 pagelink中的内容 。

主要JS code

 　　function addLink() {
         //Get the selected text and append the extra info
         var selection = window.getSelection(),
             pagelink = '\n\n Read more at: ' + document.location.href,
             copytext = selection + pagelink,
             newdiv = document.createElement('div');

         //hide the newly created container
         newdiv.style.position = 'absolute';
         newdiv.style.left = '-99999px';

         //insert the container, fill it with the extended text, and define the new selection
         document.body.appendChild(newdiv);
         newdiv.innerHTML = copytext;
         selection.selectAllChildren(newdiv);

         window.setTimeout(function () {
             document.body.removeChild(newdiv);
         }, 100);
     }

     document.addEventListener('copy', addLink);

方法二：

①监听copy事件，然后修改剪贴板中的内容，也就是clipboard使用；

②结合window.clipboardData.setData()方法；

③浏览器兼容情况是IE4以上（换言之只针对于IE）；

④线上demo http://jsfiddle.net/m56af0je/ （IE模式下起效）；

主要JS code

    function addLink(event) {
        event.preventDefault();

        var pagelink = '\n\n Read more at: ' + document.location.href,
            copytext =  window.getSelection() + pagelink;

        if (window.clipboardData) {
            window.clipboardData.setData('Text', copytext);
        }
    }

    document.addEventListener('copy', addLink);

⑤另外疑问点来了，使用clipboard能在其他浏览器（比如谷歌/火狐/safari）中工作吗？

主要JS code

 function addLink(event) {
     event.preventDefault();

     var pagelink = '\n\n Read more at: ' + document.location.href,
         copytext =  window.getSelection() + pagelink;

     (event.clipboardData || window.clipboardData).setData('Text', copytext);
 }

 document.addEventListener('copy', addLink);

区别在 window.clipboarddata  <-->  event.clipboardData

亲测在兼容模式、极速模式、谷歌、火狐、IE等浏览器中均测有效！

第二条使用的方法跟第一条类似~~~

主要JS code

 /**
  * @description 添加版权
  */
  const addCopyright = () => {
   const genCopy = () => {
     return [
       '',
       '',
       '作者：Vanessa',
       '链接 [文章复制添加版权](https://hacpai.com/article/1510544423932) ',
       '来源：黑客派',
       '著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。',
     ]
   }

   $('.content-reset').on('copy', function (event) {
     if (!window.getSelection) {
       return
     }

     let copyString = window.getSelection().toString()

     if (copyString.length < 128) {
       return
     }

     if ('object' === typeof event.originalEvent.clipboardData) {
       event.originalEvent.clipboardData.setData('text/html', copyString + genCopy().join(''))
       event.originalEvent.clipboardData.setData('text/plain', copyString + genCopy().join('\n'))
       event.preventDefault()
       return
     }

     $('body').append(`${copyString}${genCopy().join('')}`)
     window.getSelection().selectAllChildren($('#pipeFixCopy')[0])
     setTimeout(function() {
       $('#pipeFixCopy').remove()
     }, 200)
   })
 }

找一个空白地方复制粘贴测试，~~本人只在极速模式下测通过，其他未测~~

敬请留意~~

~~~抱拳撒花*★,°*:.☆(￣▽￣)/$:*.°★* 。~~~