如何在URL中编辑锚点的一部分

时间:2010-10-31 20:52:07

标签: javascript jquery 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);
}

如果这部分存在,我需要一个用于更改锚点部分的函数,或者如果它不存在则需要添加一部分。

此时我使用以下代码:

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&amp; var2 = var2text&amp; gghh = edere

主播 - #/ var1 = blablabla&amp; var2 = var2text&amp; 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 /#/ =&amp; filter = data&amp; filter2 = data2&amp; fdgfg = fdgfdg

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

1 个答案:

答案 0 :(得分:2)

如果网址哈希中已存在key,您的功能将正常运行。

例如,如果您的网址是:

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

现在,如果您网页的网址是

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