jQuery on the fly URL shortener

Question

I'm looking for an on the fly URL shortener much like how tweetdeck works. I have found many jQuery and general javascript plugins that take a url and run it through a shortening service such as bit.ly when a button is pressed. However, I have not been able to find one that does it on the fly. My first question is does this already exist someplace? Secondly, if it doesn't, then what would be the best way to recognize a URL that needs to be shortened inside a textbox? My thoughts:

1. On onKeyUp of that text area run through the text looking for http
2. If found grab the whole URL (how do I determine the end? could be period, comma, space, etc...)
3. Make sure the URL isn't already a bit.ly URL
4. Validate the URL (make a request and make sure the http response is not an error, does bit.ly already do this?)
5. If valid, send the url to bit.ly's API and get the response
6. Replace the long URL with the short URL in the text area.

Thoughts?

Answer 1

Here is an example how to get a shortened URL with Bitly API and jQuery:

function get_short_url(long_url, login, api_key, func)
{
    $.getJSON(
        "http://api.bitly.com/v3/shorten?callback=?", 
        { 
            "format": "json",
            "apiKey": api_key,
            "login": login,
            "longUrl": long_url
        },
        function(response)
        {
            func(response.data.url);
        }
    );
}

The following code could be used to get a short URL:

/*
Sign up for Bitly account at
 https://bitly.com/a/sign_up

and upon completion visit
https://bitly.com/a/your_api_key/ 
to get "login" and "api_key" values
*/
var login = "LOGIN_HERE";
var api_key = "API_KEY_HERE";
var long_url = "http://www.kozlenko.info";

get_short_url(long_url, login, api_key, function(short_url) {
    console.log(short_url);
});

Answer 2

I guess the API of Bitly has changed slightly. You now only really need an access token to request a short URL.

Following the best practices, I created the following Javascript-only snippet:

getShortUrl: function(url, callback)
{
   var accessToken = '___YOUR_ACCESS_TOKEN___';
   var url = 'https://api-ssl.bitly.com/v3/shorten?access_token=' + accessToken + '&longUrl=' + encodeURIComponent(url);

    $.getJSON(
        url,
        {},
        function(response)
        {
            if(callback)
                callback(response.data.url);
        }
    );
},

Answer 3

The on the fly bit is going to be difficult to make reliable and speedy.

People won't type http most of the time or even www.

The end, like you said, is going to be hard to determine if the url contains a space or worse, runs into the next sentence because the user didn't put in a space.

And what if people need to change the url after the fact because they typed http://stakoverflow.com/ instead of https://stackoverflow.com/ ?

I think the best solution would be an "insert shortened url" button on your text editor that allowed people to do just that. Or, do it server-side when the post is made.