含&符号的CC邮箱地址通过mailto链接在Outlook中无法完整识别的问题

当mailto链接里的邮箱地址包含&这类URL特殊字符时，浏览器会把它识别为参数分隔符，导致完整邮箱地址被截断，无法在Outlook中正常显示。

问题原因 #

示例代码里直接将未编码的邮箱地址拼接到mailto链接中：

let to='abc&d@example.com',cc='efg&h@example.com',subject='sample',body='mail body';
href=`mailTo:${to}?cc=${cc}&subject=${subject}&body=${body}`;
let openMail = ()=>{
    window.open(href, '_blank');
}

这里cc参数里的&会被浏览器解析成新参数的起始标记，最终CC邮箱会被截断为efg，后续的h@example.com会被当作无效参数处理。

解决方案 #

使用encodeURIComponent()对包含特殊字符的邮箱地址、主题、正文等内容进行URL编码，确保特殊字符被正确转义：

let to='abc&d@example.com',cc='efg&h@example.com',subject='sample',body='mail body';
// 对每个参数进行URL编码
const encodedTo = encodeURIComponent(to);
const encodedCc = encodeURIComponent(cc);
const encodedSubject = encodeURIComponent(subject);
const encodedBody = encodeURIComponent(body);
// 拼接编码后的mailto链接
href=`mailto:${encodedTo}?cc=${encodedCc}&subject=${encodedSubject}&body=${encodedBody}`;
let openMail = ()=>{
    window.open(href, '_blank');
}

编码后，邮箱里的&会被转义为%26，浏览器会将其识别为邮箱地址的一部分，而非参数分隔符，这样完整的邮箱地址就能在Outlook中正常显示了。

内容的提问来源于stack exchange，提问作者raviguggilam