Question

I would like to display a URL in a table while restricting it to a specific length. Being a URL, it would be nice to preserve the most meaningful parts which tend to be the beginning and end. This functionality can be seen when viewing long URLs in the Firebug ‘Net’ panel.

Answer 1

This is a quick and dirty solution but it has been working well for me so far and can be easily updated to any individual preferences. It’s broken into two functions for readability and reuse.

This function makes use of the shortString function shown below. It shortens a URL to less than or equal to the specified length (l) while preserving the beginning and end of the URL and truncating at preferred characters (‘ ‘, ‘/’, ‘&’).

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;
}

This function starts at the beginning of a string (or end, if reverse=true) and, once it reaches an acceptable length, starts looking for preferred stop characters to truncate at. If no stop characters are found before the specified length (l) is reached, the string is returned truncated to the max length.

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;
}

Example

>>> 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/"