JavaScript实现WhatsApp分享时URL含&被截断的问题求助

问题根源 #

你遇到的核心问题是没有对WhatsApp分享的文本内容做完整的URL编码。WhatsApp的whatsapp://send?text=接口中，text参数的值需要是URL编码后的字符串——如果直接传入带&的URL，&会被当作URL的参数分隔符，导致第一个&之后的内容被截断，无法被识别为text参数的一部分。

解决方案 #

只需要对要分享的所有文本内容（包括你的完整URL、自定义文案和用户输入）使用encodeURIComponent()进行编码，确保所有特殊字符都被转成URL安全的格式。

修改后的代码 #

var url1 = "?1st=" + encodeURIComponent(selectedOption1) + "&2nd=" + encodeURIComponent(selectedOption2) + "&3rd=" + encodeURIComponent(selectedOption3) + "&4th=" + encodeURIComponent(selectedOption4) + "&5th=" + encodeURIComponent(selectedOption5) + "&6th=" + encodeURIComponent(selectedOption6) + "&7th=" + encodeURIComponent(selectedOption7) + "&8th=" + encodeURIComponent(selectedOption8) + "&9th=" + encodeURIComponent(selectedOption9) + "&10th=" + encodeURIComponent(selectedOption10);
section3.style.display="none";
section4.style.display="block";
var u = "www.yoururl.com";
var input = document.getElementById("1nameInput").value;
var inputt = document.getElementById("copytxt");
var inputname = "&name=";
var share = "&share=share";
var text = u + url1 + share + inputname + input;
inputt.value = text;
var $whatsApp = $('.whatsapp a');
decorateWhatsAppLink(text, input);

function decorateWhatsAppLink(text, input) {
    // 自定义分享文案
    var textttt = 'dare take this Challenge Now ';
    // WhatsApp分享基础URL
    var baseUrl = 'whatsapp://send?text=';
    // 对所有要分享的内容进行URL编码
    var encodedContent = encodeURIComponent(input + textttt + text);
    // 设置链接的href属性
    var $whatsApp = $('.whatsapp a');
    $whatsApp.attr('href', baseUrl + encodedContent);
}

关键修改点说明 #

• 移除了原代码中无用的var message = "text";语句
• 将input + textttt + text整体用encodeURIComponent()编码，确保包括&在内的所有特殊字符（比如用户输入里的空格、特殊符号）都被转义成URL安全格式
• 编码后，原URL中的&会被转换成%26，WhatsApp会正确识别这是分享文本的一部分，不会截断你的完整URL

这样修改后，分享到WhatsApp的内容就会包含完整的URL，不会出现截断或者参数拼接错误的问题了。

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