如何通过JavaScript复制带有超链接的HTML内容到剪贴板以实现富文本粘贴

const copySelectedText = () => {
  // 获取当前选中的文本内容
  const selectedText = window.getSelection().toString();
  if (selectedText) {
    navigator.clipboard.writeText(selectedText)
      .then(() => {
        console.log('纯文本已成功复制到剪贴板:', selectedText);
        // 可以在这里添加用户反馈，如提示消息
      })
      .catch(err => {
        console.error('复制纯文本失败:', err);
        // 处理错误，例如用户拒绝访问剪贴板
      });
  } else {
    console.warn('没有选中的文本内容。');
  }
};

document.addEventListener("copy", e => {
  // 获取当前选中的纯文本
  const selectedText = window.getSelection().toString();
  // 设置剪贴板数据为纯文本
  e.clipboardData.setData("text/plain", selectedText);
  // 阻止浏览器默认的复制行为
  e.preventDefault();
  console.log('已强制复制纯文本:', selectedText);
});

/**
 * 获取当前选中的HTML内容
 * @returns {string} 选中的HTML字符串
 */
function getSelectionHtml() {
  let html = "";
  const sel = window.getSelection();
  if (sel.rangeCount > 0) {
    const container = document.createElement("div");
    for (let i = 0; i < sel.rangeCount; ++i) {
      container.appendChild(sel.getRangeAt(i).cloneContents());
    }
    html = container.innerHTML;
  }
  return html;
}

document.addEventListener("copy", e => {
  const selectedText = window.getSelection().toString();
  const selectedHtml = getSelectionHtml();

  if (selectedHtml) {
    // 设置剪贴板数据为HTML格式，以保留格式和超链接
    e.clipboardData.setData("text/html", selectedHtml);
    // 同时提供纯文本版本，以兼容不支持HTML粘贴的应用程序
    e.clipboardData.setData("text/plain", selectedText);
    // 阻止浏览器默认的复制行为
    e.preventDefault();
    console.log('已复制带格式的HTML内容:', selectedHtml);
  } else if (selectedText) {
    // 如果没有HTML内容（例如只选中了纯文本），则只复制纯文本
    e.clipboardData.setData("text/plain", selectedText);
    e.preventDefault();
    console.log('已复制纯文本:', selectedText);
  }
});

<div>
  <p>这是一段随机文本，仅用于填充空间。它的<b>唯一目的</b>是创建页面内容的假象。<span style="color: #00F;"><b><i>这仍是随机文本</i></b></span>，仅用于填充空间。它的唯一目的是创建页面内容的假象。</p>
  <p>请点击 <a href="https://www.example.com/ticket/12345" id="ticketLink">票号: 12345</a> 查看详情。</p>
</div>

<button onclick="copyTicketNumber()">复制票号 (带链接)</button>
<br>
<textarea style="width: 40em; height: 5em;" placeholder="请在此处粘贴以测试"></textarea>

// 假设上面的 document.addEventListener("copy", ...) 已经存在并处理了 text/html 和 text/plain

function copyTicketNumber() {
  const ticketLinkElement = document.getElementById('ticketLink');
  if (ticketLinkElement) {
    // 创建一个范围并选择票号链接元素
    const range = document.createRange();
    range.selectNodeContents(ticketLinkElement); // 选择元素内部内容

    const selection = window.getSelection();
    selection.removeAllRanges(); // 清除现有选择
    selection.addRange(range);   // 添加新的选择范围

    try {
      // 尝试执行复制命令，这将触发我们的 copy 事件监听器
      const success = document.execCommand('copy');
      if (success) {
        console.log('票号及其链接已复制到剪贴板。');
      } else {
        console.warn('复制命令执行失败，可能需要用户手动操作。');
      }
    } catch (err) {
      console.error('执行复制命令时发生错误:', err);
    } finally {
      // 清除选择，避免干扰用户
      selection.removeAllRanges();
    }
  } else {
    console.error('找不到票号链接元素。');
  }
}