Comment modifier une partie de l'ancre dans l'URL

Question

J'ai le code pour obtenir une partie de l'ancre:

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

je besoin d'une fonction pour changer une partie de l'ancre, si cette partie existe, ou ajouter une partie si elle n'existe pas.

A cette époque, j'utilise le code suivant:

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

Mais si la partie de l'ancre n'existe pas, l'ancre ne change pas.

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

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

Désolé mon anglais.

Merci beaucoup!

mise à jour:

ce génial, merci beaucoup! un seul problème: je charger la page withoud des ancres: .../page/ nex utilisent ce 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')); 

et recevoir .../page/#/= & filtre = données & filtre2 = data2 & fdgfg = fdgfdg

comment supprimer '=' symbole?

Answer 1

Vos fonctions fonctionnent correctement si le key est déjà présent dans l'url hash.

Par exemple, si votre URL est:

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

Puis, appelant set_part() comme ceci:

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

va changer le hachage comme suit:

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

Avis: il changé la valeur de var2 correctement. Mais il a ajouté une barre oblique au début.

Le problème est qu'il n'ajoutera pas le paramètre si aucune clé n'existait auparavant.Si vous voulez faire cela, alors je vous recommande quelque chose comme ce qui suit:

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

Maintenant, si l'URL de votre page est

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

et vous l'appelez comme ceci:

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

alors vous pouvez voir que les deux formes fonctionnent correctement. Vous pouvez see this example in action at jsfiddle.