CODEWITHSUNDEEP
javascriptjquerywhatsapp
Kaz25
Kaz25

Reputation: 75

share content in whatsapp jquery break line

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>

Upvotes: 0

Views: 746

Answers (1)

T-S
T-S

Reputation: 747

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>

Upvotes: 1

Related Questions