网站怎么实现点击复制功能？几行js代码搞定！

浏览网站时，我们经常看到一些点击复制一段文本的内容，比如 点击复制网页文件地址。

这个功能是怎么实现的呢?

其实需求不复杂的话，很简单。主要用到的就是 window的 selection 对象和Range对象，以及执行操作系统copy命令的代码。

HTML代码：

<span id="text">blog.lingruofeng.com</span>
<a href="javascript:void(0)" id="copy">点击复制</a>

JS代码：

// 获取标签
let copy = document.getElementById("copy");
let text = document.getElementById("text");
copy.onclick = function(){
    // 创建 Selection 对象，表示用户选择的文本范围或光标当前位置。
    let selection = window.getSelection();
    // 去掉所有的被选择范围。
    selection.removeAllRanges();
    // 重新创建选择范围
    let range = document.createRange();
    // 更改text标签内容，增加自定义的内容。这里模仿 bootcss 头尾增加<script>标签
    // 利用模版字符串，更方便。
    let temp = text.innerHTML.trim();
    text.innerHTML = `&lt;script&gt;${temp}&lt;\/script&gt;`;
    // 选择的内容来自指定节点
    range.selectNode(text);  // 先选中
    selection.addRange(range);
    // 执行 “copy” 命令
    document.execCommand("copy");
    text.innerHTML = temp;   // 让文本恢复原样
    // 去掉所有的被选择范围
    selection.removeAllRanges();
}

搞定。

这里要说明的是，最后一步一定要再次去掉所有已被选择的范围。否则，文本会被选中。

而我们希望的是，点击“复制”后，就像什么事都没发生的一样。因此，最后要再一次去掉所有已被选择的范围。