在网站copy时自带的版权小尾巴以及“复制代码“,可以怎么实现

前言

每天网上的博客各个领域都会涌现新文章,有时候看到感兴趣的知识就想把某段文字 copy下来 摘录下来,等有时间后慢慢品味

10年积累的做网站、成都做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有盐田免费网站建设让你可以放心的选择与我们合作。

在部分网站上,如果只是复制少量文字,并没有什么不同。但是当我们复制的文字多的话会发现多了一个小尾巴

所谓小尾巴是指在复制文本的最后会多一个作者和出处信息,如下:

···(复制的内容)···
————————————————
版权声明:本文为xxx的原创文章,遵循CC 5.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://www.cdcxhl.com/

创新互联可能并没有这种情况,但是在很多技术论坛、创新互联建站都有这样的处理。当我们复制文章内容的时候,往往会自动加上一段文本信息版权

那么如果我们也想实现这样的效果要怎么做呢?

实现

版权小尾巴

前提:假定所选择的字符串长度大于等于130时带上版权信息

示例一:这不是一个 bug,这只是一个未列出来的特性。
示例二:ES6 是一个泛指,含义是 5.1 版以后的 JavaScript。 ES6 是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。 它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,使之成为企业级开发语言。
%0Avar%20copyEl%20%3D%20document.getElementById%28%27copy%27%29%3B%0AcopyEl.oncopy%20%3D%20function%20%28e%29%20%7B%0A%20%20if%20%28window.getSelection%280%29.toString%28%29.length%20%3E%3D%20130%29%20%7B%0A%20%20%20%20var%20clipboardData%20%3D%20event.clipboardData%20%7C%7C%20window.clipboardData%3B%0A%20%20%20%20//%20%u963B%u6B62%u9ED8%u8BA4%u4E8B%u4EF6%0A%20%20%20%20e.preventDefault%28%29%3B%0A%20%20%20%20var%20copyMsg%20%3D%0A%20%20%20%20%20%20window.getSelection%28%29%20+%0A%20%20%20%20%20%20%27%5Cr%5Cn%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%u2014%5Cr%5Cn%u7248%u6743%u58F0%u660E%uFF1A%u672C%u6587%u4E3Axxx%u7684%u539F%u521B%u6587%u7AE0%uFF0C%u9075%u5FAACC%204.0%20BY-SA%u7248%u6743%u534F%u8BAE%uFF0C%u8F6C%u8F7D%u8BF7%u9644%u4E0A%u539F%u6587%u51FA%u5904%u94FE%u63A5%u53CA%u672C%u58F0%u660E%u3002%27%20+%0A%20%20%20%20%20%20%27%5Cr%5Cn%u539F%u6587%u94FE%u63A5%uFF1A%27%20+%20location.href%3B%0A%20%20%20%20//%20%u5C06%u5904%u7406%u5B8C%u7684%u4FE1%u606F%u6DFB%u52A0%u5230%u526A%u5207%u677F%0A%20%20%20%20clipboardData.setData%28%27Text%27%2C%20copyMsg%29%3B%0A%20%20%7D%0A%7D%3B%0A

演示

浏览器兼容性

当复制示例一后可以发现粘贴是正常的;复制示例二则会在末尾携带版权信息

复制代码功能

我们直接复制代码,会发现当字数超过一定值时也是会携带版权信息。但是点击“复制代码”的时候可以一键复制区域内的代码,这可以怎么实现呢?

// 浮点数相加
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)
  );
 } 
%0A%20%20var%20btn%20%3D%20document.getElementById%28%27btn%27%29%3B%0A%20%20btn.onclick%20%3D%20function%20copyCode%28%29%20%7B%0A%20%20%20%20window.getSelection%28%29.removeAllRanges%28%29%3B%20//%20%u6E05%u9664%u9009%u4E2D%u7684%u6587%u672C%0A%20%20%20%20var%20range%20%3D%20document.createRange%28%29%3B%0A%20%20%20%20range.selectNode%28document.getElementById%28%27copyable%27%29%29%3B%0A%20%20%20%20var%20selection%20%3D%20window.getSelection%28%29%3B%0A%20%20%20%20selection.addRange%28range%29%3B%20//%20%u6DFB%u52A0%u9009%u4E2D%u7684%u5185%u5BB9%0A%20%20%20%20document.execCommand%28%27copy%27%29%3B%20//%20%u6267%u884C%u590D%u5236%0A%20%20%20%20window.getSelection%28%29.removeAllRanges%28%29%3B%20//%20%u6E05%u9664%u590D%u5236%u9009%u4E2D%u7684%u6587%u672C%0A%20%20%20%20alert%28%27%u4EE3%u7801%u590D%u5236%u6210%u529F%27%29%3B%0A%20%20%7D%3B%0A

演示

浏览器兼容性

document.execCommand()因为安全问题已经废弃,不适合长期使用

第三方工具

除了以上实现方式,也可以使用第三方库封装好的函数来实现

clipboard.js

  • 介绍:只有3k大小,不依赖任何框架
  • GitHub:https://github.com/zenorocha/clipboard.js

当前文章:在网站copy时自带的版权小尾巴以及“复制代码“,可以怎么实现
网址分享:http://myzitong.com/article/dsojhoc.html