Как скопировать гиперссылку в буфер обмена с помощью JavaScript и сохранить ее свойства ссылки

Question

Мне было интересно, как скопировать ссылку с ее HREF и текстом, например, у нас есть такой тег:

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

Так что, в принципе, я прекрасно знаю, как скопировать что-то в буфер обмена,моя текущая работа заключается в создании невидимой и маленькой текстовой области, в которую я помещаю текст, который я хочу скопировать, затем я выбираю с помощью js весь текст внутри текстовой области и выполняю команду копирования следующим образом:

document.execCommand('copy');

Хорошо, поэтому я могу без проблем копировать необработанный текст, я могу скопировать ссылку в буфер обмена, но как только я вставлю его, ссылка будет просто текстом, а не активной ссылкой, по которой можно щелкнуть, чтобы перейти к месту назначения.

Я знаю, почему это происходит, когда я помещаю ссылку в текстовую область, она перестает быть ссылкой, но я не знаю другого способа сделать это, не разорвав ссылку.

Итак, однаждыЯ копирую ссылку, которая мне не нужна, чтобы изменить ее с помощью js или изменить ссылку и т. Д., Как только я скопирую ссылку, я хочу вставить ее на другую страницу, где я не могу контролироватьи я хочу, чтобы моя ссылка оставалась ссылкой, а не простым текстом.

Буду признателен за любую помощь.Из-за проекта, над которым я работаю, я не могу передать библиотеки для этого, мне нужен какой-то нативный обходной путь 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>

РЕДАКТИРОВАТЬ: я заметил, что я пропустил большую дискуссию о ... электронной почте?но я ответил на вопрос, как его спросили - как скопировать фактическую ссылку в буфер обмена.