复制文章内容时添加版权信息

前言

在复制有些网站的文章时，通常会发现，复制的内容还带了一个“小尾巴”，上边附带着版权信息。

例如：

---------------------
著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
来源地址：https://www.miaoi.top/
来源：萌喵论坛
版权声明：本文为UP主原创文章，转载请附上文章链接！

在本篇文章中，尝试来实现一下这种效果。

大致原理就是在用户复制时，获取用户选中的将要复制的内容，然后再加上版权信息即可。

代码

/*复制自动添加版权*/
 jQuery(document).on('copy', function(e) {
  var selected = window.getSelection();
  var selectedText = selected.toString().replace(/n/g, '<br>');
    var copyFooter = '<br>---------------------<br>著作权归作者所有。<br>' 
                       + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
                       + '来源地址：' + document.location.href
                       + '<br>来源：萌喵论坛<br> 版权声明：本文为UP主原创文章，转载请附上文章链接！';
    var copyHolder = $('<div>', {id: 'temp', html: selectedText + copyFooter, style: {position: 'absolute', left: '-99999px'}});
     
    $('body').append(copyHolder);
    selected.selectAllChildren( copyHolder[0] );
    window.setTimeout(function() {
        copyHolder.remove();
    },0);
});

这段代码使用了 jQuery 库，并且监听了页面中的 copy 事件。当用户执行了复制操作时，代码会获取用户所选择的文本，并将其添加到一个带有版权声明和来源信息的临时 DOM 元素中，最后将该元素添加到了页面的 body 中，并使用 window.getSelection() 函数选中了该元素。这个临时元素的样式设置为绝对定位，位置偏移了屏幕之外，因此用户不会看到这个元素。

最后，代码使用了 window.setTimeout() 函数来延迟一段时间后再删除这个临时元素，以保证用户在复制完成后不会看到这个元素。

进阶

如果用户选择的文本内容长度超过了 100 个字符，就会添加版权声明和来源信息，否则不添加。这个判断是为了避免在复制短文本时添加过多的版权声明和来源信息，影响用户体验。

/*复制自动添加版权*/
 jQuery(document).on('copy', function(e) {
  var selected = window.getSelection();
  var selectedText = selected.toString().replace(/n/g, '<br>');
  if (selectedText.length > 100) { // 判断是否超过100个字符
    var copyFooter = '<br>---------------------<br>著作权归作者所有。<br>' 
                       + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
                       + '来源地址：' + document.location.href
                       + '<br>来源：萌喵论坛<br> 版权声明：本文为UP主原创文章，转载请附上文章链接！';
    var copyHolder = $('<div>', {id: 'temp', html: selectedText + copyFooter, style: {position: 'absolute', left: '-99999px'}});
     
    $('body').append(copyHolder);
    selected.selectAllChildren( copyHolder[0] );
    window.setTimeout(function() {
        copyHolder.remove();
    },0);
  }
});

完事…..