Copy to clipboard with break line

Question

I want to copy a text to clipboard but in a new line.

Problem:

If you click the button in the snippet and paste in the notepad this is what you gonna get:

Name: testSurname: testEmail: [email protected]: testCity: testCountry: nullAd Category: testPlan: nullWebsite: Company name: testΜήνυμα: test

What I want:

I want, if possible, to copy text in a newline. The same as it is when you copy it:

Name: test
Surname: test
Email: [email protected]
...

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

$( "#FailCopy" ).click(function() {
  alert("Well done! div #error-details has been copy to your clipboard, now paste it in the notepad or email!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!--text that i want to copy-->
    <h2>Div #error-details: the text I want to copy to clipboard:</h2>
    <er id="error-details">Name: test<br>Surname: test<br>Email: [email protected]<br>Address: test<br>City: test<br>Country: null<br>Ad Category: test<br>Plan: null<br>Website: <br>Company name: test<br>Μήνυμα: test</er>

    <br><br>
    
    <button id="FailCopy" type="button"  
     onclick="copyToClipboard('er#error-details')">Copy div to clipboard</button>

I have also tried to replace <br> with \n and \r\n by adding the following css rule to my div: white-space:pre-wrap; without any signs of success.

Answer 1

You have a few problems with the code.

First problem in your code is the $(element).text()jquery text() strips your code from html including the <br> tags. So there is no newlines in the clipboard text since all html newlines are stripped away.. so nothing to replace.

If you want to keep <br> as newlines you need to use .html() and parse your text more manually.

Second problem is that you use <input> tag. <input> tag is only single lines so u cant have any newline in there. you need to use <textarea> for the conversion.

The last problem is as above that you also should use \r\n for windows users.

I updated your snippet with a working version.

function copyToClipboard(element) {
  var $temp = $("<textarea>");
  var brRegex = /<br\s*[\/]?>/gi;
  $("body").append($temp);
  $temp.val($(element).html().replace(brRegex, "\r\n")).select();
  document.execCommand("copy");
  $temp.remove();
}

$( "#FailCopy" ).click(function() {
  alert("Well done! div #error-details has been copy to your clipboard, now paste it in the notepad or email!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!--text that i want to copy-->
    <h2>Div #error-details: the text I want to copy to clipboard:</h2>
    <er id="error-details">Name: test<br>Surname: test<br>Email: [email protected]<br>Address: test<br>City: test<br>Country: null<br>Ad Category: test<br>Plan: null<br>Website: <br>Company name: test<br>Μήνυμα: test</er>

    <br><br>
    
    <button id="FailCopy" type="button"  
     onclick="copyToClipboard('er#error-details')">Copy div to clipboard</button>

Answer 2

Non-jQuery Solution to simply copy a string with line breaks to clipboard

Please refer to code comments for clarity.

    function copyStringWithNewLineToClipBoard(stringWithNewLines){

        // Step 1: create a textarea element.
        // It is capable of holding linebreaks (newlines) unlike "input" element
        const mySmartTextarea = document.createElement('textarea');
        
        // Step 2: Store your string in innerHTML of mySmartTextarea element        
        mySmartTextarea.innerHTML = stringWithNewLines;
        
        // Step3: find an id element within the body to append your mySmartTextarea there temporarily
        const parentElement = document.getElementById('any-id-within-any-body-element');
        parentElement.appendChild(mySmartTextarea);
        
        // Step 4: Simulate selection of your text from mySmartTextarea programmatically 
        mySmartTextarea.select();
        
        // Step 5: simulate copy command (ctrl+c)
        // now your string with newlines should be copied to your clipboard 
        document.execCommand('copy');

        // Step 6: Now you can get rid of your "smart" textarea element
        parentElement.removeChild(mySmartTextarea);
        }

Now just Copy-paste this non-verbose method and add your own comments for sake of future devs who will manage your code. Or may be just a reference back to this answer.

function copyStringWithNewLineToClipBoard(stringWithNewLines){
    const mySmartTextarea = document.createElement('textarea');
    mySmartTextarea.innerHTML = stringWithNewLines;
    const parentElement = document.body.appendChild(mySmartTextarea);
    mySmartTextarea.select();
    document.execCommand('copy');
    parentElement.removeChild(mySmartTextarea);
    }