如何在HTML邮件、Twitter、LinkedIn分享正文中将长URL转为超链接？

1. 核心逻辑说明 #

你不需要对href属性里的长分享链接做修改，用户可见的可点击文本完全由<a>标签的内部内容决定，长链接作为跳转属性放在href里不会暴露给普通访客，不影响页面美观。

2. 修正后的实现步骤 #

步骤1：修正HTML标签语法 #

你原有代码中的<a>标签存在语法错误，先修正标签闭合格式，同时在标签内部填入你想要的自定义锚文本（可以是文字、图标、按钮等任意元素）：

<!-- 自定义锚文本为文字的示例，你也可以替换为img图标、button按钮等元素 -->
<a class="twitter" href="">分享到Twitter</a>
<a class="email" href="">邮件分享</a>
<a class="linkedin" href="">分享到LinkedIn</a>

步骤2：动态拼接分享链接（带参数编码处理） #

如果你的ugly_url是动态生成的，建议用JS对参数做编码处理，避免特殊字符导致链接失效，完整示例如下：

// 先对页面URL做编码处理，避免特殊字符破坏参数结构
const encodedPageUrl = encodeURIComponent(ugly_url);

// 拼接各渠道完整分享链接
const twitterUrl = `https://twitter.com/intent/tweet?text=${encodedPageUrl}`;
const emailUrl = `mailto:?body=Check%20out%20this%20Article%20Summarization%20${encodedPageUrl}&subject=Summarization%20Tool`;
const linkedinUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${encodedPageUrl}&title=Temporary%20Title&source=Chillyfacts`;

// 把拼接好的链接赋值给对应a标签的href属性
document.querySelector('a.twitter').href = twitterUrl;
document.querySelector('a.email').href = emailUrl;
document.querySelector('a.linkedin').href = linkedinUrl;

3. 效果说明 #

完成上述配置后，用户在页面上只会看到你自定义的锚文本（文字/图标/按钮），点击后会自动跳转到对应分享渠道的预设内容页面，不会显示href里的长参数链接。

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