jQuery实现剪贴板复制功能 粘贴内容前后带多余空格如何解决

复制内容前后出现多余空白，核心原因是HTML排版时标签之间的缩进、换行符会被jQuery的.text()方法一并读取，最终写入剪贴板的文本本身就携带首尾空白，和复制执行逻辑无关。

String.trim()完全可以解决这个问题。该方法会移除字符串首尾所有空白字符（包含空格、换行、制表符），不会改动字符串中间的有效内容。
你只需要修改获取复制文本的代码行，对读取到的文本做trim处理即可：

// 原有代码
// var copy = $(this).parent().find('.copy').text();
// 修改为
var copy = $(this).parent().find('.copy').text().trim();

你当前使用临时<input>元素承载复制内容的写法仅支持单行文本，如果后续需要复制带换行的多行代码，建议替换为<textarea>元素，避免换行符被过滤。优化后的完整JS逻辑如下：

$(document).ready(function() {
  $('button').click(function() {
    var btntxt = $(this).text();
    // 读取文本后直接移除首尾空白
    var copy = $(this).parent().find('.copy').text().trim();

    // 用textarea替代input，兼容多行文本复制；添加样式避免临时元素引发页面闪动
    var $temp = $("<textarea>");
    $temp.css({
      position: 'fixed',
      opacity: 0,
      top: 0
    })
    $("body").append($temp);
    $temp.val(copy).select();
    document.execCommand("copy");
    $temp.remove();

    $('.confirmation').hide().html('Copied <b>' + btntxt + ' code</b> to clipboard').fadeIn(100).delay(800).fadeOut(200);

    $('.main').trigger("click");
  });

  $('.main div').click(function() {
    var range = document.createRange();
    var selection = window.getSelection();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  });
});

你也可以通过调整HTML结构规避这个问题：把<span class="copy">标签、内部的<code>标签和待复制文本写在同一行，去掉标签之间的换行缩进，这样.text()读取到的内容就不会携带首尾空白。但这种写法会降低HTML代码的可维护性，更推荐使用trim()处理的方案。

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