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

IT技术 javascript jquery url url-parameters
2021-03-11 10:53:53

我一直在寻找一种有效的方法来做到这一点,但一直无法找到它,基本上我需要的是给定这个网址,例如:

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 ,这可能吗?

提前致谢。

6个回答

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

  • 原始url中不存在该参数
  • 参数是唯一的参数
  • 参数是第一个还是最后一个
  • 新的参数值与旧的相同
  • 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;
}

已知限制:

感谢您进行更新。我刚刚遇到了同样的错误,正准备通过修复来弄脏我的手,但您的修复却派上了用场。
2021-04-19 10:53:53
如果使用 URL 中已存在的参数名称和值调用该函数,则您的函数将附加一个重复参数。
2021-04-21 10:53:53
我只是添加url = url.replace(/\?$/,'');来解决第二个限制。小提琴:jsfiddle.net/ucubvgws
2021-04-28 10:53:53
这是比标有最高票数的解决方案更合适的解决方案。
2021-04-30 10:53:53
瑞安,你说得对。我已经编辑了该函数来处理这种情况。
2021-05-13 10:53:53

现在使用原生 JS 是可能的

var href = new URL('https://google.com?q=cats');
href.searchParams.set('q', 'dogs');
console.log(href.toString()); // https://google.com/?q=dogs
这是一种更简洁的方法。它甚至负责对参数值进行编码。
2021-04-21 10:53:53
简单干净。完美的!
2021-05-03 10:53:53

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

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');,这将替换那些共享同名参数的所有值。

不处理最后一个参数的情况。
2021-04-20 10:53:53
2 个捕获组...在此处查看更多信息:stackoverflow.com/questions/3512471/non-capturing-group
2021-04-22 10:53:53
@ZenMaster Perfect :),你能解释一下 text.replace(/(src=).*?(&)/,'$1' + newSrc + '$2') 的含义吗?
2021-05-05 10:53:53
我使用 RegExp/(src=).*?(&|$)/来解决最后一个参数问题。
2021-05-12 10:53:53
不处理替换最后一个参数的一般情况。对于类似的问题,我将正则表达式更改为 /(src=).*?(&)?/ 。
2021-05-15 10:53:53

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

var searchParams = new URLSearchParams(window.location.search);
searchParams.set('src','newSrc')
var newParams = searchParams.toString()
现在使用原生 JS 是可能的
2021-04-16 10:53:53
完美地工作。虽然没有 IE 支持。
2021-04-21 10:53:53
如何使用它来替换 URL 中的一组现有参数?
2021-04-21 10:53:53
确实如此,目前不支持IEMobile Safari但是可以在那里那里找到可靠的解决方案
2021-05-14 10:53:53

这是修改后的 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
}
当 url 为“?q=1&x=”时,这将失败,它将返回“?q=1?”,我认为 else 中的条件应该是 >=0 而不是 >0 来解决这个问题。
2021-04-16 10:53:53
我在我的解决方案中添加了一个 \b 来解决这个问题。谢谢你指出。
2021-04-27 10:53:53