JavaScript：从URL中提取查询参数并实现剪贴板复制功能
在日常的Web开发中，经常需要从当前页面的URL中获取查询参数（Query String），比如用户通过链接携带了一些信息（如订单号、用户ID等）。有时还需要将这些参数一键复制到剪贴板，方便用户分享或调试。本文将从基础开始，介绍如何使用纯JavaScript实现这两个功能，并提供一个完整可用的代码示例。
一、提取URL中的查询参数
查询参数是URL中问号（?）之后的部分，通常以 key=value 的形式出现，多个参数之间用 & 分隔。例如：https://ippipp.com/page?name=张三&age=25 中，查询参数就是 name=张三&age=25。
1. 使用 URLSearchParams API（推荐）
现代浏览器都支持 URLSearchParams 接口，它可以方便地解析查询字符串。我们可以通过 new URLSearchParams(window.location.search) 直接获取当前页面URL中的参数对象，然后再调用 .get() 方法获取具体参数的值。
// 获取当前页面URL的查询参数对象
const params = new URLSearchParams(window.location.search);
// 获取单个参数值
const name = params.get('name');
const age = params.get('age');
// 遍历所有参数
params.forEach((value, key) => {
console.log(`${key}: ${value}`);
});如果参数不存在，.get() 会返回 null。此外，URLSearchParams 还提供了 .has()、.getAll()、.append() 等方法，可以灵活操作。
2. 手动解析（兼容旧浏览器）
在某些老旧浏览器（如 IE）中不支持 URLSearchParams，我们可以通过字符串分割的方式手动解析。下面是一个工具函数：
function getQueryParams(url) {
// 如果没有传入url则使用当前页面URL
url = url || window.location.href;
let queryStr = url.split('?')[1]; // 获取?后面的部分
if (!queryStr) return {};
const result = {};
// 按照&分割
queryStr.split('&').forEach(pair => {
const [key, value] = pair.split('=');
if (key) {
// 对key和value进行解码（处理中文等特殊字符）
result[decodeURIComponent(key)] = value ? decodeURIComponent(value) : '';
}
});
return result;
}
// 使用
const params = getQueryParams();
console.log(params.name); // 输出 '张三'此方法需要自行处理编码解码，并且不支持同名参数的多值情况（实际项目中可通过数组处理）。如果追求兼容性，可以优先使用 URLSearchParams，再降级到手动解析。
二、将参数复制到剪贴板
复制文本到剪贴板通常使用 navigator.clipboard.writeText() 方法。这是一个异步操作，返回一个 Promise。在调用前需要确保页面处于“安全上下文”（HTTPS 或 localhost），并且必须由用户手势触发（如点击事件）。
async function copyToClipboard(text) {
try {
// 写入剪贴板
await navigator.clipboard.writeText(text);
console.log('复制成功:', text);
} catch (err) {
console.error('复制失败:', err);
// 降级方案：使用 document.execCommand('copy')
fallbackCopy(text);
}
}
// 兼容旧版本的降级方案
function fallbackCopy(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed'; // 避免滚动条出现
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand('copy');
console.log('降级复制成功');
} catch (e) {
console.error('降级复制失败');
}
document.body.removeChild(textarea);
}注意：document.execCommand('copy') 已被废弃，但作为兼容方案仍有价值。建议优先使用 navigator.clipboard.writeText()，并在捕获错误后执行降级。
三、完整示例：一键复制URL参数
下面我们结合提取参数和复制功能，实现一个完整的按钮点击示例。当用户点击“复制参数”按钮时，自动提取当前URL中的所有查询参数（拼接为字符串），并复制到剪贴板。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>复制URL查询参数</title>
</head>
<body>
<button id="copyBtn">复制当前参数</button>
<p id="status"></p>
<script>
// 提取参数函数（使用URLSearchParams）
function getParamsString() {
const params = new URLSearchParams(window.location.search);
const pairs = [];
params.forEach((value, key) => {
pairs.push(`${key}=${value}`);
});
return pairs.join('&');
}
// 复制到剪贴板
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
document.getElementById('status').textContent = '复制成功！';
} catch (err) {
// 降级方案
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed';
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand('copy');
document.getElementById('status').textContent = '复制成功（降级方式）';
} catch (e) {
document.getElementById('status').textContent = '复制失败，请手动复制。';
}
document.body.removeChild(textarea);
}
}
// 绑定点击事件
document.getElementById('copyBtn').addEventListener('click', async () => {
const paramsStr = getParamsString();
if (!paramsStr) {
document.getElementById('status').textContent = '当前URL没有查询参数。';
return;
}
await copyToClipboard(paramsStr);
});
</script>
</body>
</html>在这个例子中，我们首先通过 window.location.search 获取当前URL的查询字符串，然后使用 URLSearchParams 将其解析成键值对，再拼接成一个字符串（如 name=张三&age=25）。点击按钮时调用 copyToClipboard 函数进行复制。
四、注意事项
- 安全上下文：
navigator.clipboard.writeText()只能在 HTTPS 或 localhost 环境下使用，否则会抛出异常。建议在开发时使用 localhost 测试。 - 用户手势触发：复制操作必须由用户的点击、触摸等明确行为触发，不能在页面加载时自动执行。
- 参数编码：从
URLSearchParams提取的值已经是解码后的字符串（如中文正常显示）。如果手动解析，需要调用decodeURIComponent()解码。 - 兼容性：
URLSearchParams在 IE 中完全不支持，请根据项目需求决定是否使用 polyfill 或手动解析方案。 - 同名参数：如果URL中有多个同名参数（如
?id=1&id=2），URLSearchParams.get()只会返回第一个值，而.getAll()可以获取所有值。在拼接时可以根据需要选择使用。
五、总结
本文介绍了如何用 JavaScript 从 URL 中提取查询参数，以及如何将文本复制到剪贴板。通过 URLSearchParams 可以高效、安全地解析参数；通过 navigator.clipboard 可以实现现代剪贴板操作。两者结合可以轻松实现“一键复制当前URL参数”这样的实用功能。希望这篇文章能帮助你在项目中高效地处理查询参数与剪贴板交互。