如何使用 JavaScript 将超文本链接复制到剪贴板并保留其链接属性

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>

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