it-roy-ru.com

Как заменить параметр 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, это возможно?

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

45
Javier Villanueva

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

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 представляет первую часть внутри () (i.e) src=, а $2 представляет вторую часть внутри () (i.e) &, поэтому это означает, что вы собираетесь изменить значение между src и &. Более понятно, это должно быть так: 

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

ДОБАВИТЬ для замены всех вхождений:

Если у вас есть несколько параметров с одним и тем же именем, вы можете добавить к глобальному флагу регулярного выражения, например, эту text.replace(/(src=).*?(&)/g,'$1' + newSrc + '$2');, и он заменит все значения для тех параметров, которые имеют одно и то же имя.

46
ZenMaster

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

  • Параметр не существует в исходном 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;
}

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

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

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

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

Сегодня это возможно с родным JS

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

Вот модифицированный код 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
}
6
meliniak

UpdatE: превратите это в функцию Nice для вас: 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
wesbos

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

1
Ryan

Как насчет чего-то вроде этого:

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

В дополнение к @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

0
kasim badami