如何用 javascript/jquery 替换 url 参数？答案

【问题标题】：How to replace url parameter with javascript/jquery?如何用 javascript/jquery 替换 url 参数？
【发布时间】：2011-11-02 12:30:13
【问题描述】：

我一直在寻找一种有效的方法来做到这一点，但一直没能找到，基本上我需要的是给定这个 url，例如：

http://localhost/mysite/includes/phpThumb.php?src=http://media2.jupix.co.uk/v3/clients/4/properties/795/IMG_795_1_large.jpg&w=592&aoe=1&q=100

我希望能够使用 javascript 或 jquery 将 src 参数中的 URL 更改为另一个值，这可能吗？

提前致谢。

【问题讨论】：

Change URL parameters的可能重复

标签： javascript jquery url url-parameters

【解决方案1】：

一个更长但可能更灵活的答案，它依赖于两个函数。第一个生成一个包含所有参数的键/值字典，另一个自己进行替换。这应该适用于旧浏览器，并且在参数不存在时也可以创建。

var get_all_params=function(url)
{               
    var regexS = /(?<=&|\?)([^=]*=[^&#]*)/;
    var regex = new RegExp( regexS,'g' );
    var results = url.match(regex);
    if(results==null)
    {
        return {};
    }
    else
    {
        returned={};
        for(i=0;i<results.length;i++)
        {
            var tmp=results[i];                
            var regexS2="([^=]+)=([^=]+)";
            var regex2 = new RegExp( regexS2 );
            var results2 = regex2.exec(tmp );                
            returned[results2[1]]=results2[2];
        }
        return returned;
    }   
}

var replace_param=function(url, param, value)
{
    var get_params=get_all_params(url);
    var base_url=url.split("?");
    get_params[param]=value;
    var new_params=Array();
    for(key in get_params)
    {
        new_params.push(key+"="+get_params[key]);
    }
    return base_url[0]+"?"+new_params.join("&");
}

调用示例：

var url ="https://geoserver.xxx.com/geoserver/project?service=WFS&version=1.0.0&request=GetFeature&typename=localities";
url=replace_param(url, "service","WMS");

【讨论】：

【解决方案2】：

// Construct URLSearchParams object instance from current URL querystring.
var queryParams = new URLSearchParams(window.location.search);
 
// Set new or modify existing parameter value. 
queryParams.set("myParam", "myValue");
 
// Replace current querystring with the new one.
history.replaceState(null, null, "?"+queryParams.toString());

我们可以使用 pushState() 方法创建一个新条目，而不是使用 replaceState() 修改当前历史条目：

history.pushState(null, null, "?"+queryParams.toString());

【讨论】：

【解决方案3】：

这是用 paramVal 替换 url 参数的函数

function updateURLParameter(url, param, paramVal){
        if(!url.includes('?')){
            return url += '?' + param + '=' + paramVal;
        }else if(!url.includes(param)){
            return url += '&' + param + '=' + paramVal;
        }else {
            let paramStartIndex = url.search(param);
            let paramEndIndex = url.indexOf('&', paramStartIndex);
            if (paramEndIndex == -1){
                paramEndIndex = url.length;
            }
            let brands = url.substring(paramStartIndex, paramEndIndex);
    
            return url.replace(brands, param + '=' + paramVal);
        }
    }

【讨论】：

【解决方案4】：

在现代浏览器（IE9 及以下版本除外）中，new URL api 让我们的生活变得更轻松了

var url = new window.URL(document.location); // fx. http://host.com/endpoint?abc=123
url.searchParams.set("foo", "bar");
console.log(url.toString()); // http://host/endpoint?abc=123&foo=bar
url.searchParams.set("foo", "ooft");
console.log(url.toString()); // http://host/endpoint?abc=123&foo=ooft

【讨论】：

N.B URL 构造函数并非在所有 IE 浏览器上都可用developer.mozilla.org/en-US/docs/Web/API/URL/URL
这是最简单和最新的答案。

【解决方案5】：

2020 年回答，因为我缺少自动删除参数的功能，所以：

根据我最喜欢的答案https://stackoverflow.com/a/20420424/6284674：我将它与以下能力相结合：

如果null 或'' 的值基于https://stackoverflow.com/a/25214672/6284674 答案，则自动删除 URL 参数
可选择推送更新后的 URL 直接在 window.location 栏中
IE 支持，因为它只使用正则表达式，没有 URLSearchParams

JSfiddle：https://jsfiddle.net/MickV/zxc3b47u/


function replaceUrlParam(url, paramName, paramValue){
    if(paramValue == null || paramValue == "")
        return url
        .replace(new RegExp('[?&]' + paramValue + '=[^&#]*(#.*)?$'), '$1')
        .replace(new RegExp('([?&])' + paramValue + '=[^&]*&'), '$1');   
    url = url.replace(/\?$/,'');
    var pattern = new RegExp('\\b('+paramName+'=).*?(&|$)')
    if(url.search(pattern)>=0){
        return url.replace(pattern,'$1' + paramValue + '$2');
    }
    return url + (url.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue 
}

// Orginal URL (default jsfiddle console URL)
//https://fiddle.jshell.net/_display/?editor_console=true

console.log(replaceUrlParam(window.location.href,'a','2'));   
//https://fiddle.jshell.net/_display/?editor_console=true&a=2

console.log(replaceUrlParam(window.location.href,'a',''));   
//https://fiddle.jshell.net/_display/?editor_console=true

console.log(replaceUrlParam(window.location.href,'a',3));   
//https://fiddle.jshell.net/_display/?editor_console=true&a=3

console.log(replaceUrlParam(window.location.href,'a', null));   
//https://fiddle.jshell.net/_display/?editor_console=true&

//Optionally also update the replaced URL in the window location bar
//Note: This does not work in JSfiddle, but it does in a normal browser
function pushUrl(url){
    window.history.pushState("", "", replaceUrlParam(window.location.href,'a','2'));   
}


pushUrl(replaceUrlParam(window.location.href,'a','2'));   
//https://fiddle.jshell.net/_display/?editor_console=true&a=2

pushUrl(replaceUrlParam(window.location.href,'a',''));   
//https://fiddle.jshell.net/_display/?editor_console=true

pushUrl(replaceUrlParam(window.location.href,'a',3));   
//https://fiddle.jshell.net/_display/?editor_console=true&a=3

pushUrl(replaceUrlParam(window.location.href,'a', null));   
//https://fiddle.jshell.net/_display/?editor_console=true&

【讨论】：

【解决方案6】：

如果您的用例非常狭窄且具体，例如替换具有字母数字值的给定名称的特定参数，并且某些特殊字符的上限达到特定长度限制，您可以尝试这种方法：

urlValue.replace(/\bsrc=[0-9a-zA-Z_@.#+-]{1,50}\b/, 'src=' + newValue);

例子：

let urlValue = 'www.example.com?a=b&src=test-value&p=q';
const newValue = 'sucess';
console.log(urlValue.replace(/\bsrc=[0-9a-zA-Z_@.#+-]{1,50}\b/, 'src=' + newValue));
// output - www.example.com?a=b&src=sucess&p=q

【讨论】：

【解决方案7】：

编辑参数 URLSearchParams 对象的 set 方法设置参数的新值。

设置新值后，您可以使用 toString() 方法获取新的查询字符串。此查询字符串可以设置为 URL 对象的搜索属性的新值。

然后可以使用 URL 对象的 toString() 方法检索最终的新 url。


var query_string = url.search;

var search_params = new URLSearchParams(query_string); 

// new value of "id" is set to "101"
search_params.set('id', '101');

// change the search property of the main url
url.search = search_params.toString();

// the new url string
var new_url = url.toString();

// output : http://demourl.com/path?id=101&topic=main
console.log(new_url);

来源 - https://usefulangle.com/post/81/javascript-change-url-parameters

【讨论】：

set 方法还会删除所有其他参数。
一点也不。 set 方法只设置id 参数。其他任何参数均未更改。

【解决方案8】：

没有正则表达式的解决方案，对眼睛更容易一点，我一直在寻找的解决方案

这支持端口、哈希参数等。

使用浏览器属性元素作为解析器。

function setUrlParameters(url, parameters) {
    var parser = document.createElement('a');
    parser.href = url;

    url = "";

    if (parser.protocol) {
        url += parser.protocol + "//";
    }

    if (parser.host) {
        url += parser.host;
    }

    if (parser.pathname) {
        url += parser.pathname;
    }

    var queryParts = {};

    if (parser.search) {
        var search = parser.search.substring(1);

        var searchParts = search.split("&");
        for (var i = 0; i < searchParts.length; i++) {
            var searchPart = searchParts[i];

            var whitespaceIndex = searchPart.indexOf("=");

            if (whitespaceIndex !== -1) {
                var key = searchPart.substring(0, whitespaceIndex);
                var value = searchPart.substring(whitespaceIndex + 1);

                queryParts[key] = value;
            } else {
                queryParts[searchPart] = false;
            }
        }
    }

    var parameterKeys = Object.keys(parameters);

    for (var i = 0; i < parameterKeys.length; i++) {
        var parameterKey = parameterKeys[i];

        queryParts[parameterKey] = parameters[parameterKey];
    }


    var queryPartKeys = Object.keys(queryParts);

    var query = "";

    for (var i = 0; i < queryPartKeys.length; i++) {
        if (query.length === 0) {
            query += "?";
        }
        if (query.length > 1) {
            query += "&";
        }

        var queryPartKey = queryPartKeys[i];

        query += queryPartKey;

        if (queryParts[queryPartKey]) {
            query += "=";

            query += queryParts[queryPartKey];
        }
    }

    url += query;

    if (parser.hash) {
        url += parser.hash;
    }

    return url;
}

【讨论】：

【解决方案9】：

我使用这种方法：

替换历史记录中的url

返回被移除参数的值

function getUrlParameterAndRemoveParameter(paramName) {
    var url = window.location.origin + window.location.pathname;
    var s = window.location.search.substring(1);
    var pArray = (s == "" ? [] : s.split('&'));

    var paramValue = null;
    var pArrayNew = [];
    for (var i = 0; i < pArray.length; i++) {
        var pName = pArray[i].split('=');
        if (pName[0] === paramName) {
            paramValue = pName[1] === undefined ? true : decodeURIComponent(pName[1]);
        }
        else {
            pArrayNew.push(pArray[i]);
        }
    }

    url += (pArrayNew.length == 0 ? "" : "?" + pArrayNew.join('&'));
    window.history.replaceState(window.history.state, document.title, url);

    return paramValue;
}

【讨论】：

【解决方案10】：

我已经找到了替换 URL 参数的最佳解决方案。

以下函数会将以下 URL 中的房间值替换为 3。

http://example.com/property/?min=50000&max=60000&room=1&property_type=House

var newurl = replaceUrlParam('room','3');
history.pushState(null, null, newurl);

function replaceUrlParam(paramName, paramValue){
    var url = window.location.href;

    if (paramValue == null) {
        paramValue = '';
    }

    var pattern = new RegExp('\\b('+paramName+'=).*?(&|#|$)');
    if (url.search(pattern)>=0) {
        return url.replace(pattern,'$1' + paramValue + '$2');
    }

    url = url.replace(/[?#]$/,'');
    return url + (url.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue;
}

输出

http://example.com/property/?min=50000&max=60000&room=3&property_type=House

【讨论】：

你为什么要转发 Stenix 的答案？

【解决方案11】：

试试这个

var updateQueryStringParam = function (key, value) {

    var baseUrl = [location.protocol, '//', location.host, location.pathname].join(''),
        urlQueryString = document.location.search,
        newParam = key + '=' + value,
        params = '?' + newParam;

    // If the "search" string exists, then build params from it
    if (urlQueryString) {
        var updateRegex = new RegExp('([\?&])' + key + '[^&]*');
        var removeRegex = new RegExp('([\?&])' + key + '=[^&;]+[&;]?');

        if( typeof value == 'undefined' || value == null || value == '' ) { // Remove param if value is empty
            params = urlQueryString.replace(removeRegex, "$1");
            params = params.replace( /[&;]$/, "" );

        } else if (urlQueryString.match(updateRegex) !== null) { // If param exists already, update it
            params = urlQueryString.replace(updateRegex, "$1" + newParam);

        } else { // Otherwise, add it to end of query string
            params = urlQueryString + '&' + newParam;
        }
    }

    // no parameter was set so we don't need the question mark
    params = params == '?' ? '' : params;

    window.history.replaceState({}, "", baseUrl + params);
};

【讨论】：

【解决方案12】：

现在可以使用原生 JS 实现

var href = new URL('https://google.com?q=cats');
href.searchParams.set('q', 'dogs');
console.log(href.toString()); // https://google.com/?q=dogs

【讨论】：

简单干净。完美！
这是一种更简洁的方法。它甚至负责对参数值进行编码。

【解决方案13】：

这不是更好的解决方案吗？

var text = 'http://localhost/mysite/includes/phpThumb.php?src=http://media2.jupix.co.uk/v3/clients/4/properties/795/IMG_795_1_large.jpg&w=592&aoe=1&q=100';
var newSrc = 'www.google.com';
var newText = text.replace(/(src=).*?(&)/,'$1' + newSrc + '$2');

编辑：

在代码中添加了一些清晰度，并在生成的链接中保留了“src”

$1 代表()（即）src= 中的第一部分，$2 代表()（即）& 中的第二部分，因此这表明您要更改值在src 和& 之间。更清楚一点，应该是这样的：

src='changed value'& // this is to be replaced with your original url

用于替换所有出现的附加功能：

如果您有多个具有相同名称的参数，您可以附加到正则表达式全局标志，例如 text.replace(/(src=).*?(&)/g,'$1' + newSrc + '$2');，这将替换那些具有相同名称的参数的所有值。

【讨论】：

不处理替换最后一个参数的一般情况。我将正则表达式更改为 /(src=).*?(&)?/ 以解决类似问题。
@ZenMaster Perfect :)，你能解释一下 text.replace(/(src=).*?(&)/,'$1' + newSrc + '$2');
2 个捕获组...在此处查看更多信息：stackoverflow.com/questions/3512471/non-capturing-group
不处理最后一个参数的大小写。
我使用 RegExp /(src=).*?(&|$)/ 来解决最后一个参数问题。

【解决方案14】：

下面的解决方案结合了其他答案并处理了一些特殊情况：

原url中不存在该参数
参数是唯一的参数
参数是第一个还是最后一个
新参数值与旧参数值相同
网址以? 字符结尾
\b 确保不会匹配以 paramName 结尾的另一个参数

解决方案：

function replaceUrlParam(url, paramName, paramValue)
{
    if (paramValue == null) {
        paramValue = '';
    }
    var pattern = new RegExp('\\b('+paramName+'=).*?(&|#|$)');
    if (url.search(pattern)>=0) {
        return url.replace(pattern,'$1' + paramValue + '$2');
    }
    url = url.replace(/[?#]$/,'');
    return url + (url.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue;
}

已知限制：

不会通过将 paramValue 设置为 null 来清除参数，而是将其设置为空字符串。如果要删除参数，请参阅https://stackoverflow.com/a/25214672。

【讨论】：

这比投票最高的解决方案更合适。
如果使用 URL 中已存在的参数名称和值调用函数，您的函数将附加一个重复的参数。
瑞恩，你说得对。我已经编辑了函数来处理这种情况。
感谢您进行更新。我刚刚遇到了同样的错误，正准备通过修复来弄脏我的手，但你的修复来救援了。
我刚刚添加了url = url.replace(/\?$/,''); 来解决第二个限制。小提琴：jsfiddle.net/ucubvgws

【解决方案15】：

Javascript 现在提供了一个非常有用的功能来处理 url 参数：URLSearchParams

var searchParams = new URLSearchParams(window.location.search);
searchParams.set('src','newSrc')
var newParams = searchParams.toString()

【讨论】：

完美运行。虽然不支持 IE。
这是真的，目前不支持 IE 和 Mobile Safari。但是可以找到可靠的解决方案there 或there。
现在可以使用原生 JS
如何使用它来替换 URL 中的现有参数集？

【解决方案16】：

这样的事情怎么样：

<script>
function changeQueryVariable(keyString, replaceString) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    var replaced = false;
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == keyString) {
            vars[i] = pair[0] + "="+ replaceString;
            replaced = true;
        }
    }
    if (!replaced) vars.push(keyString + "=" + replaceString);
    return vars.join("&");
}
</script>

【讨论】：

唯一的问题是URL不是来自浏览器而是来自变量，所以我不能使用搜索方法:(
没关系，你可以用正则表达式做同样的事情。这是一个例子：stackoverflow.com/questions/901115/…

【解决方案17】：

如果你仔细观察，你会发现关于 URL 的两个令人惊讶的事情：(1) 它们看起来很简单，但细节和极端情况实际上很难，(2) 令人惊讶的是，JavaScript 没有提供完整的 API 来处理他们更容易。我认为一个成熟的库是为了避免人们自己重新发明轮子或复制一些随机的家伙的聪明但可能有错误的正则表达式代码 sn-p。也许试试 URI.js (http://medialize.github.io/URI.js/)

【讨论】：

作为一个不知道正则表达式的人，我害怕'一些随机的家伙很聪明，但可能有错误的正则表达式代码 sn-p' 哈哈。

【解决方案18】：

这里是修改后的 stenix 的代码，它并不完美，但它可以处理 url 中包含提供参数的参数的情况，例如：

/search?searchquery=text and 'query' is provided.

在这种情况下，searchquery 参数值已更改。

代码：

function replaceUrlParam(url, paramName, paramValue){
    var pattern = new RegExp('(\\?|\\&)('+paramName+'=).*?(&|$)')
    var newUrl=url
    if(url.search(pattern)>=0){
        newUrl = url.replace(pattern,'$1$2' + paramValue + '$3');
    }
    else{
        newUrl = newUrl + (newUrl.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue
    }
    return newUrl
}

【讨论】：

我在我的解决方案中添加了一个 \b 来解决问题。感谢您指出。
当url为"?q=1&x="时会失败，会返回"?q=1?"，我认为else中的条件应该是>=0而不是>0解决这个问题。

【解决方案19】：

除了@stenix，这对我来说非常有效

 url =  window.location.href;
    paramName = 'myparam';
        paramValue = $(this).val();
        var pattern = new RegExp('('+paramName+'=).*?(&|$)') 
        var newUrl = url.replace(pattern,'$1' + paramValue + '$2');
        var n=url.indexOf(paramName);
        alert(n)
        if(n == -1){
            newUrl = newUrl + (newUrl.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue 
        }
        window.location.href = newUrl;

这里不需要保存“url”变量，只需要在当前url中替换即可

【讨论】：

替换乘法参数怎么样？

【解决方案20】：

更新：把它变成一个适合你的功能：http://jsfiddle.net/wesbos/KH25r/1/

function swapOutSource(url, newSource) {
    params = url.split('&');
    var src = params[0].split('=');
    params.shift();
    src[1] = newSource;
    var newUrl = ( src.join('=') + params.join('&')); 
    return newUrl; 
}

那就去吧！

var newUrl = swapOutSource("http://localhost/mysite/includes/phpThumb.php?src=http://media2.jupix.co.uk/v3/clients/4/properties/795/IMG_795_1_large.jpg&w=592&aoe=1&q=100","http://link/to/new.jpg");


console.log(newUrl);

【讨论】：

这里的问题是你总是替换第一个参数。因此，如果我将字符串重新排列为“localhost/mysite/includes/phpThumb.php?q=100&src=http://…”，它会突然中断...