【技巧】如何高亮选择和拷贝网页内容保存到word中

一、需求分析

近期有小伙伴使用影刀实现选择网页中指定区域或元素范围内的文本、图片等内容，粘贴到word或其他富文本编辑器中（例如发送邮件的编辑器），之前有做过一个使用pypandoc库将网页源码转成docx格式的方法，但是使用场景比较局限，灵活度不是很高。

https://www.yingdao.com/community/detaildiscuss?id=5f68ec64-a9df-475d-b6e5-4a882a46d244

能否直接在网页上操作，模拟人用鼠标高亮选取目标区域，然后再复制粘贴？思路应该是可行的，但是如果直接使用定位到元素开始位置，鼠标长按拖动圈选区域，再执行复制粘贴。逻辑是可行的，但是操作比较繁琐，出错率肯定很高，果断放弃模拟人操作的这个方案。

要不请教下chatGPT4，看能不能用JS实现吧。

哈哈！看来真的可以，那么参考这个方案，使用影刀的“执行JS脚本”指令来实现这个功能。

二、实现方法

实现的流程如下：

捕获网页中目标元素，然后执行下面的js脚本，即可对目标网页元素区域内的内容进行高亮选择和拷贝。（跨域场景应该不支持）

function (element, input) {

        var range = document.createRange(); // 创建一个范围对象

        range.selectNodeContents(element); // 设置范围以包含元素的内容

        var selection = window.getSelection();  // 获取当前的选择对象

        selection.removeAllRanges(); // 清除任何现有的选择

        selection.addRange(range); // 选择目标区域内容

        document.execCommand('copy');// 执行拷贝操作

        selection.removeAllRanges();// 清除选择区域
}

三、演示动画