如何编辑 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);
}

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

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

如何删除第一个“=”符号？

Answer 1

如果 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 上查看此示例。