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

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 http://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.

Answer 2

Why not do a jQuery POST to the Bit.ly API? http://blog.themeforest.net/tutorials/creating-an-ajax-web-app-using-the-bitly-api/

Answer 3

I found your post while looking for something similar and eventually just wrote a jQuery plugin that provides (at least part of) what you're looking for.

My jQuery Url Shortener on Bitbucket

It's a very simple plugin; I didn't need to shorten the user's urls so I don't have any length checking or url testing before shortening it, though I am not averse to adding those types of features.

Just thought you might find it useful.

As for Recognising URLs in your textbox, I would suggest using a RegEx to match the url.