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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

版权小尾巴

前提：假定所选择的字符串长度大于等于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);
  }
};
</script>

演示

浏览器兼容性

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

相关问答

Q1: 复制代码功能

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

<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()因为安全问题已经废弃，不适合长期使用