Javascript url 修改

Question

我有几个菜单，可以在单击时向当前链接添加变量。这是一个例子:

<select onChange="window.location.href+=this.value">
  <option value="&numb=1">1</option>
  <option value="&numb=2">2</option>
  <option value="&numb=3">3</option>
</select>

<select onChange="window.location.href+=this.value">
  <option value="&cord=x">x</option>
  <option value="&cord=y">y</option>
  <option value="&cord=z">z</option>
</select>

我的问题是，如果我选择“y”2次，它会添加“&cord=y”2次。相反，我希望它替换该菜单中的当前值。因此，如果“&cord=x”已存在，则只需将其更改为“&cord=y”，而不是向链接添加新变量。当然，如果我从 &numb 菜单中选择一项，它不应替换 &cord 菜单中的一项。

这可以做到吗？如果是，那么如何？

编辑:这是另一个例子。如果我有网址“www.google.com?cat=p&comp=x&type=1”，我在选择框中选择“&comp=3”，然后它将用新的替换当前的 &comp。如果未设置 &comp，它只会将 &comp=3 (或我选择的任何内容)添加到 url。

Answer 1

这些函数应该可以让您解析和编辑 URL 参数:

function splitObj(str, rowSplit, columnSplit) {
    var obj = {};
    var rows = str.split(rowSplit);
    for (var i = 0; i < rows.length; i++) {
        var kv = rows[i].split(columnSplit);
        if (kv.length === 1) {
            obj[kv[0]] = null;            
        } else {
            obj[kv[0]] = kv[1];
        }
    }
    return obj;
}

function joinObj(obj, rowSplit, columnSplit) {
    var rows = [];
    for (var name in obj) {
        if (name[obj] === null) {
            rows.push(name);            
        } else {
            rows.push(name + columnSplit + obj[name]);
        }
    }
    return rows.join(rowSplit);
}

function setUrlParam(name, value) {
    var parts = window.location.href.split('?');
    var urlbase = parts[0];
    var params = {};
    if (parts.length > 1) {
        params = splitObj(parts[1], '&', '=');
    }
    params[encodeURIComponent(name)] = encodeURIComponent(value);
    window.location.href = urlbase + '?' + joinObj(params, '&', '=');
}

function changeURL(elem) {
    var kv = elem.value.slice(1).split('=');
    setUrlParam(kv[0], kv[1]);
}

然后你可以这样做:

<select id="select" onChange="changeURL(this);">
    <option value="&cord=x">x</option>
    <option value="&cord=y">y</option>
    <option value="&cord=z">z</option>
</select>

更新:

您可以让它删除 splitObj 和 joinObj，但会牺牲可读性。

function setUrlParam(name, value) {
    var parts = window.location.href.split('?'), params = {};
    if (parts.length > 1)
        parts[1].split('&').forEach(function(x){ 
            var p = x.split('='); 
            params[p[0]] = (p.length > 1) ? p[1] : null; 
        });
    params[encodeURIComponent(name)] = encodeURIComponent(value);
    window.location.href = parts[0] + '?' + Object.keys(params).map(function(x){ 
        return (params[x] === null) ? x : (x + '=' + params[x]); 
    }).join('&');
}

function changeURL(elem) {
    var kv = elem.value.slice(1).split('=');
    setUrlParam(kv[0], kv[1]);
}