Is there a simple JavaScript way to manipulate arbitrary URLs?

Question

Is there a way to easily handle manipulating URLs in JavaScript?

A bit of context:

I want to use ThickBox, the popular jQuery modal popup box, but unobtrusively. According to the ThickBox documentation I have to give all links that I want to be made modal a CSS class of "thickbox" and change the URL from...

http://www.mysite.com/mypopup

...to:

http://www.mysite.com/mypopup?height=200&width=300

I want to make this happen only if JavaScript is enabled.

So I get all links using jQuery and "hack" a detect for the '?' character in the URL, appending "&height..." or "?height..." accordingly.

In the grander scheme of things, this might muddle stuff up if the URL already has a "height" parameter, in which case I might just want to update the existing one as opposed to give it two.

It all smells a little.

I feel like I'm hacking code that can/must have been done properly once already!

So my question is:

Is there something in the JavaScript world (plugin or not) that would enable me to something like this:

var url = Url(elm.attr("href"));
url.parameter("width", "300");
url.parameter("height", "200");
elm.attr("href", url.toString())

Or:

var height = Url(elm.attr("href")).parameter("height");

Answer 1

This function does that, just call it on the page of the URL you want to parse:

function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

//for the URL http://www.mysite.com/mypopup?height=200&width=300

var height = gup( 'height' );
var width = gup('width');
alert('Height: ' + height + ' Width: ' + width);

EDIT: I don't know how useful this will be to use (as it uses Prototype.js) but this is for reading and modifying the query string:

http://code.nontalk.com/2006/10/readmodify-querystring-variables-with.html

Answer 2

Yes. The location Object in javascript has quite a lot of properties.

For your question: location.search = "width=300"; would apply "?width=300" to your url.

Answer 3

You can probably do that using jQuery, i.e.

$(".thickbox").each(function() {
  this.href += "?height=200&width=300";
});

I've not tested this and it may be wrong, I'm not in a position to test it at the moment but hopefully it'll point you in the right direction if nothing else. If you have jQuery for Thickbox then you may as well leverage it for the manipulation ;)