share content in whatsapp jquery break line

Question

This is my code to share the content of a web page on WhatsApp with jquery. but inside divblock3 there is text with line breaks <br />

<div class='divblock3'><p><p>Lorem Ipsum is simply dummy .<br /> <br /> Lorem Ipsum is simply dummy textntly.<br /> <br /> Lorem Ipsum is simply dummy textntly.

whatsapp does not interpret as a line break...

any idea how to replace the <br /> with a "%0a" , so that whatsapp interprets them as line breaks

 <script type="text/javascript"> (function clickMe() { const button = document.getElementById("button"); var divblock1 = $('.divblock1').text(); var divblock2 = $('.divblock2').text(); var divblock3 = $('.divblock3').text(); var message = encodeURIComponent(divblock1)+" %0a "+encodeURIComponent(divblock2)+" %0a "+encodeURIComponent(divblock3); button.addEventListener("click", event => { // Whatsapp Message on Button Click window.open("https://api.whatsapp.com/send?text="+message) }); })(); </script>

Answer 1

JQuery's replace function can search for all instances of <br> and replaces it with the value you specify. Also Jquery's .text() function removes all HTMLtags, but you want to keep those because you want to replace <br> with %0a . So lets use the function .html() instead.

And I would recommand that you remove the / in <br /> it isn't necessary and will cause problems otherwise with the new code.

Small HTML edit like

<div class='divblock3'>
Lorem Ipsum is simply dummy .<br> <br> Lorem Ipsum is simply dummy textntly.<br> <br> Lorem Ipsum is simply dummy textntly.
</div>

New lines in JS

var divblock3 = $('.divblock3').html();
divblock3 = divblock3.replace(/<br>/g, '\n');
divblock3 = $('<div></div>').html(divblock3);
divblock3 = divblock3.text();

Updated example script (At first I didn't account for the encodeURIComponent later on, it's fixed in this update by using \n instead of %0A )

 function clickMe() { const button = document.getElementById("button"); var divblock1 = $('.divblock1').text(); var divblock2 = $('.divblock2').text(); // the new lines var divblock3 = $('.divblock3').html(); divblock3 = divblock3.replace(/<br>/g, '\n'); divblock3 = $('<div></div>').html(divblock3); divblock3 = divblock3.text(); var message = encodeURIComponent(divblock1) + "%0A" + encodeURIComponent(divblock2) + "%0A" + encodeURIComponent(divblock3); window.open("https://api.whatsapp.com/send?text="+message, '_blank'); // and for debugging purposes you can copy this: console.log("https://api.whatsapp.com/send?text="+message); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='divblock1'> Subject: Strange text editor </div> <div class='divblock2'> Department: IT </div> <div class='divblock3'> Message: Every time I type somehting it turns to:<br><br> Lorem Ipsum is simply dummy.<br> <br> Lorem Ipsum is simply dummy textntly.<br> <br> Lorem Ipsum is simply dummy textntly </div> <button onclick="clickMe()"> Send message </button>