縮短開始和結束時顯示的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; 
} 

該功能開始於一個字符串的開頭（或末尾，如果反向=真），並且一旦它達到可接受的長度，開始尋找優選終止字符在截斷。如果在達到指定的長度（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 shortener函數，它返回一個50個字符的字符串，開頭沒有http或https，包含32個字符，然後是省略號，然後是最後15個字符。 「

因此，shortUrl函數需要接受長URL，獲取最後15個字符 - 從長url長度（與最後一個字符相同）減去15，以便開始切片到最後。剪掉HTTP/HTTPS開始 - 我用替換（），獲取下一個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"