给出Gal和tradyblix建议的修改window.location.search的代码示例:

var qs = window.location.search || "?";
var param = key + "=" + value; // remember to URI encode your parameters
if (qs.length > 1) {
    // more than just the question mark, so append with ampersand
    qs = qs + "&";
}
qs = qs + param;
window.location.search = qs;

我想要的是:

使用浏览器的本地URL API 可以添加、更新、获取或删除吗 期望在散列之后的查询字符串，例如对于单页应用程序

function queryParam(options = {}) { var defaults = { method: 'set', url: window.location.href, key: undefined, value: undefined, } for (var prop in defaults) { options[prop] = typeof options[prop] !== 'undefined' ? options[prop] : defaults[prop] } const existing = (options.url.lastIndexOf('?') > options.url.lastIndexOf('#')) ? options.url.substr(options.url.lastIndexOf('?') + 1) : '' const query = new URLSearchParams(existing) if (options.method === 'set') { query.set(options.key, options.value) return `${options.url.replace(`?${existing}`, '')}?${query.toString()}` } else if (options.method === 'get') { const val = query.get(options.key) let result = val === null ? val : val.toString() return result } else if (options.method === 'delete') { query.delete(options.key) let result = `${options.url.replace(`?${existing}`, '')}?${query.toString()}` const lastChar = result.charAt(result.length - 1) if (lastChar === '?') { result = `${options.url.replace(`?${existing}`, '')}` } return result } } // Usage: let url = 'https://example.com/sandbox/#page/' url = queryParam({ url, method: 'set', key: 'my-first-param', value: 'me' }) console.log(url) url = queryParam({ url, method: 'set', key: 'my-second-param', value: 'you' }) console.log(url) url = queryParam({ url, method: 'set', key: 'my-second-param', value: 'whomever' }) console.log(url) url = queryParam({ url, method: 'delete', key: 'my-first-param' }) console.log(url) const mySecondParam = queryParam({ url, method: 'get', key: 'my-second-param', }) console.log(mySecondParam) url = queryParam({ url, method: 'delete', key: 'my-second-param' }) console.log(url)

URLSearchParams是如此简单，所有现代浏览器(caniuse)都支持。

let p = new URLSearchParams(); p.set(“foo”、“酒吧”); p.set(“name”，“Jack & Jill?”); console.log (" http://example.com/? "+ p.toString ());

如果你想修改现有的URL，像这样构造对象:new URLSearchParams(window.location.search)并将字符串赋值给window.location.search。

如果它没有设置或想要更新一个新值，您可以使用:

window.location.search = 'param=value'; // or param=new_value

这是用简单Javascript写的。

EDIT

你可能想尝试使用jquery查询对象插件

窗口.位置.搜索 = jQuery.query.set（“param”， 5）;

我已经扩展了解决方案，并将其与另一个我发现的替换/更新/删除基于用户输入的查询字符串参数，并将url锚纳入考虑。

不提供值将删除参数，提供值将添加/更新参数。如果没有提供URL，它将从window.location中抓取

function UpdateQueryString(key, value, url) {
    if (!url) url = window.location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
        hash;

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

更新

在删除查询字符串中的第一个参数时，有一个错误，我重新工作了正则表达式和测试，以包括修复。

第二次更新

根据@JarónBarends的建议-调整值检查检查undefined和null，以允许设置0值

第三次更新

有一个错误，在一个标签之前直接删除一个查询字符串变量将失去标签符号，这已被修复

第四次更新

感谢@rooby在第一个RegExp对象中指出正则表达式优化。 由于使用@YonatanKarni发现的(\?|&)问题，将初始正则表达式设置为([?&])

第五次更新

在if/else语句中删除声明哈希变量

您可以使用浏览器的本地URL API以一种相当简单的方式做到这一点，其中key和value分别是参数名和参数值。

const url = new URL(location.href);
url.searchParams.set(key, value);

history.pushState(null, '', url);

这将保留有关URL的所有内容，只更改或添加一个查询参数。如果您不希望它创建一个新的浏览器历史记录条目，也可以使用replaceState而不是pushState。