Как заменить параметр URL с помощью javascript / jquery? - PullRequest
47 голосов
/ 24 августа 2011

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

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

Ответы [ 12 ]

111 голосов
/ 06 декабря 2013

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

  • Параметр не существует в исходном 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, если вы хотите удалить параметр.
49 голосов
/ 24 августа 2011

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

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 для замены всех вхождений:

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

16 голосов
/ 20 февраля 2018

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

var searchParams = new URLSearchParams(window.location.search);
searchParams.set('src','newSrc')
var newParams = searchParams.toString()
11 голосов
/ 28 февраля 2018

В настоящее время это возможно с родным JS

var href = new URL('https://google.com?q=cats');
href.searchParams.set('q', 'dogs');
console.log(href.toString()); // https://google.com/?q=dogs
6 голосов
/ 06 января 2015

Вот модифицированный код stenix, он не идеален, но он обрабатывает случаи, когда в url есть параметр, который содержит предоставленный параметр, например:

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

В этом случае значение параметра поискового запроса изменяется.*

Код:

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
}
1 голос
/ 03 апреля 2019

У меня есть лучшее решение для замены параметра URL.

Следующая функция заменит номер комнаты на 3 в следующем URL.

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

выход

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

1 голос
/ 26 января 2015

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

1 голос
/ 24 августа 2011

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);
0 голосов
/ 15 мая 2019

Я использую этот метод, который:

  • заменяет URL в истории
  • возвращает значение удаленного параметра

    function getUrlParameterAndRemoveParameter(paramName) {
        var url = window.location.origin + window.location.pathname;
        var s = window.location.search.substring(1);
        var pArray = (s == "" ? [] : s.split('&'));
    
        var paramValue = null;
        var pArrayNew = [];
        for (var i = 0; i < pArray.length; i++) {
            var pName = pArray[i].split('=');
            if (pName[0] === paramName) {
                paramValue = pName[1] === undefined ? true : decodeURIComponent(pName[1]);
            }
            else {
                pArrayNew.push(pArray[i]);
            }
        }
    
        url += (pArrayNew.length == 0 ? "" : "?" + pArrayNew.join('&'));
        window.history.replaceState(window.history.state, document.title, url);
    
        return paramValue;
    }
    
0 голосов
/ 04 марта 2019

попробуйте

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