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

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

富文本编辑：document.execCommand

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

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

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

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

  edit me

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

copy

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

this is copy content

copy

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

进阶版：

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

this is the newwwww copy content
copy

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

range

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

    
this is the copy words and image
    

copy words and image

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

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