web-dev-qa-db-fra.com

Comment remplacer le paramètre url par javascript/jquery?

Je cherchais un moyen efficace de le faire mais je n'ai pas été en mesure de le trouver. Ce dont j'ai besoin, c'est que, compte tenu de cette URL, par exemple:

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

J'aimerais pouvoir changer l'URL dans le paramètre src avec une autre valeur en utilisant javascript ou jquery, est-ce possible?

Merci d'avance.

javascriptjqueryurlurl-parameters
45
Javier Villanueva

Ne serait-ce pas une meilleure solution?

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

MODIFIER:

ajout d'un peu de clarté dans le code et maintien de "src" dans le lien résultant

$1 représente la première partie du () (i.e) src= et $2 représente la deuxième partie du () (i.e) &. Cela indique donc que vous allez changer la valeur entre src et &. Plus clair, ça devrait être comme ça: 

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

ADD-ON pour remplacer toutes les occurrences:

Si vous avez plusieurs paramètres portant le même nom, vous pouvez ajouter à l'indicateur global regex, tel que ceci text.replace(/(src=).*?(&)/g,'$1' + newSrc + '$2');, qui remplacera toutes les valeurs pour les paramètres qui partagent le même nom.

46
ZenMaster

La solution suivante combine d'autres réponses et traite certains cas particuliers:

  • Le paramètre n'existe pas dans l'URL d'origine
  • Le paramètre est le seul paramètre
  • Le paramètre est premier ou dernier
  • La nouvelle valeur de paramètre est la même que l'ancienne
  • L'URL se termine par un caractère ?
  • \b garantit qu'un autre paramètre se terminant par paramName ne sera pas mis en correspondance

Solution:

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

Limitations connues:

107
stenix

Javascript donne maintenant une fonctionnalité très utile pour gérer les paramètres d’URL: URLSearchParams

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

De nos jours c'est possible avec JS natif

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

Voici le code de stenix modifié, ce n'est pas parfait, mais il gère les cas où il existe un paramètre dans l'URL qui contient le paramètre fourni, comme

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

Dans ce cas, la valeur du paramètre searchquery est modifiée.

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: Faites-en une fonction intéressante pour vous: 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; 
}

Alors allez-y!

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

Si vous regardez de plus près, vous verrez deux choses surprenantes au sujet des URL: (1) elles semblent simples, mais les détails et les cas critiques sont en réalité difficiles, (2) Étonnamment, JavaScript ne fournit pas une API complète pour faciliter leur travail. . Je pense qu'une bibliothèque à part entière est dans le but d'éviter que les gens réinventent eux-mêmes la roue ou ne copient l'extrait de code regex intelligent, mais probablement buggy, d'un mec au hasard. Peut-être essayez-vous URI.js ( http://medialize.github.io/URI.js/ )

1
Ryan

Que diriez-vous quelque chose comme ça:

<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

En plus de @stenix, cela me convenait parfaitement

 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;

Ici, pas besoin de sauvegarder la variable "url", il suffit de la remplacer

0
kasim badami