如何修改现有JS代码，实现网页按钮复制指定Div内代码至剪贴板

Got it, let's tackle this problem. You want to shift from copying input content to grabbing code from a specific div and copying it to the clipboard, plus add a button to trigger the action. Here's a reliable, modern approach using web standards (since document.execCommand('copy') is now deprecated):

Step 1: Set Up the HTML Structure #

First, create your target code div and a copy button:

<!-- Div containing your code -->
<div id="target-code">
  function calculateSum(a, b) {
    return a + b;
  }
</div>

<!-- Button to trigger copy -->
<button id="copy-code-btn">Copy Code</button>

Step 2: Add the JavaScript Logic #

We'll use the Clipboard API (the current standard for clipboard operations) which is supported in all modern browsers. This method is asynchronous and more reliable than the old execCommand approach:

// Grab references to our elements once the DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  const codeDiv = document.getElementById('target-code');
  const copyBtn = document.getElementById('copy-code-btn');

  // Add click handler to the button
  copyBtn.addEventListener('click', async () => {
    try {
      // Extract the text content from the div (trim removes extra whitespace)
      const codeText = codeDiv.textContent.trim();
      
      // Write the text to the clipboard
      await navigator.clipboard.writeText(codeText);
      
      // Give user feedback that copy worked
      copyBtn.textContent = 'Copied!';
      setTimeout(() => {
        copyBtn.textContent = 'Copy Code';
      }, 2000);
    } catch (error) {
      // Handle errors (e.g., clipboard permissions blocked)
      console.error('Failed to copy code:', error);
      copyBtn.textContent = 'Copy Failed';
      setTimeout(() => {
        copyBtn.textContent = 'Copy Code';
      }, 2000);
    }
  });
});

Key Details & Alternatives #

• Why Clipboard API?: It’s the official modern standard, replaces deprecated methods, and works seamlessly with async/await for clean error handling.
• Handling Formatted Code: If your div uses <pre> or <code> tags (or preserves line breaks), use innerText instead of textContent to retain formatting:

  const codeText = codeDiv.innerText.trim();
  

• Fallback for Older Browsers (if needed): If you need to support very old browsers, you can add a fallback using a temporary textarea (though this is rarely necessary now):

  // Fallback logic (inside the try block)
  const tempTextarea = document.createElement('textarea');
  tempTextarea.value = codeDiv.textContent.trim();
  document.body.appendChild(tempTextarea);
  tempTextarea.select();
  document.execCommand('copy'); // Deprecated, but works in old browsers
  document.body.removeChild(tempTextarea);
  

Important Notes #

• The Clipboard API requires a user gesture (like a button click) to work—this is a security rule, so you can’t trigger a copy automatically without user interaction.
• Make sure your JS runs after the DOM is fully loaded (we use DOMContentLoaded for this, or you can place the script at the end of your <body> tag).

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