Sharing on twitter button is cutting the link in parts

Question

first, i would like to thank everyone who reads my question and tried to help or at least took the time to read my question. I tried to prevent asking this question here by doing lots of research on google and questions which have been asked here about the subject but so far couldn't find answers so forgive me if you think i should not have asked the question, I wish you don't give me - vote please

So my problem is that i am trying to add a share on twitter button to my site, the share is working well but it is not taking all the get variables instead it is considering the rest of the variables part of the sharer link.

example: link that i am trying to share is "https://baakline-lebanon.com/en/spot-details.php?spot=1&l=2" so the link that is showing in the tweet box is "https://baakline-lebanon.com/en/spot-details.php?spot=1" and "&l=2" is being considered part of this sharer link "https://twitter.com/share?url="

here is my code related to this part:

                       <li>
                        
                          <a href="" class="twitter-share-button" data-show-count="false" target="_blank">
                            <span class="icon">
                              <i class="fab fa-twitter"></i>
                            </span>
                          </a>
                          
                          <script>
                            var twitterBtn = document.querySelector(".twitter-share-button");

                            function init() {
                              var postUrl = window.location.href;

                              twitterBtn.setAttribute("href", "https://twitter.com/share?url="+postUrl);
                            }
                            init();
                            
                          </script>
                        </li>

Answer 1

Solution:

I checked facebook url in their sharer and found that they are replacing the "=" and "&" with RFC 3986 standard so i made this function that let it replace these characters in my url

var twitterBtn = document.querySelector(".twitter-share-button");

                           function myUrlEncode(string) {
                              var string = string;
                               
                              var string = string.replace("&", "%26");

                              return string.replace("=", "%3D");
                            }

                            function init() {
                              var postUrl = encodeURI(window.location.href);
                            
                              postUrl = myUrlEncode(postUrl);
                              //twitterBtn.setAttribute("href", "https://twitter.com/share?url="+postUrl);
                              twitterBtn.setAttribute("href", "https://twitter.com/intent/tweet?url="+postUrl);
                              
                            }
                            init();