CODEWITHSUNDEEP
htmljquerycopy-paste
Ash
Ash

Reputation: 11

Remove blank space from string copy and paste

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:

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

Upvotes: 1

Views: 282

Answers (1)

biberman
biberman

Reputation: 5767

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>

Upvotes: 1

Related Questions