如何在 URL 中编辑部分锚点

Question

我有获取锚点的代码：

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

但是如果锚的部分不存在，锚不会改变。

网址格式：...page/#/var1=blablabla&var2=var2text&gghh=edere

锚点 - #/var1=blablabla&var2=var2text&gghh=edere

对不起我的英语。

非常感谢！

更新：

太棒了，非常感谢！ 只有一个问题：我加载页面时没有任何锚点： .../页/ 接下来使用此代码：

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

如何删除第一个'='符号？

Answer 1

如果 key 已经存在于 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 );

然后你可以看到两种形式都正常工作。

你可以see this example in action at jsfiddle。