如何使用 JavaScript 將超文本鏈接復制到剪貼板並保留其鏈接屬性

Question

我一直想知道如何復制帶有 HREF 和文本的鏈接，例如我們有這樣的標簽：

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

所以基本上我完全知道如何將某些內容復制到剪貼板中，我目前的工作包括創建一個不可見的小文本區域，在其中放置我想要復制的文本，然后我用 js 選擇文本區域內的所有文本並執行復制命令如下：

document.execCommand('copy');

好的，所以我可以毫無問題地復制原始文本，我可以將鏈接復制到剪貼板中，但是一旦我粘貼它，鏈接只是文本，而不是可以單擊以轉到其目的地的活動鏈接。

我知道為什么會發生這種情況，一旦我將鏈接放入 textarea 中，它就不再是鏈接了，但我不知道在不破壞鏈接的情況下有任何其他方法可以做到這一點。

所以，一旦我復制了鏈接，我就不需要用 js 修改它或更改 href 或其他任何東西，一旦我復制了鏈接，我想將它粘貼到我無法控制的不同頁面中，我希望我的鏈接到仍然是一個鏈接，而不是一個簡單的文本。

任何幫助，將不勝感激。 由於我正在從事的項目，我無法通過庫來執行此操作，因此我需要某種本機 js 解決方法

這篇文章與如何在 JavaScript 中復制到剪貼板？ 我已經知道該怎么做。 我想知道的是如何在不丟失鏈接屬性的情況下復制鏈接。

Answer 1

<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>

編輯：我注意到我錯過了關於...電子郵件的大量討論？ 但我按要求回答了這個問題 - 如何將實際鏈接復制到剪貼板。