如何在不丢失链接属性的情况下将超文本链接复制到剪贴板

Question

我一直想知道如何复制带有 HREF 和文本的链接，例如我们有这样的标签：

<a href="http://mysite.sample/?creds=creds">Quick Access to the website</a>

所以基本上我完全知道如何将某些内容复制到剪贴板中，我目前的工作包括创建一个不可见的小文本区域，在其中放置我想要复制的文本，然后我用 js 选择文本区域内的所有文本并执行像这样的复制命令：

document.execCommand('copy');

好的，所以我可以毫无问题地复制原始文本，我可以将链接复制到我的剪贴板中，但是一旦我粘贴它，链接就只是文本而不是可以单击以转到其目的地的活动链接。

我知道为什么会这样，一旦我将链接放入文本区域，它就不再是链接了，但我不知道在不破坏链接的情况下执行此操作的任何其他方法。

所以，一旦我复制了链接，我就不需要用 js 修改它或更改 href 或其他任何东西，一旦我复制了链接，我想将它粘贴到我无法控制的不同页面，我想要我的链接仍然是一个链接，而不是一个简单的文本。

任何帮助将不胜感激。 由于我正在进行的项目，我无法依赖库来执行此操作，我需要某种本机 js 解决方法

这篇文章不同于 如何用 JavaScript 复制到剪贴板？ 我已经知道怎么做了。我想知道的是如何在不丢失链接属性的情况下复制链接。

Answer 1

A

<textarea>

只能包含文本。您需要复制实际链接。试试这个：

const onClick = evt => {
  const link = document.querySelector('a');
  const range = document.createRange();
  range.selectNode(link);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);

  const successful = document.execCommand('copy');
};

document.querySelector('button').addEventListener('click', onClick);

This is an <a href="https://example.com">Example</a>.

<button>Copy</button>

编辑：我注意到我错过了关于……电子邮件的大量讨论？但我回答了问题 - 如何将实际链接复制到剪贴板。

Answer 2

这是使用剪贴板界面的另一种方法（带有逐步注释）。

// Get the html from the portion of the page to copy (in this specific case your link)
const HTML=document.querySelector("a").outerHTML;

// Create a blob from the html
const TYPE="text/html";
const BLOB=new Blob([HTML], {type:TYPE});

// Copy the blob to the clipboard
navigator.clipboard.write([new ClipboardItem({[TYPE]: BLOB})])

// Optional but recommended. Check the result of the async operation
.then(
  ()=>console.log("copied"),
  (err)=>console.log(err)
);

请注意，const HTML 可以从文档中提取，也可以动态创建。所以你可以这样做：

const HTML="<a href='http://mysite.sample/?creds=creds'>Quick Access to the website</a>";