文字列に '＆'が含まれていると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>

を、それが正しく表示されていますPRESかのボタン、あなたがいることがわかり、電子メールアプリケーションで開きますテキストは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パラメータの区切り文字であるためです。

あなたは、URL文字列に追加する前に、あなたの値（テキスト用encodeURIComponentとURLためencodeURI）をエンコードする必要があります。

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);