JavaScript 修改 URL 参数数组

javascript modify url parameter array

本文关键字：数组 参数 URL 修改 JavaScript      更新时间：2023-09-26

我有一个包含数组作为参数的网址。例如： 

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 .

我怎样才能使这样的功能？提前感谢！

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

document.location.search - 为您提供足够容易的查询字符串。

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

arguments - 让我们使用它而不是定义的参数，以便您可以根据需要传递任意数量的（或尽可能少）的过滤器。

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

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[]"以外的事情），我不会让它设置位置， 而是返回一个查询字符串值，您可以对它执行任何操作。 但是这个函数应该可以解决问题。

function toggleFilter(url, key) {
    var result;
    if(url.indexOf('filter[]=' + key) > -1)
        result = url.replace('filter[]=' + key + '&', '').replace('filter[]=' + key, '');
    else
        result = url + (url.indexOf('?') > -1 ? '&' : '?') + 'filter[]=' + key;
    result = result.indexOf('?') == result.length - 1 ? 
        result.substring(0, result.length - 1) : 
        result;
    return result;
    // or if you want to redirect just write window.location.href = result;
}
相关文章：