Hinzufügen eines Parameters zur URL mit JavaScript
In einer Webanwendung, die AJAX aufruft, muss ich eine Anfrage senden, aber am Ende der URL einen Parameter hinzufügen, zum Beispiel:
Ursprüngliche URL:
Resultierende URL:
http: //server/myapp.php? id = 1 & enabled = true
Suchen Sie nach einer JavaScript-Funktion, die die URL nach jedem Parameter analysiert, dann den neuen Parameter hinzufügt oder den Wert aktualisiert, falls bereits einer vorhanden ist.
Eine grundlegende Implementierung, die Sie anpassen müssen, würde ungefähr so aussehen:
function insertParam(key, value)
{
key = encodeURI(key); value = encodeURI(value);
var kvp = document.location.search.substr(1).split('&');
var i=kvp.length; var x; while(i--)
{
x = kvp[i].split('=');
if (x[0]==key)
{
x[1] = value;
kvp[i] = x.join('=');
break;
}
}
if(i<0) {kvp[kvp.length] = [key,value].join('=');}
//this will reload the page, it's likely better to store this until finished
document.location.search = kvp.join('&');
}
Dies ist ungefähr doppelt so schnell wie eine reguläre oder suchbasierte Lösung, hängt jedoch vollständig von der Länge der Abfragezeichenfolge und dem Index einer Übereinstimmung ab
die langsame Regex-Methode, gegen die ich mich aus Gründen der Vollständigkeit orientiert habe (ca. + 150% langsamer)
function insertParam2(key,value)
{
key = encodeURIComponent(key); value = encodeURIComponent(value);
var s = document.location.search;
var kvp = key+"="+value;
var r = new RegExp("(&|\\?)"+key+"=[^\&]*");
s = s.replace(r,"$1"+kvp);
if(!RegExp.$1) {s += (s.length>0 ? '&' : '?') + kvp;};
//again, do what you will here
document.location.search = s;
}
Sie können eine der folgenden Optionen verwenden:
- https://developer.mozilla.org/en-US/docs/Web/API/URL
- https://developer.mozilla.org/en/docs/Web/API/URLSearchParams
Beispiel:
var url = new URL("http://foo.bar/?x=1&y=2");
// If your expected result is "http://foo.bar/?x=1&y=2&x=42"
url.searchParams.append('x', 42);
// If your expected result is "http://foo.bar/?x=42&y=2"
url.searchParams.set('x', 42);
Vielen Dank für Ihren Beitrag. Ich habe annakata Code verwendet und geändert, um auch den Fall einzuschließen, dass die URL überhaupt keine Abfragezeichenfolge enthält. Hoffe das würde helfen.
function insertParam(key, value) {
key = escape(key); value = escape(value);
var kvp = document.location.search.substr(1).split('&');
if (kvp == '') {
document.location.search = '?' + key + '=' + value;
}
else {
var i = kvp.length; var x; while (i--) {
x = kvp[i].split('=');
if (x[0] == key) {
x[1] = value;
kvp[i] = x.join('=');
break;
}
}
if (i < 0) { kvp[kvp.length] = [key, value].join('='); }
//this will reload the page, it's likely better to store this until finished
document.location.search = kvp.join('&');
}
}
Dies ist eine sehr einfache Lösung. Es kontrolliert nicht die Existenz von Parametern und ändert auch nicht den vorhandenen Wert. Es fügt Ihren Parameter zum Ende hinzu, sodass Sie den neuesten Wert in Ihrem Back-End-Code erhalten können.
function addParameterToURL(param){
_url = location.href;
_url += (_url.split('?')[1] ? '&':'?') + param;
return _url;
}
Hier ist eine stark vereinfachte Version, die Kompromisse für die Lesbarkeit und weniger Codezeilen anstelle der mikrooptimierten Leistung eingeht (und wir sprechen realistisch von ein paar Millisekunden Unterschied ... aufgrund der Art dieses Unterschieds) ), wird dies höchstwahrscheinlich einmal auf einer Seite ausgeführt.
/**
* Add a URL parameter (or changing it if it already exists)
* @param {search} string this is typically document.location.search
* @param {key} string the key to set
* @param {val} string value
*/
var addUrlParam = function(search, key, val){
var newParam = key + '=' + val,
params = '?' + newParam;
// If the "search" string exists, then build params from it
if (search) {
// Try to replace an existance instance
params = search.replace(new RegExp('([?&])' + key + '[^&]*'), '$1' + newParam);
// If nothing was replaced, then add the new param to the end
if (params === search) {
params += '&' + newParam;
}
}
return params;
};
Sie würden dies dann so verwenden:
document.location.pathname + addUrlParam(document.location.search, 'foo', 'bar');
/**
* Add a URL parameter
* @param {string} url
* @param {string} param the key to set
* @param {string} value
*/
var addParam = function(url, param, value) {
param = encodeURIComponent(param);
var a = document.createElement('a');
param += (value ? "=" + encodeURIComponent(value) : "");
a.href = url;
a.search += (a.search ? "&" : "") + param;
return a.href;
}
/**
* Add a URL parameter (or modify if already exists)
* @param {string} url
* @param {string} param the key to set
* @param {string} value
*/
var addOrReplaceParam = function(url, param, value) {
param = encodeURIComponent(param);
var r = "([&?]|&)" + param + "\\b(?:=(?:[^&#]*))*";
var a = document.createElement('a');
var regex = new RegExp(r);
var str = param + (value ? "=" + encodeURIComponent(value) : "");
a.href = url;
var q = a.search.replace(regex, "$1"+str);
if (q === a.search) {
a.search += (a.search ? "&" : "") + str;
} else {
a.search = q;
}
return a.href;
}
url = "http://www.example.com#hashme";
newurl = addParam(url, "ciao", "1");
alert(newurl);Bitte beachten Sie, dass die Parameter vor dem Anhängen in eine Abfragezeichenfolge codiert werden sollten.
Ich habe eine "Klasse", die das macht und hier ist es:
function QS(){
this.qs = {};
var s = location.search.replace( /^\?|#.*$/g, '' );
if( s ) {
var qsParts = s.split('&');
var i, nv;
for (i = 0; i < qsParts.length; i++) {
nv = qsParts[i].split('=');
this.qs[nv[0]] = nv[1];
}
}
}
QS.prototype.add = function( name, value ) {
if( arguments.length == 1 && arguments[0].constructor == Object ) {
this.addMany( arguments[0] );
return;
}
this.qs[name] = value;
}
QS.prototype.addMany = function( newValues ) {
for( nv in newValues ) {
this.qs[nv] = newValues[nv];
}
}
QS.prototype.remove = function( name ) {
if( arguments.length == 1 && arguments[0].constructor == Array ) {
this.removeMany( arguments[0] );
return;
}
delete this.qs[name];
}
QS.prototype.removeMany = function( deleteNames ) {
var i;
for( i = 0; i < deleteNames.length; i++ ) {
delete this.qs[deleteNames[i]];
}
}
QS.prototype.getQueryString = function() {
var nv, q = [];
for( nv in this.qs ) {
q[q.length] = nv+'='+this.qs[nv];
}
return q.join( '&' );
}
QS.prototype.toString = QS.prototype.getQueryString;
//examples
//instantiation
var qs = new QS;
alert( qs );
//add a sinle name/value
qs.add( 'new', 'true' );
alert( qs );
//add multiple key/values
qs.add( { x: 'X', y: 'Y' } );
alert( qs );
//remove single key
qs.remove( 'new' )
alert( qs );
//remove multiple keys
qs.remove( ['x', 'bogus'] )
alert( qs );
Ich habe die toString-Methode überschrieben, damit QS :: getQueryString nicht aufgerufen werden muss. Sie können QS :: toString verwenden oder sich, wie in den Beispielen beschrieben, darauf verlassen, dass das Objekt in einen String umgewandelt wird.
Wenn Sie eine Zeichenfolge mit einer URL haben, die Sie mit einem Parameter dekorieren möchten, können Sie Folgendes versuchen:
urlstring += ( urlstring.match( /[\?]/g ) ? '&' : '?' ) + 'param=value';
Dies bedeutet, dass ? das Präfix des Parameters ist, aber wenn Sie bereits ? in urlstring, als & wird das Präfix sein.
Ich würde auch empfehlen, encodeURI( paramvariable ) auszuführen, wenn Sie den Parameter nicht fest codiert haben, er sich jedoch in einem paramvariable befindet. oder wenn du lustige Charaktere darin hast.
Informationen zur Verwendung der Funktion encodeURI finden Sie unter JavaScript-URL-Codierung .
So fügen Sie einfach einen Abfrageparameter hinzu:
const query = new URLSearchParams(window.location.search);
query.append("enabled", "true");
Und das ist es mehr hier .
Bitte beachten Sie die Support-Spezifikationen .
Irgendwann sehen wir ? Am Ende der URL habe ich einige Lösungen gefunden, die Ergebnisse erzeugen als file.php?&foo=bar. ich habe mir eine eigene lösung ausgedacht, die perfekt funktioniert, wie ich will!
location.Origin + location.pathname + location.search + (location.search=='' ? '?' : '&') + 'lang=ar'
Hinweis: location.Origin funktioniert nicht im IE, hier ist die Fehlerbehebung .
Check out https://github.com/derek-watson/jsUri
Uri und Query String Manipulation in Javascript.
Dieses Projekt enthält die ausgezeichnete parseUri-Bibliothek für reguläre Ausdrücke von Steven Levithan. Sie können URLs aller Formen und Größen sicher analysieren, unabhängig davon, ob sie ungültig oder abscheulich sind.
Die folgende Funktion hilft Ihnen beim Hinzufügen, Aktualisieren und Löschen von Parametern zu oder von der URL.
// beispiel1und
var myURL = '/search';
myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california
myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york
myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search
// example2
var myURL = '/search?category=mobile';
myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?category=mobile&location=california
myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?category=mobile&location=new%20york
myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search?category=mobile
// beispiel3
var myURL = '/search?location=texas';
myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california
myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york
myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search
// example4
var myURL = '/search?category=mobile&location=texas';
myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?category=mobile&location=california
myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?category=mobile&location=new%20york
myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search?category=mobile
// example5
var myURL = 'https://example.com/search?location=texas#fragment';
myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california#fragment
myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york#fragment
myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search#fragment
Hier ist die Funktion.
function updateUrl(url,key,value){
if(value!==undefined){
value = encodeURI(value);
}
var hashIndex = url.indexOf("#")|0;
if (hashIndex === -1) hashIndex = url.length|0;
var urls = url.substring(0, hashIndex).split('?');
var baseUrl = urls[0];
var parameters = '';
var outPara = {};
if(urls.length>1){
parameters = urls[1];
}
if(parameters!==''){
parameters = parameters.split('&');
for(k in parameters){
var keyVal = parameters[k];
keyVal = keyVal.split('=');
var ekey = keyVal[0];
var evalue = '';
if(keyVal.length>1){
evalue = keyVal[1];
}
outPara[ekey] = evalue;
}
}
if(value!==undefined){
outPara[key] = value;
}else{
delete outPara[key];
}
parameters = [];
for(var k in outPara){
parameters.Push(k + '=' + outPara[k]);
}
var finalUrl = baseUrl;
if(parameters.length>0){
finalUrl += '?' + parameters.join('&');
}
return finalUrl + url.substring(hashIndex);
}
Dies ist, was ich verwende, wenn es um einige grundlegende URL-Parameter-Ergänzungen oder -Updates auf der Serverseite wie Node.js geht.
CoffeScript:
###
@method addUrlParam Adds parameter to a given url. If the parameter already exists in the url is being replaced.
@param {string} url
@param {string} key Parameter's key
@param {string} value Parameter's value
@returns {string} new url containing the parameter
###
addUrlParam = (url, key, value) ->
newParam = key+"="+value
result = url.replace(new RegExp('(&|\\?)' + key + '=[^\&|#]*'), '$1' + newParam)
if result is url
result = if url.indexOf('?') != -1 then url.split('?')[0] + '?' + newParam + '&' + url.split('?')[1]
else if url.indexOf('#') != -1 then url.split('#')[0] + '?' + newParam + '#' + url.split('#')[1]
else url + '?' + newParam
return resultJavaScript:
function addUrlParam(url, key, value) {
var newParam = key+"="+value;
var result = url.replace(new RegExp("(&|\\?)"+key+"=[^\&|#]*"), '$1' + newParam);
if (result === url) {
result = (url.indexOf("?") != -1 ? url.split("?")[0]+"?"+newParam+"&"+url.split("?")[1]
: (url.indexOf("#") != -1 ? url.split("#")[0]+"?"+newParam+"#"+ url.split("#")[1]
: url+'?'+newParam));
}
return result;
}
var url = "http://www.example.com?foo=bar&ciao=3&Doom=5#hashme";
result1.innerHTML = addUrlParam(url, "ciao", "1");<p id="result1"></p>Dies war mein eigener Versuch, aber ich werde die Antwort von Annakata verwenden, da sie viel sauberer zu sein scheint:
function AddUrlParameter(sourceUrl, parameterName, parameterValue, replaceDuplicates)
{
if ((sourceUrl == null) || (sourceUrl.length == 0)) sourceUrl = document.location.href;
var urlParts = sourceUrl.split("?");
var newQueryString = "";
if (urlParts.length > 1)
{
var parameters = urlParts[1].split("&");
for (var i=0; (i < parameters.length); i++)
{
var parameterParts = parameters[i].split("=");
if (!(replaceDuplicates && parameterParts[0] == parameterName))
{
if (newQueryString == "")
newQueryString = "?";
else
newQueryString += "&";
newQueryString += parameterParts[0] + "=" + parameterParts[1];
}
}
}
if (newQueryString == "")
newQueryString = "?";
else
newQueryString += "&";
newQueryString += parameterName + "=" + parameterValue;
return urlParts[0] + newQueryString;
}
Außerdem habe ich dieses jQuery-Plugin aus einem anderen Beitrag zu stackoverflow gefunden. Wenn Sie mehr Flexibilität benötigen, können Sie Folgendes verwenden: http://plugins.jquery.com/project/query-object
Ich würde denken, der Code wäre (noch nicht getestet):
return $.query.parse(sourceUrl).set(parameterName, parameterValue).toString();
Die einfachste Lösung, funktioniert, wenn Sie bereits ein Tag haben oder nicht, und entfernt es automatisch, damit nicht immer gleiche Tags hinzugefügt werden. Viel Spaß
function changeURL(tag)
{
if(window.location.href.indexOf("?") > -1) {
if(window.location.href.indexOf("&"+tag) > -1){
var url = window.location.href.replace("&"+tag,"")+"&"+tag;
}
else
{
var url = window.location.href+"&"+tag;
}
}else{
if(window.location.href.indexOf("?"+tag) > -1){
var url = window.location.href.replace("?"+tag,"")+"?"+tag;
}
else
{
var url = window.location.href+"?"+tag;
}
}
window.location = url;
}
DANN
changeURL("i=updated");
Ich mag die Antwort von Mehmet Fatih Yıldız, auch wenn er nicht die ganze Frage beantwortet hat.
In der gleichen Zeile wie seine Antwort verwende ich diesen Code:
"Es kontrolliert nicht die Existenz von Parametern und ändert auch nicht den vorhandenen Wert. Es fügt Ihren Parameter am Ende hinzu."
/** add a parameter at the end of the URL. Manage '?'/'&', but not the existing parameters.
* does escape the value (but not the key)
*/
function addParameterToURL(_url,_key,_value){
var param = _key+'='+escape(_value);
var sep = '&';
if (_url.indexOf('?') < 0) {
sep = '?';
} else {
var lastChar=_url.slice(-1);
if (lastChar == '&') sep='';
if (lastChar == '?') sep='';
}
_url += sep + param;
return _url;
}
und der Tester:
/*
function addParameterToURL_TESTER_sub(_url,key,value){
//log(_url);
log(addParameterToURL(_url,key,value));
}
function addParameterToURL_TESTER(){
log('-------------------');
var _url ='www.google.com';
addParameterToURL_TESTER_sub(_url,'key','value');
addParameterToURL_TESTER_sub(_url,'key','Text Value');
_url ='www.google.com?';
addParameterToURL_TESTER_sub(_url,'key','value');
_url ='www.google.com?A=B';
addParameterToURL_TESTER_sub(_url,'key','value');
_url ='www.google.com?A=B&';
addParameterToURL_TESTER_sub(_url,'key','value');
_url ='www.google.com?A=1&B=2';
addParameterToURL_TESTER_sub(_url,'key','value');
}//*/
Ich würde mit this kleiner, aber vollständiger Bibliothek arbeiten, um URLs in js zu verarbeiten:
const urlParams = new URLSearchParams(window.location.search);
urlParams.set('order', 'date');
window.location.search = urlParams;
.set erstes agrument ist der schlüssel, das zweite ist der wert.
Wenn Sie mit URLs in Links oder anderswo herumspielen, müssen Sie möglicherweise auch den Hash berücksichtigen. Hier ist eine ziemlich einfach zu verstehende Lösung. Wahrscheinlich nicht das SCHNELLSTE , da es einen regulären Ausdruck verwendet ... aber in 99,999% der Fälle ist der Unterschied wirklich egal!
function addQueryParam( url, key, val ){
var parts = url.match(/([^?#]+)(\?[^#]*)?(\#.*)?/);
var url = parts[1];
var qs = parts[2] || '';
var hash = parts[3] || '';
if ( !qs ) {
return url + '?' + key + '=' + encodeURIComponent( val ) + hash;
} else {
var qs_parts = qs.substr(1).split("&");
var i;
for (i=0;i<qs_parts.length;i++) {
var qs_pair = qs_parts[i].split("=");
if ( qs_pair[0] == key ){
qs_parts[ i ] = key + '=' + encodeURIComponent( val );
break;
}
}
if ( i == qs_parts.length ){
qs_parts.Push( key + '=' + encodeURIComponent( val ) );
}
return url + '?' + qs_parts.join('&') + hash;
}
}
Vianney Bajarts Antwort ist richtig; URL funktioniert jedoch nur, wenn Sie die vollständige URL mit Port, Host, Pfad und Abfrage haben:
new URL('http://server/myapp.php?id=10&enabled=true')
Und RLSearchParams funktioniert nur, wenn Sie nur die Abfragezeichenfolge übergeben:
new URLSearchParams('?id=10&enabled=true')
Wenn Sie eine unvollständige oder relative URL haben und sich nicht für die Basis-URL interessieren, können Sie einfach nach ? Aufteilen, um die Abfragezeichenfolge abzurufen und später wie folgt beizutreten:
function setUrlParams(url, key, value) {
url = url.split('?');
usp = new URLSearchParams(url[1]);
usp.set(key, value);
url[1] = usp.toString();
return url.join('?');
}
let url = 'myapp.php?id=10';
url = setUrlParams(url, 'enabled', true); // url = 'myapp.php?id=10&enabled=true'
url = setUrlParams(url, 'id', 11); // url = 'myapp.php?id=11&enabled=true'
Nicht kompatibel mit dem Internet Explorer.
Hinzufügen zu @ Vianneys Antwort https://stackoverflow.com/a/44160941/6609678
Wir können das eingebaute URL-Modul in Node importieren wie folgt
const { URL } = require('url');
Beispiel:
Terminal $ node
> const { URL } = require('url');
undefined
> let url = new URL('', 'http://localhost:1989/v3/orders');
undefined
> url.href
'http://localhost:1989/v3/orders'
> let fetchAll=true, timePeriod = 30, b2b=false;
undefined
> url.href
'http://localhost:1989/v3/orders'
> url.searchParams.append('fetchAll', fetchAll);
undefined
> url.searchParams.append('timePeriod', timePeriod);
undefined
> url.searchParams.append('b2b', b2b);
undefined
> url.href
'http://localhost:1989/v3/orders?fetchAll=true&timePeriod=30&b2b=false'
> url.toString()
'http://localhost:1989/v3/orders?fetchAll=true&timePeriod=30&b2b=false'
Nützliche Links:
https://developer.mozilla.org/en-US/docs/Web/API/URLhttps://developer.mozilla.org/en/docs/Web/API/ URLSearchParams
Setzen Sie alle Abfragezeichenfolgen zurück
var params = { params1:"val1", params2:"val2" };
let str = jQuery.param(params);
let uri = window.location.href.toString();
if (uri.indexOf("?") > 0)
uri = uri.substring(0, uri.indexOf("?"));
console.log(uri+"?"+str);
//window.location.href = uri+"?"+str;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Dies funktioniert in allen modernen Browsern.
function insertParam(key,value) {
if (history.pushState) {
var newurl = window.location.protocol + "//" + window.location.Host + window.location.pathname + '?' +key+'='+value;
window.history.pushState({path:newurl},'',newurl);
}
}
Die einfachste Lösung, die ich mir vorstellen kann, ist diese Methode, die den geänderten URI zurückgibt. Ich habe das Gefühl, dass die meisten von Ihnen viel zu hart arbeiten.
function setParam(uri, key, val) {
return uri
.replace(new RegExp("([?&]"+key+"(?=[=&#]|$)[^#&]*|(?=#|$))"), "&"+key+"="+encodeURIComponent(val))
.replace(/^([^?&]+)&/, "$1?");
}
Mit den neuen Errungenschaften in JS können Sie der URL folgende Abfrageparameter hinzufügen:
var protocol = window.location.protocol,
Host = '//' + window.location.Host,
path = window.location.pathname,
query = window.location.search;
var newUrl = protocol + Host + path + query + (query ? '&' : '?') + 'param=1';
window.history.pushState({path:newUrl}, '' , newUrl);
Siehe auch diese Möglichkeit Moziila URLSearchParams.append ()
Try
Die regulären Ausdrücke, so langsam, also:
var SetParamUrl = function(_k, _v) {// replace and add new parameters
let arrParams = window.location.search !== '' ? decodeURIComponent(window.location.search.substr(1)).split('&').map(_v => _v.split('=')) : Array();
let index = arrParams.findIndex((_v) => _v[0] === _k);
index = index !== -1 ? index : arrParams.length;
_v === null ? arrParams = arrParams.filter((_v, _i) => _i != index) : arrParams[index] = [_k, _v];
let _search = encodeURIComponent(arrParams.map(_v => _v.join('=')).join('&'));
let newurl = window.location.protocol + "//" + window.location.Host + window.location.pathname + (arrParams.length > 0 ? '?' + _search : '');
// window.location = newurl; //reload
if (history.pushState) { // without reload
window.history.pushState({path:newurl}, null, newurl);
}
};
var GetParamUrl = function(_k) {// get parameter by key
let sPageURL = decodeURIComponent(window.location.search.substr(1)),
sURLVariables = sPageURL.split('&').map(_v => _v.split('='));
let _result = sURLVariables.find(_v => _v[0] === _k);
return _result[1];
};
Beispiel:
// https://some.com/some_path
GetParamUrl('cat');//undefined
SetParamUrl('cat', "strData");// https://some.com/some_path?cat=strData
GetParamUrl('cat');//strData
SetParamUrl('sotr', "strDataSort");// https://some.com/some_path?cat=strData&sotr=strDataSort
GetParamUrl('sotr');//strDataSort
SetParamUrl('cat', "strDataTwo");// https://some.com/some_path?cat=strDataTwo&sotr=strDataSort
GetParamUrl('cat');//strDataTwo
//remove param
SetParamUrl('cat', null);// https://some.com/some_path?sotr=strDataSort
Ich kann am besten sagen, dass keine der obigen Antworten den Fall betrifft, in dem die Abfragezeichenfolge Parameter enthält, die selbst ein Array sind und daher mehr als einmal vorkommen, z.
http://example.com?sizes[]=a&sizes[]=b
Die folgende Funktion habe ich geschrieben, um document.location.search Zu aktualisieren. Es wird ein Array von Schlüssel/Wert-Paaren als Argument verwendet und es wird eine überarbeitete Version des letzteren zurückgegeben, mit der Sie tun können, was Sie möchten. Ich benutze es so:
var newParams = [
['test','123'],
['best','456'],
['sizes[]','XXL']
];
var newUrl = document.location.pathname + insertParams(newParams);
history.replaceState('', '', newUrl);
Wenn die aktuelle URL lautete:
http://example.com/index.php?test=replaceme&sizes[]=XL
Das würde dich kriegen
http://example.com/index.php?test=123&sizes[]=XL&sizes[]=XXL&best=456
Funktion
function insertParams(params) {
var result;
var ii = params.length;
var queryString = document.location.search.substr(1);
var kvps = queryString ? queryString.split('&') : [];
var kvp;
var skipParams = [];
var i = kvps.length;
while (i--) {
kvp = kvps[i].split('=');
if (kvp[0].slice(-2) != '[]') {
var ii = params.length;
while (ii--) {
if (params[ii][0] == kvp[0]) {
kvp[1] = params[ii][1];
kvps[i] = kvp.join('=');
skipParams.Push(ii);
}
}
}
}
var ii = params.length;
while (ii--) {
if (skipParams.indexOf(ii) === -1) {
kvps.Push(params[ii].join('='));
}
}
result = kvps.length ? '?' + kvps.join('&') : '';
return result;
}
Ok, hier vergleiche ich zwei Funktionen, eine von mir selbst (regExp) und eine andere von (annakata).
Array teilen:
function insertParam(key, value)
{
key = escape(key); value = escape(value);
var kvp = document.location.search.substr(1).split('&');
var i=kvp.length; var x; while(i--)
{
x = kvp[i].split('=');
if (x[0]==key)
{
x[1] = value;
kvp[i] = x.join('=');
break;
}
}
if(i<0) {kvp[kvp.length] = [key,value].join('=');}
//this will reload the page, it's likely better to store this until finished
return "&"+kvp.join('&');
}
Regexp-Methode:
function addParameter(param, value)
{
var regexp = new RegExp("(\\?|\\&)" + param + "\\=([^\\&]*)(\\&|$)");
if (regexp.test(document.location.search))
return (document.location.search.toString().replace(regexp, function(a, b, c, d)
{
return (b + param + "=" + value + d);
}));
else
return document.location.search+ param + "=" + value;
}
Testfall:
time1=(new Date).getTime();
for (var i=0;i<10000;i++)
{
addParameter("test","test");
}
time2=(new Date).getTime();
for (var i=0;i<10000;i++)
{
insertParam("test","test");
}
time3=(new Date).getTime();
console.log((time2-time1)+" "+(time3-time2));
Es scheint, dass selbst mit der einfachsten Lösung (wenn regexp nur test verwendet und nicht die .replace-Funktion eingibt) es immer noch langsamer ist als das Aufteilen ... Nun. Regexp ist ein bisschen langsam, aber ... äh ...