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 头尾增加<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();
}

搞定。 

点击“复制”后，粘贴出来的内容就是：

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

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

其它更详细的内容可以查阅 MDN：

Selection对象

Selection - Web API 接口参考 | MDN

Range 对象

Range - Web API 接口参考 | MDN