Using Javascript/jQuery to get Query String in Segment-based URL

Question

I'm using a PHP framework Codeigniter that uses segment based urls like http://www.mydomain.com/age/11/name/john/color/red instead of the usual querystrings lijke http://www.mydomain.com/index.php?age=11&name=john&color=red .

How do I grab the value of the age key from the url using Javascript/jQuery?

After grabbing the value 11 I will pass it into a jQuery object when an event is fired.

$( "#searchdistance_slider" ).slider({
        range: "min",
        value: 5,
        min: 0.5,
        max: 10,
        slide: function( event, ui ) {
            $( "#search_distance" ).val(ui.value + " miles");
            window.location.replace("http://www.domain.com/" + age); 
            /* passing the value of age into URL to redirect to */
        }
    });

UPDATE

• The key/value pairs can change position , and the number of key/value pairs in the URL are not fixed
• I need to grab the value within Javascript because the user uses a slider to change a particular value, say the age , and the new value 20 from the slider will be use to redirect the user to http://www.mydomain.com/age/20/name/john/color/red

Answer 1

You could try using the jQuery URL parser plugin.

Use the .segment(n) call to search the URL path for "age" , and grab the next one which should contain the age value you're looking for.

Or try the .fsegment(n) method if age is always in the same position.

Or use .segment() with something like:

var parts = $.url(your_url).segment();
var params = [];
for (var i=0; i<parts.length/2; i++) {
   params[parts[2*i]] = parts[2*i+1];
}
var age = parseInt(params['age']);

(I'm sure there's a prettier way to do that though.)

If you only want the age part, you don't have to do all that stuffing into a dictionary. Just exit the loop early when you've found the key you want.

If you want to reconstruct the path with a changed age, try something like:

var parts = $.url(your_url).segment();
var newpath = '';
for (var i=0; i<parts.length/2; i++) {
  if (parts[2*i] == 'age') {
    newpath += '/age/' + (parseInt(parts[2*i+1]) + 42); // put your age modifiy
                                                        // code here
  } else {
    newpath += '/' + parts[2*i] + '/' + parts[2*i+1];
  }
}
alert(newpath);

Answer 2

You could split it with something like this:

var parts = {},
    bits = location.pathname.substr(1).split('/'); // get rid of first / and split on slashes

for (var i = 0; i<bits.length; i += 2) {
    parts[bits[i]] = bits[i+1];
}

You could then access the age value with parts.age .

Answer 3

before your code is run, add the following to your php script:

<?php
$getAgre = ( isset($_GET['age']) && strlen($_GET['age'])>0 )? $_GET['age'] : 'null';
echo '<script>var age = '. $getAge .';</script>';
?>

edit: make sure you have some security checking before displaying the content of $_GET['age'] and your JS would be better when your event in .slider() checked whether variable get exists

Answer 4

You could use window.location.href variable which would give you the whole current url, and then play with the string a bit to get the desired information. Substring, split, even regex.

This would work:

var ageMatch= window.location.href.match(/age\/([\d]*)/);
var age= ageMatch[1];

Just for the record, you can also update the url just as easily:

var newUrl= window.location.href.replace(/age\/([\d]*)/, age);
window.location.href= newUrl;