使用JQuery Linkify插件时,如何截断网址?

时间:2012-02-06 06:38:42

标签: javascript jquery url hyperlink

https://github.com/maranomynet/linkify

我正在使用这个插件。它有效,一切都很好。但有没有我可以插入的选项,以便如果网址长度超过“X”,然后截断它,并添加“...”?

现在网址太长了。

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

2 个答案:

答案 0 :(得分:9)

你是对的,你可以使用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个字符,则会截断链接。您可以根据需要修改此脚本。

答案 1 :(得分:3)

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

从我的GitHub fork安德鲁普拉默的JavaScript库Sugar中采取并改编了这个问题。

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://stackoverflow.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