如果字符串中有“&”，为什么 jQuery 会跳过代码

Question

我正在尝试创建一个 mailto 按钮，它会在其中创建电子邮件的标题和 body。

我的代码正确地完成了它的工作，但我意识到如果字母“&”在文本中，则其余代码将被跳过。所以字符串在“&”之前是可见的，之后的任何内容都不会出现在电子邮件中 body.

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，其余部分丢失。

如果我将“&”更改为 'and'，它会正常工作并显示：Check out the track my track title by ArtistA and Artist B on http:/localhost/music

知道如何解决吗？我试过 .toString() 但没有用。

Answer 1

那是因为&是url参数的分隔符

在将值添加到 url 字符串之前，您需要对值进行编码（encodeURIComponent for the texts and encodeURI 用于 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);

如果字符串中有“&”，为什么 jQuery 会跳过代码

why does jQuery skip the code if '&' is in the string

javascript

jquery

html

mailto

reserved-words