如何用JavaScript实现URL末尾加省略号的长网址截断？

需求是将长URL的显示文本改为带省略号的短格式，同时保留原URL的跳转功能（注意：若直接修改href会导致跳转失效，正确做法是保留原链接地址，仅修改显示文本）。

核心截断函数 #

这个函数会优先保留域名，再截断后续路径，保证可读性：

function truncateUrl(url, maxLength = 60) {
  // 如果URL本身长度符合要求，直接返回
  if (url.length <= maxLength) return url;
  
  // 解析URL，分离协议和域名
  const urlObj = new URL(url);
  const domain = `${urlObj.protocol}//${urlObj.host}`;
  
  // 如果域名长度已经超过限制，直接截断整个URL
  if (domain.length >= maxLength) {
    return url.slice(0, maxLength - 3) + '...';
  }
  
  // 计算剩余可分配给路径的长度（预留3个字符给省略号）
  const remainingLen = maxLength - domain.length - 3;
  // 拼接域名、截断后的路径和省略号
  return `${domain}/${urlObj.pathname.slice(1, remainingLen)}...`;
}

应用到页面链接 #

假设页面中需要处理的链接带有long-url类，执行以下代码即可批量转换：

// 获取所有目标链接
const targetLinks = document.querySelectorAll('.long-url');

targetLinks.forEach(link => {
  const originalUrl = link.href;
  // 生成截断后的短URL文本
  const shortDisplayUrl = truncateUrl(originalUrl, 60);
  // 修改链接显示文本，保留原跳转地址
  link.textContent = shortDisplayUrl;
});

示例效果 #

原链接：

<a href="https://mozodeals.com/threads/iqoo-12-5g-worlds-fastest-processor-snapdragon%C2%AE-8-gen-3-12gb-ram-and-256gb-rom.19/" class="long-url">text</a>

处理后显示为：
https://mozodeals.com/threads/iqoo-12-5g-worlds-fastest-processor-snapdragon...
点击仍会跳转到原完整URL。

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