Как редактировать часть якоря в URL - PullRequest
Новая
       1

Как редактировать часть якоря в URL

1 голос
/ 31 октября 2010

У меня есть код для получения части якоря: 

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);
}

Мне нужна функция для изменения части привязки, если эта часть существует, или добавление части, если она не существует.

В настоящее время я использую следующий код: 

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

Но если часть якоря не существует, якорь не меняется.

Формат URL: ... page / # / var1 = blablabla & var2 = var2text & gghh = edere

Якорь - # / var1 = blablabla & var2 = var2text & gghh = edere

Извините за мой английский.

Большое спасибо!

обновление:

это круто, большое спасибо! только одна проблема: я загружаю страницу без всяких якорей: ... / страница / nex используйте этот код: 

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'));

и получить ... / page / # / = & filter = data & filter2 = data2 & fdgfg = fdgfdg

как удалить первый символ '='?

1 Ответ

2 голосов
/ 01 ноября 2010

Ваши функции работают правильно, если key уже присутствует в хеше URL.

Например, если ваш URL-адрес: 

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

Затем, позвонив set_part(), вот так: 

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

изменит хеш следующим образом: 

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

Обратите внимание: он правильно изменил значение var2. Но это добавило дополнительную косую черту в начале.

Проблема в том, что он не будет добавлять параметр, если такой ключ ранее не существовал. Если вы хотите сделать это, я бы порекомендовал что-то вроде следующего: 

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);
}

Теперь, если URL вашей страницы 

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

и вы называете это так: 

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 );

тогда вы можете видеть, что обе формы работают правильно.

Вы можете увидеть этот пример в действии на jsfiddle .

...