I’m trying to get a Copy and Paste to work

It copies the string successfully but when I paste that into notepad for example but it inserts blank space before and after the string.

Process:

  • Copy: string
  • Paste Result in Notepad: <blank space>String<blank space>
  • Ideal Result wanted: string

I was wondering if a String trim() could be used?

$(document).ready(function() {
  $('button').click(function() {
    var btntxt = $(this).text();

    var copy = $(this).parent().find('.copy').text();

    var $temp = $("<input>");
    $("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);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div>
    <span class="copy">
      <code>string to be copied</code>
    </span>
    <button>
      <span class="icon-copy"></span>
      TMPL
    </button>
  </div>
  <div>
    <span class="copy">
      <code>string to be copied</code>
    </span>
    <button>
      <span class="icon-copy"></span>
      Mason
    </button>
  </div>
</div>
<div class="confirmation">
  <span class="icon-checkmark"></span> Copied to clipboard
</div>

Any help would be appreciated, thank you

Ash is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Like you wrote “I was wondering if a String trim() could be used?”

Yes you could use it:

var copy = $(this).parent().find('.copy').text().trim();

working example:

$(document).ready(function() {
  $('button').click(function() {
    var btntxt = $(this).text();
    var copy = $(this).parent().find('.copy').text().trim();
    var $temp = $("<input>");
    
    $("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);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main">
  <div>
    <span class="copy">
      <code>string to be copied</code>     
    </span>
    
    <button>
      <span class="icon-copy"></span>
      TMPL
    </button>
  </div>

  <div>
    <span class="copy">
      <code>string to be copied</code>     
    </span>
    
    <button>
      <span class="icon-copy"></span>
      Mason
    </button>
  </div>
</div>

<div class="confirmation">
  <span class="icon-checkmark"></span> Copied to clipboard
</div>

Or you could change your HTML, so that there are no line breaks:

<span class="copy"><code>string to be copied</code></span>

working example:

$(document).ready(function() {
  $('button').click(function() {
    var btntxt = $(this).text();
    var copy = $(this).parent().find('.copy').text();
    var $temp = $("<input>");
    
    $("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);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main">
  <div>
    <span class="copy"><code>string to be copied</code></span>
    
    <button>
      <span class="icon-copy"></span>
      TMPL
    </button>
  </div>

  <div>
    <span class="copy"><code>string to be copied</code></span>
    
    <button>
      <span class="icon-copy"></span>
      Mason
    </button>
  </div>
</div>

<div class="confirmation">
  <span class="icon-checkmark"></span> Copied to clipboard
</div>