Copy Button Preserving Line Breaks

95
January 17, 2021, at 7:30 PM

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

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 \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 2

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.

READ ALSO
How to get gross revenue data from woocommerce by product ID?

How to get gross revenue data from woocommerce by product ID?

I'm trying to get woocommerce total revenues for each of my productsI'm using this in a custom plugin, which will eventually email the data to colleagues

102
Install nodejs in jenkinsfile

Install nodejs in jenkinsfile

I am trying to install nodejs on jenkinsThe first step is to use a dockerfile with node as a base image

87
Android xml design slowing down my application

Android xml design slowing down my application

I have a layout design in my app

88