Почему jQuery пропускает код, если «&» находится в строке

Question

Я пытаюсь создать кнопку mailto, где он создает заголовок и тело письма.

Мой код выполняет свою работу правильно, но я понял, что в тексте есть буква «&», затем остальная часть кода пропускается. поэтому строка отображается до «&», и все, что после этого не будет в теле письма.

Посмотрите на пример: jsFiddle

var title = "my track title"; 
 
var artist= "ArtistA & Artist B"; 
 
var trackURL= " http://localhost/music"; 
 

 

 
var subjectText = title + " by " + artist; 
 
var bodyText = "Check out the track " + title + " by " + artist + " on " + trackURL; 
 

 
var url = 'mailto:' + '' + '?subject=' + subjectText + '&body=' + bodyText; 
 
$(".email").on("click tap", function(event) { 
 
    event.preventDefault(); 
 
    window.location = url; 
 
}); 
 
console.log(url);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="email">Send Email</button>

В консоли это показано правильно, но если вы прес кнопку и откройте его в приложении электронной почты вы видите, что текст выглядит так: Check out the track my track title by ArtistA, а остальное отсутствует.

Если изменить «&» до «и» он работает правильно и показывает: Check out the track my track title by ArtistA and Artist B on http:/localhost/music

Любая идея, как это исправить? Я попробовал .toString(), но не работал.

Answer 1

Это потому, что & является символом разделителя параметров URL.

Вам нужно закодировать вам значение (encodeURIComponent для текстов и encodeURI для URL) перед добавлением их в строку URL.

var title ="my track title"; 
     var artist= "ArtistA & Artist B"; 
     var trackURL= " http://localhost/music"; 


     var subjectText = encodeURIComponent(title + " by " + artist); 
     var bodyText = encodeURIComponent("Check out the track " + title + " by " + artist + " on ") + encodeURI(trackURL); 

     var url = 'mailto:' + '' + '?subject=' + subjectText + '&body=' + bodyText; 
     $(".email").on("click tap", function(event) { 
      event.preventDefault(); 
      window.location = url; 
     }); 
     console.log(url);