How to edit part of anchor in URL

Question

I have code for get part of anchor:

function _get_part(queryString, name) {
  var match = '&' + name + '=';
  var i = queryString.indexOf(match);

  if(i < 0) {
    match = name + '=';
    if(queryString.slice(0, match.length) == match)
      i = 0;
  }

  if(i > -1) {
    i += match.length;
    return queryString.slice(i, queryString.indexOf('&', i) >>> 0);
  }
};

function get_location_hash() {
    return window.location.hash.substr(2);
}

function get_part(name) {
    return _get_part(get_location_hash(), name);
}

I need a function for changing a part of the anchor, if this part exists, or add a part if it does not exist.

At this time I use the following code:

function set_part(queryString, key, value) {
  var oldv = key + '=' + get_part(key);
  var newv = key + '=' + value;
  window.location.hash = '/' + queryString.replace(oldv, newv);
}

But if the part of the anchor does not exist, the anchor doesn't change.

URL format: ...page/#/var1=blablabla&var2=var2text&gghh=edere

Anchor - #/var1=blablabla&var2=var2text&gghh=edere

Sorry about my English.

Thanks a lot!

update:

it awesome, thank you very much! only one problem: i load page withoud any anchors: .../page/ nex use this code:

set_part(get_location_hash(), 'filter', 'data');
set_part(get_location_hash(), 'filter2', 'data2');
set_part(get_location_hash(), 'fdgfg', 'fdgfdg');
alert(get_part('fdgfg'));

and receive .../page/#/=&filter=data&filter2=data2&fdgfg=fdgfdg

how to delete first '=' symbol?

Answer 1

Your functions work correctly if the key is already present in the url hash.

For example, if your url is:

http://example.com/whatever.html#/var1=blablabla&var2=var2text&gghh=edere

Then, calling set_part() like this:

set_part(get_location_hash(), 'var2', 'bar');

will change the hash as follows:

http://example.com/whatever.html#//var1=blablabla&var2=bar&gghh=edere

Notice: it changed the value of var2 properly. But it did add an extra slash at the beginning.

The problem is that it won't add the parameter, if no such key previously existed. If you want to do this, then I'd recommend something like the following:

function _parseQueryString( queryString ) {
    var pairs = queryString.split('&');
    var params = {};
    for(var i=0; i<pairs.length; ++i ) {
       pairs[i] = pairs[i].trim();
       if( pairs[i] == '' ) continue;

        var parts = pairs[i].split('=');
        if( parts.length == 0 ) continue;
        var name = parts.shift();
        var value = '';
        while(parts.length) {
            value += parts.shift();
        }
        params[name]=value;
    }
    return params;
}

function _buildQueryString( params ) {
    var queryString = "";
    for( var i in params ) {
        if( queryString.length > 0 ) queryString += "&";
        queryString += (i + '=' +params[i]);
    }
    return queryString;
}

function set_part(queryString, key, value) {
    /* first remove the leading '#/', if any */
    if( queryString.indexOf('#')==0 ) {
        queryString = queryString.substring(1);
    }
    if( queryString.indexOf('/')==0 ) {
        queryString = queryString.substring(1);
    }

   /* now parse the hash (in queryString format) into 
      an object containing all the parts */
   var params = _parseQueryString(queryString);

   /* finally, just set the value in the params object, 
      and rebuild the query string, adding 
      in the slash again 
   */
   params[key]=value;
   window.location.hash = '/' + _buildQueryString(params);
}

Now, if the url of your page is

http://example.com/whatever.html#/var1=blablabla&var2=var2text&gghh=edere

and you call it like this:

alert( 'hash before: '+window.location.hash );

set_part( window.location.hash, 'var2', 'bar');
set_part( window.location.hash, 'foo', 'foovalue');

alert( 'hash after: '+window.location.hash );

then you can see that both forms work correctly.

You can see this example in action at jsfiddle.