使用 JQuery Linkify 插件时，如何截断 url？

Posted 2023-02-22

【中文标题】使用 JQuery Linkify 插件时，如何截断 url？

【英文标题】：When using JQuery Linkify plugin, how do I truncate the url?

【发布时间】：2012-02-27 17:05:44

【问题描述】：

https://github.com/maranomynet/linkify

我正在使用这个插件。它有效，一切都很好。但是有没有我可以插入的选项，如果 url 长度大于“X”，则截断它，并添加“...”？

现在 URL 太长了。

我注意到演示中有一个“handleLinks”回调函数，但我该如何使用它呢？

【问题讨论】：

如果你将链接切断，那么它作为链接将毫无用处，但如果你想这样显示它，那么你可以实现一些其他 jQuery 插件来实现这一点。

【参考方案1】：

你是对的，你可以使用handleLinks回调函数。例如，我编写了您需要的简单函数：

handleLinks: function (links) 
    for (var i = 0, cnt = links.length, tmpLink; i < cnt; i++) 
        tmpLink = links[i].innerhtml;
        if (tmpLink.length > 10) 
            links[i].innerHTML = tmpLink.substr(0, 10) + '...';
        
    

如果链接长度超过 10 个字符，它会截断链接。您可以根据需要修改此脚本。

【讨论】：

这可能是不必要的，但我很想添加 links[i].title = tmpLink; 以确保用户可以通过某种方式看到完整的 URL（我知道它在状态栏中可见在屏幕底部，但即便如此......）。

【参考方案2】：

对于 URL 截断我选择在中间缩短，因为域和文件通常比目录路径更重要。

从我的 Andrew Plummer 的 javascript 库 Sugar 的 GitHub fork 中获取并改编了这个问题。

String.prototype.shorten = function(length, position, countSplitter, splitter) 
  if (this.length < 1 && length < 1) return String(this);

  if (!(typeof(splitter) === 'string')) splitter = '...';
  if (!(typeof(countSplitter) === 'boolean')) countSplitter = true;

  var balance = (countSplitter) ? splitter.length : 0;

  if (length <= balance || this.length <= length) return String(this);

  // Perform shortening
  var shortened, beforeSplitter, afterSplitter;

  if (position == 'left') 
    afterSplitter = this.substring(this.length - length + balance, this.length - 1);
    shortened = splitter + afterSplitter;
   else if (position == 'right') 
    beforeSplitter = this.substring(0, length - balance);
    shortened = beforeSplitter + splitter;
   else 
    beforeSplitter = this.substring(0, Math.ceil((length / 2) - (balance / 2)));
    afterSplitter = this.substring(this.length - Math.floor((length / 2) - (balance / 2)), this.length);
    shortened = beforeSplitter + splitter + afterSplitter;
  

  return shortened;

缩短 URL 以使结果字符串长度为 20 个字符的示例：

var toShorten = 'http://***.com/questions/9156458/when-using-jquery-linkify-plugin-how-do-i-truncate-the-url';
var shortened = toShorten.shorten(20); // Output: 'http://st...-the-url'

注意：此代码仅经过校对，未经过单元测试。不过，Sugar implementation 一直是 unit tested。