如何实现在WhatsApp分享网页带格式的动态文本？

WhatsApp的分享API支持部分Markdown格式（粗体、斜体、删除线）以及换行，你可以通过以下方式改造代码实现带格式分享：

支持的格式说明 #

• 粗体：用**包裹文本，例如**这是粗体内容**
• 斜体：用*包裹文本，例如*这是斜体内容*
• 删除线：用~包裹文本，例如~这是删除线内容~
• 换行：用换行符（URL转义后为%0A）分隔内容

修改后的代码示例 #

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class='divblock'>
This is the first line.
This is the second line.
</div>
<button id='button'> WHATSAPP </button>
<script type="text/javascript">
(function clickMe() {
  const button = document.getElementById("button");
  // 获取保留原换行的文本内容
  const divContent = document.querySelector('.divblock').innerText;
  
  // 自定义格式：第一行加粗，第二行斜体
  const formattedContent = divContent.split('\n').map((line, index) => {
    if (index === 0 && line.trim()) {
      return `**${line.trim()}**`;
    } else if (index === 1 && line.trim()) {
      return `*${line.trim()}*`;
    }
    return line;
  }).join('\n');
  
  button.addEventListener("click", event => {
    // 对文本做URL编码，避免特殊字符解析错误
    const encodedText = encodeURIComponent(`Show div text:\n${formattedContent}`);
    window.open(`https://api.whatsapp.com/send?text=${encodedText}`);
  });
})();
</script>

关键改动说明 #

1. 保留换行：用innerText替代.text()，可以保留div中原有的换行结构
2. 添加格式：通过字符串处理为指定内容添加WhatsApp支持的Markdown标记
3. URL编码：用encodeURIComponent()处理整段文本，确保特殊字符（空格、*、换行等）能正确传递

如果你的div里原本就有HTML格式标签（比如<b>、<i>），可以先把这些标签转换成对应的Markdown格式，再执行分享逻辑。

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