Как заменить параметр url на javascript / jquery?

Я искал эффективный способ сделать это, но не смог его найти, в основном мне нужно, чтобы этот 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

Я хотел бы иметь возможность изменить URL-адрес в src параметр с другим значением, использующим javascript или jquery, возможно ли это?

спасибо заранее.

42
javascript jquery url url-parameters

9 ответов

разве это не было бы лучшим решением?

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=).*?(&)/,'' + newSrc + '');

EDIT:

добавил некоторую ясность в коде и сохранил " src " в полученной ссылке

представляет первую часть в () (Я.е) src= и представляет вторую часть в () (Я.е) &, так что это означает, что вы собираетесь изменить значение между src и &. Более ясно, это должно быть так:

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

следующее решение объединяет другие ответы и обрабатывает некоторые специальные случаи:

  • параметр не существует в исходном 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,'' + paramValue + '');
    }
    url = url.replace(/[?#]$/,'');
    return url + (url.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue;
}

известные ограничения:

  • не очищает параметр, устанавливая paramValue в null, вместо этого он устанавливает его в пустую строку. См.https://stackoverflow.com/a/25214672 Если вы хотите удалить параметр.
103

Javascript теперь дает очень полезную функциональность для обработки параметров url:URLSearchParams

var searchParams = new URLSearchParams(window.location.search);
searchParams.set('src','newSrc')
var newParams = searchParams.toString()
10
var href = new URL('https://google.com?q=cats');
href.searchParams.set('q', 'dogs');
console.log(href.toString()); // https://google.com/?q=dogs
5

здесь изменен код 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,'' + paramValue + '');
    }
    else{
        newUrl = newUrl + (newUrl.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue
    }
    return newUrl
}
3

UpdatE: сделайте его хорошей функцией для вас: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);
1

Если вы посмотрите внимательно, вы увидите две удивительные вещи об URL-адресах: (1) они кажутся простыми, но детали и угловые случаи на самом деле сложны, (2) удивительно JavaScript не предоставляет полный API для облегчения работы с ними. Я думаю, что полноценная библиотека предназначена для того, чтобы люди не изобретали колесо сами или не копировали умный, но, вероятно, ошибочный фрагмент кода regex. Может, попробуем Ури.js (http://medialize.github.io/URI.js/)

1

в дополнение к @stenix, это отлично сработало для меня

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

здесь нет необходимости сохранять переменную "url", просто замените в текущем url

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