缩短显示的 URL，并保留开头和结尾（Firebug“Net”面板样式）

Question

我想在表中显示 URL，同时将其限制为特定长度。作为 URL，最好保留最有意义的部分（通常是开头和结尾）。在 Firebug“Net”面板中查看长 URL 时可以看到此功能。

Answer 1

这是一个快速而肮脏的解决方案，但到目前为止它对我来说效果很好，并且可以轻松更新为任何个人偏好。为了可读性和重用性，它分为两个函数。

该函数利用了shortString如下所示的函数。它将 URL 缩短到小于或等于指定长度 (l)，同时保留 URL 的开头和结尾并在首选字符（“ ”、“/”、“&”）处截断。

function shortUrl(url, l){
    var l = typeof(l) != "undefined" ? l : 50;
    var chunk_l = (l/2);
    var url = url.replace("http://","").replace("https://","");

    if(url.length <= l){ return url; }

    var start_chunk = shortString(url, chunk_l, false);
    var end_chunk = shortString(url, chunk_l, true);
    return start_chunk + ".." + end_chunk;
}

该函数从字符串的开头（或结尾，如果reverse=true）开始，一旦达到可接受的长度，就开始寻找要截断的首选停止字符。如果在达到指定长度 (l) 之前未找到停止字符，则返回的字符串将被截断为最大长度。

function shortString(s, l, reverse){
    var stop_chars = [' ','/', '&'];
    var acceptable_shortness = l * 0.80; // When to start looking for stop characters
    var reverse = typeof(reverse) != "undefined" ? reverse : false;
    var s = reverse ? s.split("").reverse().join("") : s;
    var short_s = "";

    for(var i=0; i < l-1; i++){
        short_s += s[i];
        if(i >= acceptable_shortness && stop_chars.indexOf(s[i]) >= 0){
            break;
        }
    }
    if(reverse){ return short_s.split("").reverse().join(""); }
    return short_s;
}

例子

>>> var url = "http://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/"
>>> shortUrl(url)
"blog.stackoverflow.com/..swer-your-own-questions/"

Answer 2

我有一个非常简单的解决方案。我对仪表板页面有类似的要求：

“我们需要一个 URL 缩短函数，它返回 50 个字符的字符串，开头不带 http 或 https，包含 32 个字符，然后是省略号，然后是最后 15 个字符。”

因此，shortUrl 函数需要接收长 URL，获取最后 15 个字符 - 从长 url 的长度（与最后一个字符相同）减去 15 进行切片，以获得切片的开头到结尾。剪掉 http/https 开头 - 我使用了 Replace()，获取接下来的 32 个字符 - substr()，然后返回新的开头 + 省略号 (...) + 结尾：

 var shortUrl = function(u) {
       uend = u.slice(u.length - 15);
       ustart = u.replace('http://', '').replace('https://', '').substr(0, 32);
       var shorter = ustart + '...' + uend;
       alert(shorter);
       return shorter;
     }

     var longUrl = 'http://www.somekoolsite.com/subsite/subsubsite/morefolders/andetc/page.php';

     shortUrl(longUrl);

     // Result: "www.somekoolsite.com/subsite/sub...andetc/page.php"