Shorten URL for display with beginning and end preserved (Firebug 'Net' panel style)

javascript, truncate, url

Solution

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

Problem

Original source