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

问题描述 投票:47回答:12

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

提前致谢。

javascript jquery url url-parameters
12个回答
49
投票

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

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用于替换所有出现的事件:

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


0
投票

这样的事情怎么样:

 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;

0
投票

试试这个

<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>

0
投票

我用这个方法:

  • 替换历史记录中的网址
  • 返回已删除参数的值 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); };

113
投票

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

  • 该参数不存在于原始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;
}

已知限制:


16
投票

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

URLSearchParams

12
投票

现在可以使用本机JS

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

6
投票

这里修改了stenix的代码,它并不完美,但它处理的情况是url中有一个包含提供参数的参数,例如:

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

在这种情况下,searchquery参数值被更改。

码:

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

1
投票

更新:让它成为一个很好的功能: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 }

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; 
}

1
投票

如果你仔细观察,你会看到两个关于URL的令人惊讶的事情:(1)它们看起来很简单,但细节和极端情况实际上很难,(2)令人惊讶的是JavaScript并没有提供完整的API来让它们更容易使用。我认为一个成熟的图书馆是为了避免人们自己重新发明轮子或复制一些随机的家伙聪明,但可能是错误的正则表达式代码片段。也许试试URI.js(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);


1
投票

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

以下功能将在以下URL中将房间值替换为3。

http://medialize.github.io/URI.js/

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; }


0
投票

除了@stenix之外,这对我来说也很完美

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

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

© www.soinside.com 2019 - 2024. All rights reserved.