Javascript url修改

Question

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

<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”，而不是向 link 添加新变量。当然，如果我从&numb 菜单中选择一个，它不应该从&cord 菜单中替换一个。

这能做到吗？如果是，那又如何？

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

Answer 1

您可以添加一个 if 语句，以便它检查 window 中是否已经有一个值。通过这样做，您将用当前值替换该值。

Answer 2

将window.location.href更改为window.location.origin

<select onChange="window.location.href=window.location.origin+this.value">

fiddle

Answer 3

编辑做这样的事情：http://jsfiddle.net/63s8eb70/5/

<select onChange="makeUrl()">
  <option value="?numb=1">1</option>
  <option value="?numb=2">2</option>
  <option value="?numb=3">3</option>
</select>

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

<br><br>

<div id="cu"></div>

JS

var current_Url = "";

function makeUrl() {

    var base = window.location.origin;

    var e = document.getElementById("select");
    var val = e.options[e.selectedIndex].value;

    if (current_Url === "") {
        current_Url = base + val;
        document.getElementById('cu').innerHTML = current_Url;
        //Comment out the next line on you actual site
        //document.location.href = current_Url; 
    } 
    else {
        current_Url += val;
        document.getElementById('cu').innerHTML = current_Url;
        //Comment out the next line on you actual site
        //document.location.href = current_Url; 
    }
}

Answer 4

此函数接受一个参数和一个值，并将其添加到 URL 或更新参数（如果它已存在）。

function urlQueryString(parameter, value) {
    var url = window.location.href;
    var regex = new RegExp("([?&])" + parameter + "=.*?(&|#|$)(.*)", "gi"),
        hash;

    if (regex.test(url)) {
        if (typeof value !== 'undefined' && value !== null)
            window.location = url.replace(regex, '' + parameter + "=" + value + '');
        else {
            hash = url.split('#');
            url = hash[0].replace(regex, '').replace(/(&|\?)$/, '');
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) 
                url += '#' + hash[1];
            window.location = url;
        }
    }
    else {
        if (typeof value !== 'undefined' && value !== null) {
            var separator = url.indexOf('?') !== -1 ? '&' : '?';
            hash = url.split('#');
            url = hash[0] + separator + parameter + '=' + value;
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) 
                url += '#' + hash[1];
            window.location = url;
        }
        else
            window.location = url;
    }
}

Answer 5

这些函数应该可以让您解析和编辑 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]);
}

Answer 6

明智的做法是为输入元素提供一个 name 属性，指示您要更改的参数的名称，这样您就不会重复 numb= 部分和 coord= 一遍又一遍。考虑这样的事情，它可以让您参数化您要更改的查询键的名称：

<select name="numb" onChange="updateSearch(event)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select name="coord" onChange="updateSearch(event)">
  <option value="x">x</option>
  <option value="y">y</option>
  <option value="z">z</option>
</select>

这样您就可以创建任意数量的输入元素，并为 onchange.

使用相同的事件处理程序

相应的 javascript 可能如下所示：

function updateSearch(event) {
    var param = event.target.name;
    var value = event.target.value;
    var params = parseQuery(window.location.search);

    params[param] = value;

    window.location.search = buildQuery(params);
}

function parseQuery(querystring) {
    if (!querystring) { return {}; }
    var pairs = querystring.replace(/^\?/, '').split('&');
    var params = {};
    var pair;
    var i;

    for (i = 0; i < pairs.length; i++) {
        pair = pairs[i].split('=');
        params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }
    return params;
}

function buildQuery(params) {
    var pairs = [];
    var key;
    for (key in params) { 
        if (!params.hasOwnProperty(key)) { continue; }
        pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(params[key]));
    }
    return pairs.join('&');
}

这里的一些冗长之处在于安全地处理 URL 中的一串序列化参数，而无需使用大量字符串操作。考虑这些函数可重复用于您想要从客户端获取或设置一些查询参数的任何实例。

这是一个 jsFiddle：https://jsfiddle.net/8fftmwzn/20/

此实现（当然）不会将输入设置为您的 URL 查询字符串中已有的内容。这是一个单独的挑战。

Javascript url修改

Javascript url modification

html

javascript

window.location