javascript修改url参数数组

Question

我有一个 url，其中包含一个数组作为参数。例如:

test.dev/orders?filter[]=temp&filter[]=placed

我想创建一个js函数，可以切换数组的内容并在修改后重定向。

例如，如果我调用函数 toggleFilter('temp') 我希望 js 重定向到 test.dev/orders?filter[]=placed。

但是如果我调用 toggleFilter('processed') 我想让 js 重定向到 test.dev/orders?filter[]=temp&filter[]=placed&filter[]=processed .

我怎样才能实现这样的功能？提前致谢!

Answer 1

该函数需要获取当前的查询字符串，将其分解，然后根据参数重新组合。

document.location.search - 轻松为您提供查询字符串。

String.split - 让您将其分解为多个部分。

参数 - 让我们使用它而不是定义的参数，这样您就可以根据需要传递尽可能多(或尽可能少)的过滤器。

从那里，它只是解释参数来组装新的查询字符串......

function toggleFilter() {
    var queryString = document.location.search;
    queryString = queryString.substring(1); // Get rid of the initial '?'

    // Break it into individual parts and remove the 'filter[]=' leaving just the values
    var queryStringSplit = queryString.split('&');
    var values = [];
    for (var qss = 0; qss < queryStringSplit.length; qss++) {
        var value = queryStringSplit[qss];
        value = value.split('=')[1];

        // This will remove any "blank" values (like 'filter[]=&...")
        if (value)
            values.push(value);
    }

    // Add / remove values in arguments
    for (var a = 0; a < arguments.length; a++) {
        var arg = arguments[a];
        var index = values.indexOf(arg);
        if (index == -1)
            values.push(arg);
        else
            values.splice(index, 1);
    }

    // Re-assemble the new query string
    queryString = ''; // Default to blank
    if (values.length)
        queryString = 'filter[]=' + values.join('&filter[]=');

    // Redirect to new location
    location.search = queryString;
}

话虽如此，我认为如果你想让它成为任何类型的可重用，我会将其称为“toggleQueryString”之类的东西，并修改逻辑以将第一个参数解释为要切换的 queryString 值的名称(这样你就可以做“filter[]”以外的事情)，我不会让它设置位置，而是返回一个查询字符串值，您可以用它做任何您想做的事情。但这个函数应该可以解决问题。