需求背景：

在搭建店鋪商品搬家之類的流程時(shí)，經(jīng)常遇到要將詳情頁(yè)完整地復(fù)制下來(lái)、粘貼到刊登界面的詳情描述輸入框內(nèi)。正常來(lái)說(shuō)通過(guò)獲取元素文本和圖片即可，但是原來(lái)的頁(yè)面格式卻全部都丟失了。

目前的問(wèn)題就是，如何完整地把格式和內(nèi)容都拷貝粘貼到刊登頁(yè)面中。

詳情頁(yè)如下：

獲取元素文本內(nèi)容效果如下：

使用本文的方式，效果如下：

思路：

比較簡(jiǎn)單的方式是，模擬人工的方式選中待復(fù)制的區(qū)域，按下CTRL+C進(jìn)行拷貝，到刊登界面在按下CTRL+V進(jìn)行粘貼，即可完整地把格式和內(nèi)容都拷貝過(guò)來(lái)了。

復(fù)制粘貼都容易，問(wèn)題是如何讓影刀控制鼠標(biāo)在網(wǎng)頁(yè)中選中需要復(fù)制的那塊區(qū)域呢？若是通過(guò)識(shí)別元素區(qū)域的坐標(biāo)位置控制鼠標(biāo)進(jìn)行框選，也不是不行，但是很難做到穩(wěn)定。

最終想到，如果把其他網(wǎng)頁(yè)元素全部刪除，僅保留要復(fù)制的元素，CTRL+A全選復(fù)制即可！

實(shí)現(xiàn)方式：

1、拷貝待復(fù)制的區(qū)域元素

2、刪除整個(gè)網(wǎng)頁(yè)的內(nèi)容（網(wǎng)頁(yè)上基本都是使用div標(biāo)簽來(lái)構(gòu)建各個(gè)元素，所以把div標(biāo)簽全部刪除即可清空網(wǎng)頁(yè)上的內(nèi)容，若有特殊情況再調(diào)整代碼，邏輯是相通的）

3、重新寫(xiě)入第一步拷貝的區(qū)域元素

此功能使用js實(shí)現(xiàn)，具體代碼如下：

// -------------------------------獲取元素源碼---------------------------------- // 假設(shè)你要獲取class為'myElement'的元素的HTML源碼 var element = document.getElementsByClassName('myElement'); var htmlSourceCode = element[0].outerHTML; console.log(htmlSourceCode) // 假設(shè)你要獲取id為'myElement'的元素的HTML源碼，就改用以下這段代碼 var element = document.getElementById('sugarea'); var htmlSourceCode = element.outerHTML; console.log(htmlSourceCode) // ------------------------------刪除所有div--------------------------------------- // 獲取文檔中所有的<div>元素 var divElements = document.getElementsByTagName('div'); // 遍歷<div>元素?cái)?shù)組 while (divElements.length > 0) {  // 刪除第一個(gè)<div>元素  divElements[0].parentNode.removeChild(divElements[0]);  // 重新獲取更新后的<div>元素?cái)?shù)組，因?yàn)槊看蝿h除后數(shù)組會(huì)變化  divElements = document.getElementsByTagName('div'); } // ---------------------------------插入元素----------------------------------- // 已經(jīng)有的HTML內(nèi)容 var divHtml = htmlSourceCode // 找到要插入的容器，這里以body為例 var container = document.body; // 直接修改或添加HTML內(nèi)容到容器的開(kāi)始 container.innerHTML = divHtml + container.innerHTML; // 這樣做會(huì)將內(nèi)容添加到開(kāi)頭 // 若要添加到末尾部，直接使用 = container.innerHTML += divHtml;

使用方式：

打開(kāi)需要拷貝詳情內(nèi)容的詳情頁(yè)，影刀內(nèi)調(diào)用“執(zhí)行JS腳本”指令，把上面代碼粘貼進(jìn)指令中，執(zhí)行即可。執(zhí)行完JS腳本之后，網(wǎng)頁(yè)中僅剩下需要拷貝的詳情內(nèi)容，用影刀點(diǎn)擊網(wǎng)頁(yè)中任意位置，輸入Ctrl+A、Ctrl+C即可保留格式復(fù)制了。執(zhí)行JS指令設(shè)置如圖：