如何提取URL子串填充输入框并实现点击复制到剪贴板功能

仅需修改index.js文件代码即可，原有HTML结构、CSS样式无需调整，可同时满足两项需求：

• 页面加载时自动从当前访问URL提取code参数对应的值，填充到复制输入框
• 点击复制按钮可将输入框内的授权码复制到系统剪贴板，保留原有复制成功的提示动效

修改后的完整index.js代码 #

window.addEventListener('DOMContentLoaded', () => {
    const copyTextWrapper = document.querySelector(".copy-text");
    const codeInput = copyTextWrapper.querySelector("input.text");
    const copyButton = copyTextWrapper.querySelector("button");

    // 提取URL中的code参数值
    const pageUrl = window.location.href;
    let authCode = '';
    // 兼容?code=xxx（标准查询参数格式）和/code=xxx（路径后直接拼接参数格式）两种URL形式
    const codeMatchResult = pageUrl.match(/[?/]code=([^&]+)/);
    if (codeMatchResult?.[1]) {
        authCode = codeMatchResult[1];
        codeInput.value = authCode;
    }

    // 绑定复制按钮点击事件
    copyButton.addEventListener("click", async () => {
        const targetValue = codeInput.value.trim();
        if (!targetValue) return;

        try {
            // 现代浏览器优先使用标准异步剪贴板API，无选中输入框的突兀效果
            await navigator.clipboard.writeText(targetValue);
        } catch (err) {
            // 旧版本浏览器降级使用execCommand兼容方案
            codeInput.select();
            document.execCommand("copy");
            window.getSelection().removeAllRanges();
        }

        // 触发复制成功提示
        copyTextWrapper.classList.add("active");
        setTimeout(() => {
            copyTextWrapper.classList.remove("active");
        }, 2500);
    })
})

逻辑说明 #

• URL参数提取使用正则匹配，会自动截取code等号后到下一个&符号（或URL结尾）之间的内容，不会把其他多余参数带入输入框
• 剪贴板功能做了全版本兼容：高版本浏览器用官方推荐的标准剪贴板API，体验更好；低版本浏览器自动回退到原有实现，不会出现功能失效问题
• 原有样式、复制成功的气泡提示效果完全保留，不需要额外调整样式文件

测试提示：本地直接双击打开HTML文件时，部分浏览器会限制剪贴板API权限，将页面部署到HTTP/HTTPS服务下访问即可正常使用全部功能。

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