Copy TEXT to Clipboard on Button-Click but where are the <br> - text

Question

it works but the copy text has everything in one line.
Does anyone knows why it does not shows them in separate lines
Thanks
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
alert("The answer has been Copied");
}
<p id="p">Hello, <br>
please <br>
copy my text <br>
</p>
<button onclick="copyToClipboard('#p')">Copy TEXT</button>

Answer 1

The issue is because the <br> tag is not read as a new line. The fix involved finding and replacing the <br> tag with \r\n.
function copyToClipboard(element) {
// REPLACE <BR> AND CREATE CLEAN STRING
var brRegex = /<br\s*[\/]?>/gi;
var cleanString = $(element).html().replace(brRegex,"\r\n");
// TEMP VAR TO SELECT TEXT FROM
var $temp = $("<textarea>");
// ADD TEMP TO BODY
$("body").append($temp);
// SET TEMP VALUE
$temp.val(cleanString);
// SELECT TEMP
$temp.select();
// EXECUTE COPY
document.execCommand("copy");
// REMOVE TEMP ELEMENT
$temp.remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p">Hello, <br>
please <br>
copy my text <br>
</p>
<button onclick="copyToClipboard('#p')"> Copy TEXT </button>