最近遇到了一个情况：使用Edge浏览器上网，发现某个网址不错，于是从地址栏复制，粘贴到WPS中，不料粘贴的是一个超链接，而不是网址本身，需要选择“只粘贴文本”才能将URL本身放进来。如下图所示：

复制网址：

粘贴效果：

接着我试了一下Chrome，发现正常，只粘贴了URL文本。于是引发了我的思考，会不会是Edge在复制网址的时候做了一些额外的处理方式？

01

—

尝试从浏览器设置中去寻找是否有相关选项，果然有收获，在“共享、复制和粘贴”这一设置项中，就有关于URL复制的方式：

之前默认选中的就是“链接”这一项，难怪粘贴到某些app里显示的是链接的形式。切换成“纯文本”模式后就正常了。

点击“了解更多信息”，即可查看Microsoft官网对Edge浏览器复制粘贴URL的优化，讲解的很详细：

（https://support.microsoft.com/en-us/microsoft-edge/improved-copy-and-paste-of-urls-in-microsoft-edge-d3bd3956-603a-0033-1fbc-9588a30645b4）

剪贴板研究

虽然Edge复制URL的时候选择了链接的形式，但是粘贴在不同的app中结果还不太一样。例如粘贴在微信聊天输入框、记事本中是文本形式，而粘贴在WPS、公众号图文消息编辑区，就是链接形式。所以我想了解到底在剪贴板中的原始内容是什么，于是计划通过JS的剪贴板API去一探究竟。

JS操作剪贴板有多种形式，目前最modern的方式是使用 navigator.clipboard API，它有read()和readText()两种方法可读取剪贴板。其中readText()就是直接读取文本，不论是否带有格式。而read()就是读取原始内容，需要做一些处理来打印输出其内容。

<button type="button" onclick="getClipBoard()">获取剪贴板内容</button>

async function getClipBoard() {    const items = await navigator.clipboard.read();    const textBlob = await items[0].getType("text/html");    const text = await (new Response(textBlob)).text();    console.log(text)}

在getType中写成text/html的方式，即可获取到剪贴板中的超链接内容：

这样就验证了Edge复制URL的主要机制了。

注意事项

关于navigator.clipboard 操作剪贴板，有两个注意事项：

1、必须由用户手动操作触发，不能将代码直接在console中执行，不然会报错

Uncaught (in promise) DOMException: Document is not focused.

2、需要在安全的网络环境中才能使用，包括 localhost 和 https 协议的站点。如果用IP地址或http协议访问的页面，是无法访问到剪贴板对象的，此时 navigator.clipboard 为 undefined.