本文介绍了JS与剪贴板相关的底层功能。
1. 背景
事情的起因是这样的，在从上面找了个别人的文章复制了一些内容，当复制的内容超过了一定字数的时候，就发现粘贴出来的东西多了一些内容，如下图所示。
1.png
由于最近刚好在研究JS的复制剪切，于是对这个功能进行深入研究。
2. document.execCommand
之前使用了一个插件Clipboard.js实现了JS的复制功能，研究之后发现是调用HTML5的document.execCommand，才能实现浏览器端的复制功能。
语法
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
返回值
一个 Boolean，如果是 false则表示操作不被支持或未被启用。
参数
我们这里只需要用到一些简单的功能，因此只使用第一个参数aCommandName就可以了。
一个 DOMString，命令的名称。可用命令列表请参阅文档。
命令
这里简单介绍一些用到的命令。
copy
拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。
cut
剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。
paste
在光标位置粘贴剪贴板的内容，如果有被选中的内容，会被替换。剪贴板功能必须在 user.js 配置文件中启用。
从上面的介绍可以看出，复制功能都是对当前选中内容进行的相关操作，这都需要能获取到当前选中的对象，因此找到了一个新的API。
3. Window.getSelection
这个方法是对用户选择的文本范围进行的一些操作。
概述
返回一个 Selection对象，表示用户选择的文本范围或光标的当前位置。
语法
const selection = window.getSelection() ;
- selection
是一个Selection对象。 如果想要将selection转换为字符串，可使用String.toString()方法。
示例
function foo() {
let selObj = window.getSelection();
console.log(selObj);
let selectedText = selObj.toString();
let selRange = selObj.getRangeAt(0);
// 其他代码
}
-
selObj是一个Selection对象。 -
selectedText是一个字符串（被选中的文本）。
4. 实现思路
- 首先要响应浏览器的
copy事件，使用e.preventDefault()阻止默认的复制事件。 - 在响应浏览器的
copy事件时，通过Window.getSelection()获取到当前选中内容。然后使用document.createRange()保存下此时用户选中区的状态，以供后面使用。 - 创建一个