wake-up-neo.net

Wie ersetze ich URL-Parameter durch Javascript/Jquery?

Ich habe nach einem effizienten Weg gesucht, aber ich konnte ihn nicht finden. Im Grunde brauche ich zum Beispiel diese 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

Ich möchte in der Lage sein, die URL im Parameter src mit einem anderen Wert mithilfe von Javascript oder Jquery zu ändern. Ist dies möglich?

Danke im Voraus.

45

Wäre das nicht eine bessere Lösung?

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');

BEARBEITEN:

fügte etwas Klarheit im Code hinzu und behielt 'src' im resultierenden Link bei

$1 steht für den ersten Teil innerhalb von () (d. h.) src= und $2 für den zweiten Teil innerhalb von () (d. h.) &. Dies bedeutet, dass Sie den Wert zwischen src und & ändern. Klarer sollte es so sein: 

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

ADD-ON zum Ersetzen aller Vorkommen:

Wenn Sie mehrere Parameter mit demselben Namen haben, können Sie das globale Flag "regex" wie dieses text.replace(/(src=).*?(&)/g,'$1' + newSrc + '$2'); anhängen. Dadurch werden alle Werte für diejenigen Parameter ersetzt, die denselben Namen verwenden.

46
ZenMaster

Die folgende Lösung kombiniert andere Antworten und behandelt einige Sonderfälle:

  • Der Parameter ist in der ursprünglichen URL nicht vorhanden
  • Der Parameter ist der einzige Parameter
  • Der Parameter ist erster oder letzter
  • Der neue Parameterwert ist derselbe wie der alte
  • Die URL endet mit einem ?-Zeichen
  • \b sorgt dafür, dass ein anderer Parameter, der mit paramName endet, nicht übereinstimmt

Lösung:

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

Bekannte Einschränkungen:

  • Löscht einen Parameter nicht, indem paramValue auf null gesetzt wird. Stattdessen wird der Wert auf leere Zeichenfolge gesetzt. Siehe https://stackoverflow.com/a/25214672 , wenn Sie den Parameter entfernen möchten.
107
stenix

Javascript gibt nun eine sehr nützliche Funktion, um URL-Parameter zu behandeln: URLSearchParams

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

Heute ist das mit nativer JS möglich

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

Hier ist der Code von stenix geändert, er ist nicht perfekt, aber er behandelt Fälle, in denen sich in der URL ein Parameter befindet, der die folgenden Parameter enthält:

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

In diesem Fall wird der Parameterwert der Suchabfrage geändert.

Code:

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: Machen Sie daraus eine schöne Funktion: 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; 
}

Dann mach es weiter!

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

Ich habe die beste Lösung, um den URL-Parameter zu ersetzen.

Die folgende Funktion ersetzt den Raumwert in der folgenden URL durch 3.

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

Ausgabe

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

1
Mayank Dudakiya

Wenn Sie genau hinschauen, sehen Sie zwei überraschende Dinge über URLs: (1) Sie scheinen einfach zu sein, aber die Details und Eckfälle sind wirklich schwer. (2) Erstaunlicherweise bietet JavaScript keine vollständige API, um die Arbeit mit ihnen zu erleichtern . Ich denke, eine vollwertige Bibliothek soll verhindern, dass Leute das Rad selbst neu erfinden oder das schlaue, aber wahrscheinlich fehlerhafte Regex-Code-Snippet eines beliebigen Typen kopieren. Vielleicht versuchen Sie URI.js ( http://medialize.github.io/URI.js/ )

1
Ryan

Ich benutze diese Methode, die:

  • ersetzen Sie die URL im Verlauf
  • gibt den Wert des entfernten Parameters zurück

    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
Laurent

Wie wäre es mit so etwas:

<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

Neben @stenix funktionierte das perfekt für mich

 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;

Hier muss die "url" -Variable nicht gespeichert werden, sondern muss in der aktuellen URL ersetzt werden

0
kasim badami

versuche dies

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);
};
0
Alper Ebicoglu