JavaScript 练手小技巧：十几行代码搞定点击复制指定标签内容

很久没有更新博客了，有2个多月了快，主要是期末了，事情太多了~最后1个月，几乎都是天天加班中过的。尤其是最后两周，就没有在晚上11点离开办公室的。

唉~~

现在放假了，难得休息下，还是要好好给自己充充电，看点自己喜欢的东西，写点博客，免得荒废了技术。

-----------------------------------------------

在网上经常看到一些点击复制一段文本的内容，比如 bootcss上的点击复制文件地址。

 这是怎么做到的？

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

HTML代码：

<span id="text">这个是一个很重要的文123字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 头尾增加