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

Question

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

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

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

document.execCommand('copy');

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

我知道为什么会这样，一旦我将 link 放入文本区域，它就不再是 link 但我不知道在不破坏link.

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

如有任何帮助，我们将不胜感激。由于我正在处理的项目，我无法依赖库来执行此操作，我需要某种本机 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> 只能包含文本。您需要复制一个实际的 link。试试这个：

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>

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

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

How to copy a HyperText link into clipboard with JavaScript and preserve its link properties

html

javascript

clipboard