Copy Button Preserving Line Breaks

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(/\n/g, '<br>\n');

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

Any suggestions?

Thanks

Answers:

Answer

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 \r\n before each <br>.

function copyToClipboard(element) {
  var text = $(element).clone().find('br').prepend('\r\n').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>

Answer

We have adapted the copyToClipboard function to get it to work with our application. The changes were the following:

  • change the input to textarea so that the line breaks are passed;
  • change the text() function to html() so that the HTML is passed;
  • use a regex to replace each HTML br with the linefeed;
  • use another regex to strip the remaining HTML. The HTML in our application should only have <b> and <br> tags, so the simple regex should work, and also handle the odd tag that might be present.

Here is our adapted function, along with comments:

// Note: original replace used to strip HTML tags from https://stackoverflow.com/questions/5002111/javascript-how-to-strip-html-tags-from-string ReactiveRaven.
// However, replaced closing (>|$) with > as I don't understand why the check for $ is there, as it implies that $ is part of an HTML tag.
// Our requirement highly constrains the HTML, to mainly have <br> and <b> tags, so the general objection to parsing HTML with regex
// as at https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags community wiki is not applicable.
// BTW, that page is very entertaining!
function copyToClipboard(element)
{
    var $temp = $("<textarea>");
    $("body").append($temp);
    var x = $(element).html().trim().replace(/<br>/g, '\n').replace(/<\/?[^>]+>/g, '');
    $temp.val(x).select();
    document.execCommand("copy");
    $temp.remove();
}

Btw, if somebody knows why the regex from the cited page had the (>|$) that we changed to >, we would appreciate gaining the understanding as to why the dollar sign that we removed is needed.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.