从URL中提取特定参数并复制到剪贴板的JavaScript教程

// 假设当前URL是 https://www.example.com/page?code=12345&source=web
const urlParams = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});

// 获取名为 "code" 的参数值
let codeValue = urlParams.code; // 如果URL中有 ?code=12345，则 codeValue 将是 "12345"
console.log(codeValue); // 输出: 12345

// 模拟一个带有查询参数的URL
// 实际应用中，这通常是 window.location.href
const currentUrl = "https://www.example.com/blah/blah?code=12432&other=value"; 
const url = new URL(currentUrl); // 使用URL对象解析URL

const params = new Proxy(new URLSearchParams(url.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});

let extractedCode = params.code; // 获取 'code' 参数的值
console.log("提取到的代码:", extractedCode); // 输出: 提取到的代码: 12432

<div class="wrapper">
  <h1>链接复制工具</h1>
  <p>点击输入框选择文本，或直接点击复制按钮。然后粘贴到右侧区域以验证。</p>
  <div class="container">
    <div class="copy">
       <h3>复制 <span><i class="fa fa-hand-peace-o"></i></span></h3>
      <form>
        <!-- 这个输入框将显示提取到的URL参数 -->
        <input type="text" id="extractedCodeInput" value="" readonly>
        <button type="button" id="copyButton">复制</button>
      </form>
    </div>
    <div class="paste">
      <h3>粘贴 <span><i class="fa fa-smile-o"></i></span></h3>
      <form>
        <input type="text" placeholder="在此粘贴以验证">
      </form>
    </div>
  </div>
</div>

document.addEventListener('DOMContentLoaded', () => {
  const copyButton = document.getElementById('copyButton');
  const copyInput = document.getElementById('extractedCodeInput');

  // 1. 从URL中提取参数
  // 假设当前页面的URL是 https://www.example.com/page?code=12432
  const params = new Proxy(new URLSearchParams(window.location.search), {
    get: (searchParams, prop) => searchParams.get(prop),
  });

  let extractedCode = params.code; // 获取 'code' 参数的值

  // 2. 将提取到的值显示在输入框中
  if (extractedCode) {
    copyInput.value = extractedCode;
  } else {
    copyInput.value = "未找到 'code' 参数"; // 如果URL中没有 'code' 参数
  }

  // 3. 实现复制功能
  copyButton.addEventListener('click', () => {
    // 确保输入框中有值才进行复制
    if (copyInput.value) {
      // 选中输入框中的文本
      copyInput.select();
      copyInput.setSelectionRange(0, 99999); // 兼容移动设备

      try {
        // 执行复制命令
        document.execCommand('copy');
        alert('内容已复制到剪贴板: ' + copyInput.value);
      } catch (err) {
        console.error('复制失败:', err);
        alert('复制失败，请手动复制。');
      }
    } else {
      alert('没有内容可供复制。');
    }
  });

  // 允许用户点击输入框时自动选中内容
  copyInput.addEventListener('click', () => {
    copyInput.select();
    copyInput.setSelectionRange(0, 99999);
  });
});

/* 以下为示例CSS，您可以根据需要调整 */
html, body {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
}

body {
  font-size: 16px;
  background: #FFD1DD; /* 淡粉色背景 */
  display: flex;
  align-items: center;
  justify-content: center;
}

* {
  box-sizing: border-box;
}

.wrapper {
  padding: 0 5px;
  width: 90%;
  max-width: 800px;
}

h1 {
  text-align: center;
  font-size: 40px;
  margin-bottom: 1.2em;
  text-decoration: underline;
  text-transform: uppercase;
}

p {
  font-size: 20px;
  text-align: center;
}

.container {
  display: flex;
  background: #FFA3BB; /* 较深的粉色背景 */
  border-radius: 7px;
  padding: 10px;
  margin: 0 auto;
}

h3 {
  font-size: 28px;
  text-transform: uppercase;
  text-align: center;
  margin-top: 0;
  margin-bottom: 15px;
}

.copy, .paste {
  flex-grow: 1;
  width: 50%;
}

.copy {
  border-right: 2px solid #000; /* 分隔线 */
  padding-right: 10px;
}

.paste {
  padding-left: 10px;
}

form {
  position: relative;
  width: 100%;
}

input[type="text"] {
  display: block;  
  width: 100%;
  border: 3px solid #000;
  outline: 0;
  background: #FFF;
  font-size: 25px;
  padding: 5px 4px;
  margin-bottom: 20px;
}

button {
  display: block;
  position: absolute;
  top: 50%; /* 垂直居中 */
  right: 10px;
  transform: translateY(-50%);
  border: 0;
  outline: 0;
  color: #FFF;
  background: #000;
  font-size: 20px;
  text-transform: uppercase;
  padding: 0.5em 1em;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
    opacity: 0.8;
}