如何实现点击按钮复制GET表单查询参数至剪贴板并获取GET查询值？

阿华AIGC实验室

2026-5-19

没问题，这两个需求其实都挺容易实现的，我分两部分给你讲清楚：

一、获取GET查询参数的值

现代浏览器里用URLSearchParams就能轻松搞定，不用自己去手动解析URL字符串。举个实际例子：
假设当前页面URL是https://your-site.com?share_code=abc123&from=jkaw，要获取share_code的值，代码可以这么写：

// 获取当前URL的查询参数部分
const params = new URLSearchParams(window.location.search);
// 获取指定参数的对应值
const shareCode = params.get('share_code'); // 这里会返回"abc123"

// 如果需要遍历所有参数，也可以这么做
params.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

要是你需要兼容非常老的浏览器（比如IE11及以下），可以自己写个简单的解析函数，但现在绝大多数场景下URLSearchParams完全够用了。

二、将参数值复制到剪贴板（带点击按钮）

现在浏览器支持的navigator.clipboard API是最安全可靠的复制方式，搭配按钮的点击事件就能实现需求。我给你写个完整的可运行示例：

1. HTML结构（包含按钮和显示参数的黑框）

<!-- 黑框用来展示要复制的参数值 -->
<pre id="paramDisplay" style="background: #2d2d2d; color: #f0f0f0; padding: 10px; border-radius: 4px;">abc123</pre>
<!-- 复制按钮 -->
<button id="copyBtn">复制参数到剪贴板</button>

2. JavaScript逻辑

// 获取页面元素
const copyBtn = document.getElementById('copyBtn');
const paramDisplay = document.getElementById('paramDisplay');

// 绑定按钮点击事件
copyBtn.addEventListener('click', async () => {
  try {
    // 方式一：直接复制从URL获取到的查询参数值
    const params = new URLSearchParams(window.location.search);
    const shareCode = params.get('share_code');
    await navigator.clipboard.writeText(shareCode);
    
    // 方式二：如果要复制黑框里显示的内容，替换成下面这行
    // await navigator.clipboard.writeText(paramDisplay.textContent.trim());
    
    alert('复制成功！');
  } catch (err) {
    console.error('复制失败:', err);
    alert('复制失败，请手动复制');
  }
});

这里有两个小细节要注意：