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

问题描述

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

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

基本上我非常清楚如何将内容复制到剪贴板中，我目前的解决办法是创建一个不可见的小文本区域，在其中放置我想要复制的文本，然后使用js选择文本区域内的所有文本，并执行复制命令，如下所示：

document.execCommand('copy');

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

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

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

如有任何帮助，我们将不胜感激。 由于我正在处理的项目，我不能依赖于库来做到这一点，我需要一些本机js解决办法

本帖子与如何在JavaScript中复制到剪贴板的帖子不同？我已经知道如何做到这一点。我想知道的是如何才能在不丢失链接属性的情况下复制链接。

推荐答案

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>