js实现copy文字、图片的功能

换了工作每天加班加得焦头烂额的，今天一看简书，上一次更新居然是两个月前了……想想别的大佬，一天再怎么忙也会拿出点时间来学习分享，对比起来自惭形秽，果然菜鸟和大佬之间是有差别的……
在工作中遇到了一个需求，“我想做个copy按钮，用户一点击就能复制目标内容，不用手动选择目标内容进行复制”……行呗，用户都已经懒到这种地步了，那选择复制的事情我来帮用户做了，用户只管点个按钮就好了。

富文本编辑：document.execCommand

当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。
—— 来自MDN

document.execCommand一般用于富文本编辑，常用的copy、cut、delete操作我们都可以用document.execCommand来实现，需要注意的是，该命令操作的是“可编辑内容区域”，那么什么是“可编辑内容区域”呢，MDN上是这么说的：

全局属性 contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的部件以允许编辑。

那好的，input和textarea我知道可以编辑，那么我将一个div也设置成contenteditable="true"呢？哇塞，div也变成可以编辑的了！

<div contenteditable="true">
  edit me
</div>

那么我是否可以不局限于任何标签，想在复制哪个就给哪个的contenteditable设置为true呢？然而事情并不会那么简单～MDN上没告诉我们的是，目标元素不仅要可编辑，还要可选择啊……

<input id="aim" type="text" value="this is copy content">
<buttonv onclick="selectText()">copy</button>
<script>
    function selectText(){
        var aim = document.getElementById('aim');
        aim.select();
        document.execCommand('copy')
    }
</script>

好的，那么input和textarea能选择，现在能复制上了，完美。可是需求方告诉你，我不想放个输入框在那里啊，就是个正常的文字显示行不行，于是你琢磨着，把input隐藏起来……

<div>this is copy content</div>
<input id="aim" type="text" value="this is copyyyyyy content" style="display: none;">
<button onclick="selectText()">copy</button>
<script>
    function selectText(){
        var aim = document.getElementById('aim');
        aim.select();
        document.execCommand('copy')
    }
</script>

咦，怎么不生效？不应该啊，不能够啊？？胖友，请别忘了，隐藏了的是无法select到的……

进阶版：

既然隐藏不行，那我就生成个dom来接收一下呗

<div id="aim1">this is the newwwww copy content</div>
<button onclick="selectText()">copy</button>
<script>
    function selectText(){
        var aim = document.getElementById("aim1");
        var input = document.createElement('input');
        input.value = aim.innerHTML;
        input.style.position = 'fixed';
        input.style.top = '-10vh';
        input.style.left = '0';
        document.body.appendChild(input)
        input.select();
        document.execCommand('copy');
        document.body.removeChild(input);
    }
</script>

现在总算是能复制页面任意标签内的内容了吧，于是放心的交给需求方，需求方：你这个功能我试了一下，只能复制文字啊，我还想连图片一起复制呢……得，需求方就是大爷，想要啥我就给你整啥

range

Range 接口表示一个包含节点与文本节点的一部分的文档片段。

<div id="aimBlock">
    <p>this is the copy words and image</p>
    <img src="https://upload-images.jianshu.io/upload_images/19391290-12d7d73799b427c0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">
</div>
<button onclick="selectBlock()">copy words and image</button>
<script>
    function selectBlock() {
        var node = document.getElementById('aimBlock');
        var range;
        if (document.body.createTextRange) { // IE
            // 用于表示文档中特定的一段文本，例如在按住鼠标选中页面上的内容时，创建出的就是一个较为典型的 TextRange。
            range = document.body.createTextRange();
            range.moveToElementText(node); //使区域包含指定元素的文本。只能用于 Element 对象。
            range.select();
            document.execCommand('copy');
        } else if (window.getSelection) {
            // Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。
            var selection = window.getSelection();
            range = document.createRange();
            range.selectNodeContents(node); //使 Range 包含某个节点的内容。
            selection.removeAllRanges(); //将所有的区域都从选区中移除。
            selection.addRange(range); //一个区域（Range）对象将被加入选区。
            document.execCommand('copy');
        } else {
            console.log('wrong');
        }
    }
</script>

哇，图片也能复制了～这个时候，需求方大爷说，你这功能好是好，就是IE9以下不能使用啊……麻烦大爷也做个人吧

参考文档：
1、textRange
2、Range
3、Selection
4、https://stackoverflow.com/questions/985272/selecting-text-in-an-element-akin-to-highlighting-with-your-mouse