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:

function copyToClipboard(element) {
  var $temp = $("<input>");

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?




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()
<script src=""></script>
<p contenteditable="true">Type to edit <br> this text</p>
<button onclick="copyToClipboard('p')">Copy to Clipboard</button>


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 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 community wiki is not applicable.
// BTW, that page is very entertaining!
function copyToClipboard(element)
    var $temp = $("<textarea>");
    var x = $(element).html().trim().replace(/<br>/g, '\n').replace(/<\/?[^>]+>/g, '');

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.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.