如何将带文本的链接写入剪贴板，粘贴时保留链接与文本属性？

要实现写入剪贴板的链接内容粘贴后保留跳转属性，不能直接使用navigator.clipboard.writeText()接口，该接口仅支持写入纯文本内容，无法携带超链接这类富文本格式信息，你需要使用支持多格式内容写入的navigator.clipboard.write()接口实现需求，具体方案如下：

实现逻辑 #

同时向剪贴板写入纯文本和HTML格式两种内容，支持富文本解析的目标场景会自动识别HTML内容保留链接跳转能力，纯文本场景会自动降级使用纯文本内容，兼容性更好。

示例代码 #

// 定义内容参数
const linkDisplayText = "This text";
const linkTargetUrl = "https://stackoverflow.com";
const plainContent = `${linkDisplayText} 是一个链接`;
const richContent = `<p><a href="${linkTargetUrl}">${linkDisplayText}</a> 是一个链接</p>`;

// 构造剪贴板数据对象
const clipboardData = [
  new ClipboardItem({
    // 纯文本格式兜底
    "text/plain": new Blob([plainContent], { type: "text/plain" }),
    // HTML格式保留链接属性
    "text/html": new Blob([richContent], { type: "text/html" })
  })
];

// 写入剪贴板
navigator.clipboard.write(clipboardData)
  .then(() => console.log("内容写入剪贴板成功"))
  .catch(err => console.error("写入失败：", err));

注意事项 #

• 剪贴板接口仅支持在安全上下文环境调用，也就是HTTPS协议站点或者本地localhost调试环境
• 绝大多数浏览器要求剪贴板写入操作必须在用户主动触发的交互回调中执行（比如按钮点击事件的回调函数），避免恶意站点静默篡改用户剪贴板内容
• 粘贴后是否保留跳转属性取决于目标位置是否支持富文本解析，富文本编辑器、支持格式的聊天输入框等场景会保留跳转能力，纯文本输入框会自动展示纯文本内容

内容的提问来源于stack exchange，提问作者Pichler