使用 JavaScript 更改 URL 参数并指定默认值

IT技术 javascript url query-string url-parameters url-parsing
2021-01-30 04:09:09

我有这个网址:

site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc

我需要的是能够将 'rows' url 参数值更改为我指定的值,比如说 10。如果 'rows' 不存在,我需要将它添加到 url 的末尾并添加我已经指定的值 (10)。

6个回答

我扩展了 Sujoy 的代码来组成一个函数。

/**
 * http://stackoverflow.com/a/10997390/11236
 */
function updateURLParameter(url, param, paramVal){
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";
    if (additionalURL) {
        tempArray = additionalURL.split("&");
        for (var i=0; i<tempArray.length; i++){
            if(tempArray[i].split('=')[0] != param){
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }
    }

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}

函数调用:

var newURL = updateURLParameter(window.location.href, 'locId', 'newLoc');
newURL = updateURLParameter(newURL, 'resId', 'newResId');

window.history.replaceState('', '', updateURLParameter(window.location.href, "param", "value"));

更新版本也处理 URL 上的锚点。

function updateURLParameter(url, param, paramVal)
{
    var TheAnchor = null;
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";

    if (additionalURL) 
    {
        var tmpAnchor = additionalURL.split("#");
        var TheParams = tmpAnchor[0];
            TheAnchor = tmpAnchor[1];
        if(TheAnchor)
            additionalURL = TheParams;

        tempArray = additionalURL.split("&");

        for (var i=0; i<tempArray.length; i++)
        {
            if(tempArray[i].split('=')[0] != param)
            {
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }        
    }
    else
    {
        var tmpAnchor = baseURL.split("#");
        var TheParams = tmpAnchor[0];
            TheAnchor  = tmpAnchor[1];

        if(TheParams)
            baseURL = TheParams;
    }

    if(TheAnchor)
        paramVal += "#" + TheAnchor;

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}
使用“var i=0”而不是“i=0”来防止创建/修改 i 作为全局变量。
2021-03-13 04:09:09
此函数的其他几个问题:(1) paramVal 不是 uri 编码的。(2) 如果 paramVal 为空,那么你得到 foo=null。它应该是 foo= (或者甚至更好,完全删除 foo )。
2021-03-20 04:09:09
你确定吗?它很容易为我工作。在这里查看:jsfiddle.net/mw49a
2021-03-27 04:09:09
我已经使用了它并且它有效,但答案可以对正在发生的事情进行一些解释,即。'if (additionalURL) { tempArray = additionalURL.split("&"); for (i=0; i<tempArray.length; i++){ if(tempArray[i].split('=')[0] != param){ newAdditionalURL += temp + tempArray[i]; 温度 = "&"; } } }' 尤其是内部如果。
2021-03-28 04:09:09
我似乎无法让它发挥作用。这是我的代码:jsfiddle.net/Draven/tTPYL/1 URL 看起来像http://www.domain.com/index.php?action=my_action&view-all=Yes,我需要更改“查看全部”值。我已关闭的 SO 问题:stackoverflow.com/questions/13025880/...
2021-04-04 04:09:09

我想你想要查询插件

例如:

window.location.search = jQuery.query.set("rows", 10);

无论行的当前状态如何,这都将起作用。

Mofle,那是因为Query插件使用了decodeURIComponent,decodeURIComponent("%F8")是无效的。
2021-03-18 04:09:09
@Wraith,你不需要插件。这只是window.location.pathname
2021-03-25 04:09:09
有没有办法从这个插件中检索基本网址?例如,如果我的 URL 是“ youtube.com/watch?v=PZootaxRh3M ”,则获取“ youtube.com/watch
2021-03-28 04:09:09
从你的 URL 中删除那些奇怪的东西。或者,换句话说,“更改您的查询字符串以仅使用有效的 UTF-8 字符”。:) F8 本身不是有效的 UTF-8 字符。
2021-04-07 04:09:09
@MattNorris 您不需要为此使用插件,但正确答案是:window.location.host + window.location.pathname 在您的情况下,它将是“www.youtube.com/watch”
2021-04-07 04:09:09

4 年后,在学到了很多东西之后,回答我自己的问题。尤其是您不应该对所有事情都使用 jQuery。我创建了一个可以解析/字符串化查询字符串的简单module。这使得修改查询字符串变得容易。

您可以按如下方式使用查询字符串

// parse the query string into an object
var q = queryString.parse(location.search);
// set the `row` property
q.rows = 10;
// convert the object to a query string
// and overwrite the existing query string
location.search = queryString.stringify(q);
这就像一个冠军!谢谢 Sindre 🏆🏆🏆(你要做的就是缩小“query-string/index.js”并将其粘贴到你的 js 底部)
2021-03-12 04:09:09
jQuery 对于 1 个函数来说太多了,所以你改用了 typescript、travis 和其他几个非开发依赖项:)
2021-03-14 04:09:09
哇,这是一个非常简单的解决方案。谢谢!
2021-03-15 04:09:09
拥有一个额外的图书馆似乎有点额外......
2021-03-17 04:09:09
@SindreSorhus 这有点轻松,但我认为正确看待这些事情的复杂性很重要。如果你觉得这没有建设性,那么同上。
2021-04-07 04:09:09

纯 js 中的快速小解决方案,不需要插件:

function replaceQueryParam(param, newval, search) {
    var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
    var query = search.replace(regex, "$1").replace(/&$/, '');

    return (query.length > 2 ? query + "&" : "?") + (newval ? param + "=" + newval : '');
}

像这样调用它:

 window.location = '/mypage' + replaceQueryParam('rows', 55, window.location.search)

或者,如果您想停留在同一页面并替换多个参数:

 var str = window.location.search
 str = replaceQueryParam('rows', 55, str)
 str = replaceQueryParam('cols', 'no', str)
 window.location = window.location.pathname + str

编辑,感谢 Luke:要完全删除参数,请传递falsenull为值:replaceQueryParam('rows', false, params)由于0 也是假的,请指定'0'.

@Bludream 该代码已在生产中运行多年。我还没有看到它复制了一个参数。你能发布一个repro或一些更具建设性的信息吗?
2021-03-13 04:09:09
@dVyper 正确,错误值会完全删除参数。使用文本 '0' 而不是整数 0。
2021-03-14 04:09:09
有问题,无缘无故复制我的参数,看看这个类似的解决方案stackoverflow.com/a/20420424/3160597
2021-03-16 04:09:09
这是旧的,但它对我来说非常有效。它简短、干净、易于修改,并最终完成了我需要的工作。谢谢。
2021-03-17 04:09:09
还要从输出中删除使用过的参数,请执行以下操作: str = replaceQueryParam('oldparam',false, str) - 基本上放置一个 false 类型值
2021-04-05 04:09:09

Ben Alman在这里有一个很好的 jquery 查询字符串/url 插件它允许您轻松操作查询字符串。

按照要求 -

转到他的测试页面这里

在 firebug 中,在控制台中输入以下内容

jQuery.param.querystring(window.location.href, 'a=3&newValue=100');

它将返回以下修改后的 url 字符串

http://benalman.com/code/test/js-jquery-url-querystring.html?a=3&b=Y&c=Z&newValue=100#n=1&o=2&p=3

请注意 a 的查询字符串值已从 X 更改为 3 并且添加了新值。

然后您可以使用新的 url 字符串,但您希望例如使用 document.location = newUrl 或更改锚链接等

不是 jQuery.param.querystring 而不是 jQuery.queryString 吗?
2021-03-14 04:09:09
为了避免 'TypeError' 它应该是: jQuery.queryString(window.location.href, 'a=3&newValue=100')
2021-03-23 04:09:09
你应该调用jQuery.param.querystring我猜他们已经重构了图书馆。
2021-03-29 04:09:09
这些功能都不再存在。您想手动更新 window.location.search。如果您不希望页面重新绘制,则会变得更加困难,因为这会导致页面更改。
2021-04-06 04:09:09
TypeError: jQuery.param.querystring is not a function
2021-04-10 04:09:09