前言

每天网上的博客各个领域都会涌现新文章，有时候看到感兴趣的常识就想把某段文字 copy 下来 摘录下来，等有工夫后缓缓品尝

在局部网站上，如果只是复制大量文字，并没有什么不同。然而当咱们复制的文字多的话会发现多了一个小尾巴

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

···（复制的内容）···
————————————————
版权申明：本文为 xxx 的原创文章，遵循 CC 4.0 BY-SA 版权协定，转载请附上原文出处链接及本申明。\
原文链接：https://segmentfault.com/u/ra…

思否可能并没有这种状况，然而在很多技术论坛、博客都有这样的解决。当咱们复制文章内容的时候，往往会主动加上一段文本信息版权

那么如果咱们也想实现这样的成果要怎么做呢？

实现

版权小尾巴

前提：假设所抉择的字符串长度大于等于 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