使用 javascript 如何将查询字符串参数添加到 url 如果不存在或如果存在，更新当前值？我正在使用 jquery 进行客户端开发。
如何添加或更新查询字符串参数？
IT技术
javascript
jquery
query-string
2021-01-11 14:53:16
6个回答
我编写了以下函数来完成我想要实现的目标：
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
更新（2020 年）：所有现代浏览器现在都支持URLSearchParams 。
该URLSearchParams实用程序可以与组合是这个有用的window.location.search。例如：
if ('URLSearchParams' in window) {
var searchParams = new URLSearchParams(window.location.search);
searchParams.set("foo", "bar");
window.location.search = searchParams.toString();
}
Nowfoo已经设置为bar不管它是否已经存在。
但是，上面的赋值window.location.search将导致页面加载，所以如果这不是可取的，请使用History API，如下所示：
if ('URLSearchParams' in window) {
var searchParams = new URLSearchParams(window.location.search)
searchParams.set("foo", "bar");
var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
history.pushState(null, '', newRelativePathQuery);
}
现在您无需编写自己的正则表达式或逻辑来处理可能存在的查询字符串。
然而，浏览器支持很差，因为它目前处于实验阶段，仅在最新版本的 Chrome、Firefox、Safari、iOS Safari、Android 浏览器、Android Chrome 和 Opera 中使用。如果您决定使用polyfill，请与polyfill一起使用。
我扩展了该解决方案并将其与另一个我发现的解决方案相结合，以根据用户输入替换/更新/删除查询字符串参数并考虑 urls 锚点。
不提供值将删除参数，提供一个将添加/更新参数。如果没有提供 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 语句中声明的哈希变量
基于@amateur 的回答（现在结合了@j_walker_dev 评论中的修复），但考虑到关于 url 中哈希标签的评论，我使用以下内容：
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
} else {
var hash = '';
if( uri.indexOf('#') !== -1 ){
hash = uri.replace(/.*#/, '#');
uri = uri.replace(/#.*/, '');
}
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
return uri + separator + key + "=" + value + hash;
}
}
编辑以修复[?|&]正则表达式，这当然应该[?&]在评论中指出
编辑：支持删除URL 参数的替代版本。我已用作value === undefined表示移除的方式。可以根据需要使用value === false甚至单独的输入参数。
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
if( value === undefined ) {
if (uri.match(re)) {
return uri.replace(re, '$1$2').replace(/[?&]$/, '').replaceAll(/([?&])&+/g, '$1').replace(/[?&]#/, '#');
} else {
return uri;
}
} else {
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
} else {
var hash = '';
if( uri.indexOf('#') !== -1 ){
hash = uri.replace(/.*#/, '#');
uri = uri.replace(/#.*/, '');
}
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
return uri + separator + key + "=" + value + hash;
}
}
}
在https://jsfiddle.net/cdt16wex/查看它的实际效果
这是我的图书馆：https : //github.com/Mikhus/jsurl
var u = new Url;
u.query.param='value'; // adds or replaces the param
alert(u)