如何用jQuery实现点击按钮识别锚点并复制对应URL到剪贴板

下面是完整的jQuery实现代码，直接引入到页面中即可生效：

// 确保DOM加载完成后执行
$(function() {
  // 绑定所有复制按钮的点击事件
  $('.clipboard-guide').on('click', function() {
    // 1. 获取当前章节对应的h3锚点ID
    const $chapter = $(this).closest('.guides-chapter');
    const anchorId = $chapter.find('h3').attr('id');
    if (!anchorId) return;

    // 2. 生成不带旧锚点的基础URL
    const baseUrl = window.location.origin + window.location.pathname + window.location.search;
    // 拼接新的完整URL
    const fullUrl = `${baseUrl}#${anchorId}`;

    // 3. 写入剪贴板
    navigator.clipboard.writeText(fullUrl).then(() => {
      // 4. 对应位置插入复制成功提示
      $chapter.find('.copied').text('URL copied');
      // 可选：3秒后自动清空提示，避免页面堆积提示文本
      setTimeout(() => {
        $chapter.find('.copied').text('');
      }, 3000);
    }).catch(err => {
      console.error('复制失败：', err);
    });
  });
});

核心逻辑说明：

• 识别锚点：通过closest('.guides-chapter')定位到当前章节容器，再查找子元素h3的id，相比直接查找同级元素兼容性更强，即使后续HTML结构调整了元素顺序也不会失效。
• 清理旧锚点：直接拼接origin（域名端口）、pathname（路径）、search（查询参数），完全避开原URL的hash（锚点）部分，不需要做复杂的字符串替换，从根源上避免旧锚点残留。
• 剪贴板写入：采用标准的navigator.clipboardAPI实现文本写入，兼容所有现代浏览器。
• 成功提示：在当前章节容器内查找.copied元素写入提示，保证提示和点击的按钮一一对应，不会出现提示写错位置的问题。

内容的提问来源于stack exchange，提问作者Kai