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

Question

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

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

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

document.execCommand('copy');

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

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

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

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

This post is different to the post of How do I copy to the clipboard in JavaScript? I already know how to do that. What I want to know is how is posible to copy a link without losing it's link properties.

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>

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