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

Question

我一直在寻找一种有效的方法来做到这一点,但一直无法找到它,基本上我需要的是给定这个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

我希望能够src使用javascript或jquery使用其他值更改参数中的URL ,这可能吗？

提前致谢.

Answer 1

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

• 该参数不存在于原始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来清除参数,而是将其设置为空字符串.如果要删除参数,请参阅/sf/answers/1765027071/.

Answer 2

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

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

ADD-ON用于替换所有发生的事件:

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

Answer 3

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

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

Answer 4

现在可以使用本机JS

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

Answer 5

在现代浏览器（除了 IE9 及更低版本之外的所有浏览器）中，有了新的 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

Answer 6

// 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());

Answer 7

这里修改了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
}