Copying Multiline Text in JavaScript

I know there are a lot of discussions out there about copy and pasting not working when there are multiple lines as it just pastes all on the same row. I found a lot of fixes when using JQuery, but I am not using JQuery. Was wondering if somebody could help me out? I am looking for it to paste like this

Copy1
Copy1
Copy1

instead of

Copy1Copy1Copy1

Thanks

<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html lang="en">
<html>
<head>
<title>Central</title>

<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="container">
    
<div id="Table">

</div>
        
</div>

</body>

<script type="text/javascript" src="Copy.js"></script>

<script>

window.onload = function() {
    
GetCopy();
   
   
var a = document.getElementsByClassName('CopyButton');

for (var i = 0; i < a.length; i++) {
  a[i].addEventListener('click', function() {
    var b = this.parentNode.parentNode.cells[2].textContent;
    
    copyToClipboard(b);
    
  });
}

}

function copyToClipboard(text) {
  var dummy = document.createElement("textarea");
  document.body.appendChild(dummy);
  dummy.value = text;
  dummy.select();
  document.execCommand("copy");
  document.body.removeChild(dummy);
}


</script>
</html>

function GetCopy() {
var data = '<table id="myTable"> 
<tr class="header"> 
<th>Title</th> 
<th></th> 
<th>Verbiage</th> 
</tr> 
<tr><td>Row 1</td> 
<td><input type="button" class="CopyButton" value="Copy" onclick="" /></td> 
<td>Copy Me 1<br>Copy Me 1<br>Copy Me 1</td> 
</tr> 
<tr><td>Row 2</td> 
<td><input type="button" class="CopyButton" value="Copy" onclick="" /></td> 
<td>Copy Me 2<br>Copy Me 2<br>Copy Me 3</td> 
</tr> 
</table>'
document.getElementById('Table').innerHTML =data; }

UPDATE – Here is my updated code that is not pasting correctly for me when I try to pull in a js table

<script type="text/javascript" src="Copy.js"></script>

<script>
    
window.onload = function() {
    
GetCopy();
   
   
var a = document.getElementsByClassName('CopyButton');

for (var i = 0; i < a.length; i++) {
  a[i].addEventListener('click', function() {
    var b = this.parentNode.parentNode.cells[2].textContent;
    
    copyToClipboard(b);
    
  });
}

}

function copyToClipboard(text) {
  var dummy = document.createElement("textarea");
  document.body.appendChild(dummy);
  dummy.value = text;
  dummy.select();
  document.execCommand("copy");
  document.body.removeChild(dummy);
}


</script>


<div id="container">
<div id="Table">
</div> 
</div>


<style>
td {
  white-space: pre-wrap;
}
</style>

function GetCopy() {
var data = '<table id="myTable"> 
<tr class="header"> 
<th>Title</th> 
<th></th> 
<th>Verbiage</th> 
</tr> 
<tr><td>Row 2</td> 
<td><input type="button" class="CopyButton" value="Copy" onclick="" /></td> 
<td>Copy Me 1 <br> 
Copy Me 1 <br>
Copy Me 1<br></td> 
</tr> 
<tr><td>Row 2</td> 
<td><input type="button" class="CopyButton" value="Copy" onclick="" /></td> 
<td>Copy Me 2 <br>
Copy Me 2 <br>
Copy Me 3<br></td> 
</tr> 
</table>'
document.getElementById('Table').innerHTML =data; }

Answer

You can simply use line breaks to separate the text and display it with white-space: pre-wrap to preserve whitespace instead of displaying all on one line. Additionally, you can use template literals (delimited by backticks) to easily create multiline strings without needing to use to escape the newline character.

Live Example:

window.onload = function() {
    
GetCopy();
   
   
var a = document.getElementsByClassName('CopyButton');

for (var i = 0; i < a.length; i++) {
  a[i].addEventListener('click', function() {
    var b = this.parentNode.parentNode.cells[2].textContent;
    
    copyToClipboard(b);
    
  });
}

}

function copyToClipboard(text) {
  var dummy = document.createElement("textarea");
  document.body.appendChild(dummy);
  dummy.value = text;
  dummy.select();
  document.execCommand("copy");
  document.body.removeChild(dummy);
}

function GetCopy() {
var data = `<table id="myTable"> 
<tr class="header"> 
<th>Title</th> 
<th></th> 
<th>Verbiage</th> 
</tr> 
<tr><td>Row 1</td> 
<td><input type="button" class="CopyButton" value="Copy" onclick="" /></td> 
<td>Copy Me 1
Copy Me 1
Copy Me 1</td> 
</tr> 
<tr><td>Row 2</td> 
<td><input type="button" class="CopyButton" value="Copy" onclick="" /></td> 
<td>Copy Me 2
Copy Me 2
Copy Me 3</td> 
</tr> 
</table>`
document.getElementById('Table').innerHTML =data; }

td {
  white-space: pre-wrap;
}

<div id="container">
<div id="Table">
</div> 
</div>
Paste Text Here:
<textarea></textarea>

Advertisement

Answer