換了工作每天加班加得焦頭爛額的，今天一看簡書，上一次更新居然是兩個月前了……想想別的大佬，一天再怎么忙也會拿出點時間來學(xué)習(xí)分享，對比起來自慚形穢，果然菜鳥和大佬之間是有差別的……
在工作中遇到了一個需求，“我想做個copy按鈕，用戶一點擊就能復(fù)制目標(biāo)內(nèi)容，不用手動選擇目標(biāo)內(nèi)容進(jìn)行復(fù)制”……行唄，用戶都已經(jīng)懶到這種地步了，那選擇復(fù)制的事情我來幫用戶做了，用戶只管點個按鈕就好了。

富文本編輯：document.execCommand

當(dāng)一個HTML文檔切換到設(shè)計模式時，document暴露 execCommand 方法，該方法允許運行命令來操縱可編輯內(nèi)容區(qū)域的元素。
—— 來自MDN

document.execCommand一般用于富文本編輯，常用的copy、cut、delete操作我們都可以用document.execCommand來實現(xiàn)，需要注意的是，該命令操作的是“可編輯內(nèi)容區(qū)域”，那么什么是“可編輯內(nèi)容區(qū)域”呢，MDN上是這么說的：

全局屬性 contenteditable 是一個枚舉屬性，表示元素是否可被用戶編輯。 如果可以，瀏覽器會修改元素的部件以允許編輯。

那好的，input和textarea我知道可以編輯，那么我將一個div也設(shè)置成contenteditable="true"呢？哇塞，div也變成可以編輯的了！

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

那么我是否可以不局限于任何標(biāo)簽，想在復(fù)制哪個就給哪個的contenteditable設(shè)置為true呢？然而事情并不會那么簡單～MDN上沒告訴我們的是，目標(biāo)元素不僅要可編輯，還要可選擇啊……

<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能選擇，現(xiàn)在能復(fù)制上了，完美?？墒切枨蠓礁嬖V你，我不想放個輸入框在那里啊，就是個正常的文字顯示行不行，于是你琢磨著，把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>

咦，怎么不生效？不應(yīng)該啊，不能夠?。?？胖友，請別忘了，隱藏了的是無法select到的……

進(jìn)階版：

既然隱藏不行，那我就生成個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>

現(xiàn)在總算是能復(fù)制頁面任意標(biāo)簽內(nèi)的內(nèi)容了吧，于是放心的交給需求方，需求方：你這個功能我試了一下，只能復(fù)制文字啊，我還想連圖片一起復(fù)制呢……得，需求方就是大爺，想要啥我就給你整啥

range

Range 接口表示一個包含節(jié)點與文本節(jié)點的一部分的文檔片段。

<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
            // 用于表示文檔中特定的一段文本，例如在按住鼠標(biāo)選中頁面上的內(nèi)容時，創(chuàng)建出的就是一個較為典型的 TextRange。
            range = document.body.createTextRange();
            range.moveToElementText(node); //使區(qū)域包含指定元素的文本。只能用于 Element 對象。
            range.select();
            document.execCommand('copy');
        } else if (window.getSelection) {
            // Selection 對象表示用戶選擇的文本范圍或插入符號的當(dāng)前位置。它代表頁面中的文本選區(qū)，可能橫跨多個元素。
            var selection = window.getSelection();
            range = document.createRange();
            range.selectNodeContents(node); //使 Range 包含某個節(jié)點的內(nèi)容。
            selection.removeAllRanges(); //將所有的區(qū)域都從選區(qū)中移除。
            selection.addRange(range); //一個區(qū)域（Range）對象將被加入選區(qū)。
            document.execCommand('copy');
        } else {
            console.log('wrong');
        }
    }
</script>

哇，圖片也能復(fù)制了～這個時候，需求方大爺說，你這功能好是好，就是IE9以下不能使用啊……麻煩大爺也做個人吧

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