javascript - Copy Button Preserving Line Breaks

Question

I have some very basic Javascript that copies text upon the push of a button. My problem is that it doesnt preserve line breaks:

<script>
function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}
</script>

I'd really like something to be able to be added to the above script to avoid making huge changes on the site already.

I've seen things on other posts such as:

post.innerHTML = post.innerHTML.replace(/
/g, '<br>
');

which in theory would work (i think) but I suck at Javascript.

Any suggestions?

Thanks

Answer 1

First off, the <input> element doesn't preserve line breaks. You can use the <textarea> element instead. Since your HTML may contain <br> elements instead of line break characters, I would also suggest using jQuery to prepend before each <br>.

function copyToClipboard(element) {
  var text = $(element).clone().find('br').prepend('
').end().text()
  element = $('<textarea>').appendTo('body').val(text).select()
  document.execCommand('copy')
  element.remove()
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p contenteditable="true">Type to edit <br> this text</p>
<button onclick="copyToClipboard('p')">Copy to Clipboard</button>