预填充邮件正文时如何将<br>转换为换行符？

问题核心在于mailto协议的body参数只接受URL编码的纯文本内容，HTML标签（如<br>）会被当作普通字符显示，不会被解析为换行。

方案一：替换HTML标签为纯文本换行并编码 #

直接修改邮件正文的处理逻辑，将<br>替换为纯文本换行符，再进行URL编码：

$(function () {
    $('.SendEmail').click(function (event) {
        var email = '';
        var subject = 'i wrote you a poem';
        // 把HTML中的<br>标签替换为纯文本换行符
        var rawBody = document.getElementById("hellomessage").innerHTML.replace(/<br\s*\/?>/gi, '\n');
        // 对主题和正文进行URL编码，避免特殊字符破坏链接格式
        var encodedSubject = encodeURIComponent(subject);
        var encodedBody = encodeURIComponent(rawBody);
        // 拼接并跳转mailto链接
        document.location = `mailto:${email}?subject=${encodedSubject}&body=${encodedBody}`;
    });
});

方案二：优化div内容填充逻辑（推荐） #

如果页面上的换行不需要依赖HTML标签，可以直接用文本换行符填充div，同时让页面正确显示换行：

1. 修改div填充代码：

var messageDiv = document.getElementById("hellomessage");
// 用innerText添加内容，避免混入HTML标签
messageDiv.innerText += nodes[randomNum-1].innerText;
messageDiv.innerText += '\n';

2. 给div添加CSS样式，让页面显示换行：

#hellomessage {
    white-space: pre-line;
}

3. 修改邮件正文获取逻辑：

$(function () {
    $('.SendEmail').click(function (event) {
        var email = '';
        var subject = 'i wrote you a poem';
        // 直接获取纯文本内容，自带换行符
        var emailBody = document.getElementById("hellomessage").innerText;
        var encodedSubject = encodeURIComponent(subject);
        var encodedBody = encodeURIComponent(emailBody);
        document.location = `mailto:${email}?subject=${encodedSubject}&body=${encodedBody}`;
    });
});

这样既保证页面显示正常换行，又能让邮件客户端正确识别换行。

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