Wie kann ich einen Abfragezeichenfolgeparameter hinzufügen oder aktualisieren?
Wie kann ich mit Javascript einen Abfragezeichenfolge-Parameter zur URL hinzufügen, falls nicht vorhanden oder falls vorhanden, den aktuellen Wert aktualisieren? Ich verwende jquery für meine clientseitige Entwicklung.
Ich habe die folgende Funktion geschrieben, die das erfüllt, was ich erreichen möchte:
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
Ich habe die Lösung erweitert und mit einer anderen kombiniert, die ich gefunden habe, um die Querystring-Parameter zu ersetzen, zu aktualisieren oder zu entfernen, basierend auf den Eingaben des Benutzers und unter Berücksichtigung des URL-Ankers.
Wenn Sie keinen Wert angeben, wird der Parameter entfernt. Wenn Sie einen Wert angeben, wird der Parameter hinzugefügt/aktualisiert. Wenn keine URL angegeben wird, wird sie von window.location abgerufen
function UpdateQueryString(key, value, url) {
if (!url) url = window.location.href;
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
hash;
if (re.test(url)) {
if (typeof value !== 'undefined' && value !== null)
return url.replace(re, '$1' + key + "=" + value + '$2$3');
else {
hash = url.split('#');
url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
url += '#' + hash[1];
return url;
}
}
else {
if (typeof value !== 'undefined' && value !== null) {
var separator = url.indexOf('?') !== -1 ? '&' : '?';
hash = url.split('#');
url = hash[0] + separator + key + '=' + value;
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
url += '#' + hash[1];
return url;
}
else
return url;
}
}
Update
Beim Entfernen des ersten Parameters in der Querzeichenfolge ist ein Fehler aufgetreten. Ich habe die Regex und den Test überarbeitet, um eine Korrektur hinzuzufügen.
Zweites Update
Wie von @ JarónBarends vorgeschlagen - Prüfen Sie den Wert für den Tweak-Wert auf undefined und auf null, um die Einstellung von 0-Werten zu ermöglichen
Drittes Update
Es gab einen Fehler, bei dem das Entfernen einer Querystring-Variablen direkt vor einem Hashtag das Hashtag-Symbol löste, das behoben wurde
Viertes Update
Danke, @rooby, dass Sie auf eine Regex-Optimierung im ersten RegExp-Objekt hingewiesen haben . Setzen Sie den ersten Regex auf ([? &]), Da ein Problem mit der Verwendung von (\? | &) Von @YonatanKarni gefunden wurde
Fünftes Update
Entfernen der deklarierenden Hashvariablen in der if/else-Anweisung
Das Dienstprogramm URLSearchParams kann in Kombination mit window.location.search dazu nützlich sein. Zum Beispiel:
if ('URLSearchParams' in window) {
var searchParams = new URLSearchParams(window.location.search);
searchParams.set("foo", "bar");
window.location.search = searchParams.toString();
}
Nun wurde foo auf bar gesetzt, unabhängig davon, ob es bereits existiert oder nicht.
Die obige Zuweisung zu window.location.search bewirkt jedoch das Laden einer Seite. Wenn dies nicht erwünscht ist, verwenden Sie History API wie folgt:
if ('URLSearchParams' in window) {
var searchParams = new URLSearchParams(window.location.search)
searchParams.set("foo", "bar");
var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
history.pushState(null, '', newRelativePathQuery);
}
Jetzt müssen Sie keine eigene Regex oder Logik schreiben, um mit der möglichen Existenz von Abfragezeichenfolgen umzugehen.
Allerdings ist Browserunterstützung schlecht, da es derzeit experimentell ist und nur in den neuesten Versionen von Chrome, Firefox, Safari, iOS Safari, Android Browser, Android Chrome und Opera verwendet wird. Verwenden Sie ein Polyfill , wenn Sie sich entscheiden, es zu verwenden.
Update: Die Browser-Unterstützung hat sich seit meiner ursprünglichen Antwort verbessert.
Basierend auf der Antwort von @ amateur (und jetzt mit dem Update aus dem Kommentar von @j_walker_dev), aber unter Berücksichtigung des Kommentars über Hash-Tags in der URL verwende ich Folgendes:
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
} else {
var hash = '';
if( uri.indexOf('#') !== -1 ){
hash = uri.replace(/.*#/, '#');
uri = uri.replace(/#.*/, '');
}
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
return uri + separator + key + "=" + value + hash;
}
}
Bearbeitet, um [?|&] in Regex zu korrigieren, was natürlich [?&] sein sollte, wie in den Kommentaren angegeben
Bearbeiten: Alternative Version, um das Entfernen von URL-Parametern ebenfalls zu unterstützen. Ich habe value === undefined als Weg verwendet, um das Entfernen anzuzeigen. Könnte value === false oder sogar einen separaten Eingabeparameter wie gewünscht verwenden.
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
if( value === undefined ) {
if (uri.match(re)) {
return uri.replace(re, '$1$2');
} else {
return uri;
}
} else {
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
} else {
var hash = '';
if( uri.indexOf('#') !== -1 ){
hash = uri.replace(/.*#/, '#');
uri = uri.replace(/#.*/, '');
}
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
return uri + separator + key + "=" + value + hash;
}
}
}
Sieh es in Aktion unter https://jsfiddle.net/bp3tmuxh/1/
Hier ist meine Bibliothek dazu: https://github.com/Mikhus/jsurl
var u = new Url;
u.query.param='value'; // adds or replaces the param
alert(u)
window.location.search ist Lese-/Schreibzugriff.
Wenn Sie jedoch die Abfragezeichenfolge ändern, wird die Seite, auf der Sie sich befinden, umgeleitet und vom Server aktualisiert.
Wenn Sie versuchen, den clientseitigen Status beizubehalten (und ihn möglicherweise als Lesezeichen zu speichern), möchten Sie den URL-Hash anstelle der Abfragezeichenfolge ändern, sodass Sie auf derselben Seite bleiben (window.location). Hash ist Lesen/Schreiben). So machen es Websites wie Twitter.com.
Sie möchten auch, dass der Zurück-Button funktioniert. Sie müssen Javascript-Ereignisse an das Hash-Änderungs-Ereignis binden. Ein gutes Plugin dafür ist http://benalman.com/projects/jquery-hashchange-plugin) /
Hier ist mein Ansatz: Die location.params()-Funktion (siehe unten) kann als Getter oder Setter verwendet werden. Beispiele:
Wenn die URL http://example.com/?foo=bar&baz#some-hash ist,
location.params()gibt ein Objekt mit allen Abfrageparametern zurück:{foo: 'bar', baz: true}.location.params('foo')gibt'bar'zurück.location.params({foo: undefined, hello: 'world', test: true})ändert die URL inhttp://example.com/?baz&hello=world&test#some-hash.
Hier ist die Funktion params(), die optional dem Objekt window.location zugewiesen werden kann.
location.params = function(params) {
var obj = {}, i, parts, len, key, value;
if (typeof params === 'string') {
value = location.search.match(new RegExp('[?&]' + params + '=?([^&]*)[&#$]?'));
return value ? value[1] : undefined;
}
var _params = location.search.substr(1).split('&');
for (i = 0, len = _params.length; i < len; i++) {
parts = _params[i].split('=');
if (! parts[0]) {continue;}
obj[parts[0]] = parts[1] || true;
}
if (typeof params !== 'object') {return obj;}
for (key in params) {
value = params[key];
if (typeof value === 'undefined') {
delete obj[key];
} else {
obj[key] = value;
}
}
parts = [];
for (key in obj) {
parts.Push(key + (obj[key] === true ? '' : '=' + obj[key]));
}
location.search = parts.join('&');
};
Wenn es nicht festgelegt ist oder mit einem neuen Wert aktualisiert werden soll, können Sie Folgendes verwenden:
window.location.search = 'param=value'; // or param=new_value
Dies ist übrigens in einfachem Javascript.
EDIT
Möglicherweise möchten Sie das Jquery query-object plugin verwenden
window.location.search = jQuery.query.set ("param", 5);
Ich weiß, dass diese Frage alt ist und zu Tode beantwortet wurde, aber hier ist mein Stich. Ich versuche, das Rad hier neu zu erfinden, weil ich die aktuell akzeptierte Antwort verwendet habe und der falsche Umgang mit URL-Fragmenten mich kürzlich in ein Projekt gebissen habe.
Die Funktion ist unten. Es ist ziemlich lang, aber es sollte so belastbar wie möglich sein. Ich würde mich über Vorschläge zur Verkürzung/Verbesserung freuen. Ich habe dafür ein kleines jsFiddle Test Suite zusammengestellt (oder ähnliche Funktionen). Wenn eine Funktion alle Tests bestehen kann, sage ich, dass es wahrscheinlich gut ist, zu gehen.
Update: Ich habe eine coole Funktion für mit dem DOM zum Analysieren von URLs gefunden, also habe ich diese Technik hier integriert. Dadurch wird die Funktion kürzer und zuverlässiger. Unterstützt den Autor dieser Funktion.
/**
* Add or update a query string parameter. If no URI is given, we use the current
* window.location.href value for the URI.
*
* Based on the DOM URL parser described here:
* http://james.padolsey.com/javascript/parsing-urls-with-the-dom/
*
* @param (string) uri Optional: The URI to add or update a parameter in
* @param (string) key The key to add or update
* @param (string) value The new value to set for key
*
* Tested on Chrome 34, Firefox 29, IE 7 and 11
*/
function update_query_string( uri, key, value ) {
// Use window URL if no query string is provided
if ( ! uri ) { uri = window.location.href; }
// Create a dummy element to parse the URI with
var a = document.createElement( 'a' ),
// match the key, optional square brackets, an equals sign or end of string, the optional value
reg_ex = new RegExp( key + '((?:\\[[^\\]]*\\])?)(=|$)(.*)' ),
// Setup some additional variables
qs,
qs_len,
key_found = false;
// Use the JS API to parse the URI
a.href = uri;
// If the URI doesn't have a query string, add it and return
if ( ! a.search ) {
a.search = '?' + key + '=' + value;
return a.href;
}
// Split the query string by ampersands
qs = a.search.replace( /^\?/, '' ).split( /&(?:amp;)?/ );
qs_len = qs.length;
// Loop through each query string part
while ( qs_len > 0 ) {
qs_len--;
// Remove empty elements to prevent double ampersands
if ( ! qs[qs_len] ) { qs.splice(qs_len, 1); continue; }
// Check if the current part matches our key
if ( reg_ex.test( qs[qs_len] ) ) {
// Replace the current value
qs[qs_len] = qs[qs_len].replace( reg_ex, key + '$1' ) + '=' + value;
key_found = true;
}
}
// If we haven't replaced any occurrences above, add the new parameter and value
if ( ! key_found ) { qs.Push( key + '=' + value ); }
// Set the new query string
a.search = '?' + qs.join( '&' );
return a.href;
}
Dies ist meine Präferenz und deckt die Fälle ab, die mir einfallen. Kann sich jemand einen Weg vorstellen, um ihn auf einen einzelnen zu reduzieren?
function setParam(uri, key, val) {
return uri
.replace(RegExp("([?&]"+key+"(?=[=&#]|$)[^#&]*|(?=#|$))"), "&"+key+"="+encodeURIComponent(val))
.replace(/^([^?&]+)&/, "$1?");
}
Ich weiß, dass dies ziemlich alt ist, aber ich möchte meine Arbeitsversion hier abfeuern.
function addOrUpdateUrlParam(uri, paramKey, paramVal) {
var re = new RegExp("([?&])" + paramKey + "=[^&#]*", "i");
if (re.test(uri)) {
uri = uri.replace(re, '$1' + paramKey + "=" + paramVal);
} else {
var separator = /\?/.test(uri) ? "&" : "?";
uri = uri + separator + paramKey + "=" + paramVal;
}
return uri;
}
jQuery(document).ready(function($) {
$('#paramKey,#paramValue').on('change', function() {
if ($('#paramKey').val() != "" && $('#paramValue').val() != "") {
$('#uri').val(addOrUpdateUrlParam($('#uri').val(), $('#paramKey').val(), $('#paramValue').val()));
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="width:100%" type="text" id="uri" value="http://www.example.com/text.php">
<label style="display:block;">paramKey
<input type="text" id="paramKey">
</label>
<label style="display:block;">paramValue
<input type="text" id="paramValue">
</label>NOTEDies ist eine modifizierte Version von @elreimundo
Basierend auf der Antwort von @ellemayo habe ich die folgende Lösung gefunden, mit der das Hash-Tag deaktiviert werden kann, falls dies gewünscht ist:
function updateQueryString(key, value, options) {
if (!options) options = {};
var url = options.url || location.href;
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"), hash;
hash = url.split('#');
url = hash[0];
if (re.test(url)) {
if (typeof value !== 'undefined' && value !== null) {
url = url.replace(re, '$1' + key + "=" + value + '$2$3');
} else {
url = url.replace(re, '$1$3').replace(/(&|\?)$/, '');
}
} else if (typeof value !== 'undefined' && value !== null) {
var separator = url.indexOf('?') !== -1 ? '&' : '?';
url = url + separator + key + '=' + value;
}
if ((typeof options.hash === 'undefined' || options.hash) &&
typeof hash[1] !== 'undefined' && hash[1] !== null)
url += '#' + hash[1];
return url;
}
Nenne es so:
updateQueryString('foo', 'bar', {
url: 'http://my.example.com#hash',
hash: false
});
Ergebnisse in:
http://my.example.com?foo=bar
Hier ist eine kürzere Version, die sich darum kümmert
- abfrage mit oder ohne einen gegebenen Parameter
- abfrage mit mehreren Parameterwerten
- abfrage mit Hash
Code:
var setQueryParameter = function(uri, key, value) {
var re = new RegExp("([?&])("+ key + "=)[^&#]*", "g");
if (uri.match(re))
return uri.replace(re, '$1$2' + value);
// need to add parameter to URI
var paramString = (uri.indexOf('?') < 0 ? "?" : "&") + key + "=" + value;
var hashIndex = uri.indexOf('#');
if (hashIndex < 0)
return uri + paramString;
else
return uri.substring(0, hashIndex) + paramString + uri.substring(hashIndex);
}
Die Beschreibung von regex finden Sie hier .
NOTE: Diese Lösung basiert auf der Antwort von @amateur, jedoch mit vielen Verbesserungen.
Mein take von hier (kompatibel mit "use strict"; verwendet jQuery nicht wirklich):
function decodeURIParams(query) {
if (query == null)
query = window.location.search;
if (query[0] == '?')
query = query.substring(1);
var params = query.split('&');
var result = {};
for (var i = 0; i < params.length; i++) {
var param = params[i];
var pos = param.indexOf('=');
if (pos >= 0) {
var key = decodeURIComponent(param.substring(0, pos));
var val = decodeURIComponent(param.substring(pos + 1));
result[key] = val;
} else {
var key = decodeURIComponent(param);
result[key] = true;
}
}
return result;
}
function encodeURIParams(params, addQuestionMark) {
var pairs = [];
for (var key in params) if (params.hasOwnProperty(key)) {
var value = params[key];
if (value != null) /* matches null and undefined */ {
pairs.Push(encodeURIComponent(key) + '=' + encodeURIComponent(value))
}
}
if (pairs.length == 0)
return '';
return (addQuestionMark ? '?' : '') + pairs.join('&');
}
//// alternative to $.extend if not using jQuery:
// function mergeObjects(destination, source) {
// for (var key in source) if (source.hasOwnProperty(key)) {
// destination[key] = source[key];
// }
// return destination;
// }
function navigateWithURIParams(newParams) {
window.location.search = encodeURIParams($.extend(decodeURIParams(), newParams), true);
}
Verwendungsbeispiel:
// add/update parameters
navigateWithURIParams({ foo: 'bar', boz: 42 });
// remove parameter
navigateWithURIParams({ foo: null });
// submit the given form by adding/replacing URI parameters (with jQuery)
$('.filter-form').submit(function(e) {
e.preventDefault();
navigateWithURIParams(decodeURIParams($(this).serialize()));
});
Verwenden Sie diese Funktion zum Hinzufügen, Entfernen und Ändern von Abfragezeichenfolgenparametern aus der URL basierend auf Jquery
/**
@param String url
@param object param {key: value} query parameter
*/
function modifyURLQuery(url, param){
var value = {};
var query = String(url).split('?');
if (query[1]) {
var part = query[1].split('&');
for (i = 0; i < part.length; i++) {
var data = part[i].split('=');
if (data[0] && data[1]) {
value[data[0]] = data[1];
}
}
}
value = $.extend(value, param);
// Remove empty value
for (i in value){
if(!value[i]){
delete value[i];
}
}
// Return url with modified parameter
if(value){
return query[0] + '?' + $.param(value);
} else {
return query[0];
}
}
Fügen Sie neue hinzu und ändern Sie vorhandene Parameter in URL
var new_url = modifyURLQuery("http://google.com?foo=34", {foo: 50, bar: 45});
// Result: http://google.com?foo=50&bar=45
Vorhandene entfernen
var new_url = modifyURLQuery("http://google.com?foo=50&bar=45", {bar: null});
// Result: http://google.com?foo=50
Ein anderer Ansatz ohne reguläre Ausdrücke zu verwenden . Unterstützt "Hash" -Anker am Ende der URL sowie mehrere Fragezeichen (?). Sollte etwas schneller als der Ansatz für reguläre Ausdrücke sein.
function setUrlParameter(url, key, value) {
var parts = url.split("#", 2), anchor = parts.length > 1 ? "#" + parts[1] : '';
var query = (url = parts[0]).split("?", 2);
if (query.length === 1)
return url + "?" + key + "=" + value + anchor;
for (var params = query[query.length - 1].split("&"), i = 0; i < params.length; i++)
if (params[i].toLowerCase().startsWith(key.toLowerCase() + "="))
return params[i] = key + "=" + value, query[query.length - 1] = params.join("&"), query.join("?") + anchor;
return url + "&" + key + "=" + value + anchor
}
Code, der mit ES6 und jQuery eine Liste von Parametern an eine vorhandene URL anfügt:
class UrlBuilder {
static appendParametersToUrl(baseUrl, listOfParams) {
if (jQuery.isEmptyObject(listOfParams)) {
return baseUrl;
}
const newParams = jQuery.param(listOfParams);
let partsWithHash = baseUrl.split('#');
let partsWithParams = partsWithHash[0].split('?');
let previousParams = '?' + ((partsWithParams.length === 2) ? partsWithParams[1] + '&' : '');
let previousHash = (partsWithHash.length === 2) ? '#' + partsWithHash[1] : '';
return partsWithParams[0] + previousParams + newParams + previousHash;
}
}
Wo listOfParams ist wie
const listOfParams = {
'name_1': 'value_1',
'name_2': 'value_2',
'name_N': 'value_N',
};
Anwendungsbeispiel:
UrlBuilder.appendParametersToUrl(urlBase, listOfParams);
Schnelle Tests:
url = 'http://hello.world';
console.log('=> ', UrlParameters.appendParametersToUrl(url, null));
// Output: http://hello.world
url = 'http://hello.world#h1';
console.log('=> ', UrlParameters.appendParametersToUrl(url, null));
// Output: http://hello.world#h1
url = 'http://hello.world';
params = {'p1': 'v1', 'p2': 'v2'};
console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
// Output: http://hello.world?p1=v1&p2=v2
url = 'http://hello.world?p0=v0';
params = {'p1': 'v1', 'p2': 'v2'};
console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
// Output: http://hello.world?p0=v0&p1=v1&p2=v2
url = 'http://hello.world#h1';
params = {'p1': 'v1', 'p2': 'v2'};
console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
// Output: http://hello.world?p1=v1&p2=v2#h1
url = 'http://hello.world?p0=v0#h1';
params = {'p1': 'v1', 'p2': 'v2'};
console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
// Output: http://hello.world?p0=v0&p1=v1&p2=v2#h1
Wenn Sie jQuery verwenden, können Sie dies wie folgt tun
var query_object = $.query_string;
query_object["KEY"] = "VALUE";
var new_url = window.location.pathname + '?'+$.param(query_object)
In der Variablen new_url haben wir neue Abfrageparameter.
Referenz: http://api.jquery.com/jquery.param/
Dies sollte dem Zweck dienen:
function updateQueryString(url, key, value) {
var arr = url.split("#");
var url = arr[0];
var fragmentId = arr[1];
var updatedQS = "";
if (url.indexOf("?") == -1) {
updatedQS = encodeURIComponent(key) + "=" + encodeURIComponent(value);
}
else {
updatedQS = addOrModifyQS(url.substring(url.indexOf("?") + 1), key, value);
}
url = url.substring(0, url.indexOf("?")) + "?" + updatedQS;
if (typeof fragmentId !== 'undefined') {
url = url + "#" + fragmentId;
}
return url;
}
function addOrModifyQS(queryStrings, key, value) {
var oldQueryStrings = queryStrings.split("&");
var newQueryStrings = new Array();
var isNewKey = true;
for (var i in oldQueryStrings) {
var currItem = oldQueryStrings[i];
var searchKey = key + "=";
if (currItem.indexOf(searchKey) != -1) {
currItem = encodeURIComponent(key) + "=" + encodeURIComponent(value);
isNewKey = false;
}
newQueryStrings.Push(currItem);
}
if (isNewKey) {
newQueryStrings.Push(encodeURIComponent(key) + "=" + encodeURIComponent(value));
}
return newQueryStrings.join("&");
}
wenn Sie mehrere Parameter gleichzeitig einstellen möchten:
function updateQueryStringParameters(uri, params) {
for(key in params){
var value = params[key],
re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"),
separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
uri = uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
uri = uri + separator + key + "=" + value;
}
}
return uri;
}
gleiche Funktion wie bei @ amateur
wenn Sie bei jslint einen Fehler erhalten, fügen Sie dies nach der for-Schleife hinzu
if(params.hasOwnProperty(key))
Auf dieser Seite gibt es viele unbequeme und unnötig komplizierte Antworten. Der am besten bewertete, @ Amateurs, ist ziemlich gut, obwohl er in RegExp ein paar unnötige Flusen hat. Hier ist eine etwas bessere Lösung mit Cleaner RegExp und einem Cleaner replace Aufruf:
function updateQueryStringParamsNoHash(uri, key, value) {
var re = new RegExp("([?&])" + key + "=[^&]*", "i");
return re.test(uri)
? uri.replace(re, '$1' + key + "=" + value)
: uri + separator + key + "=" + value
;
}
Ein zusätzlicher Bonus: Wenn uri keine Zeichenfolge ist, werden keine Fehler angezeigt, wenn versucht wird, match oder replace für etwas aufzurufen, das diese Methoden möglicherweise nicht implementiert.
Wenn Sie den Fall eines Hashes behandeln möchten (und Sie bereits eine Überprüfung auf ordnungsgemäß formatiertes HTML durchgeführt haben), können Sie die vorhandene Funktion nutzen, anstatt eine neue Funktion zu schreiben, die dieselbe Logik enthält:
function updateQueryStringParams(url, key, value) {
var splitURL = url.split('#');
var hash = splitURL[1];
var uri = updateQueryStringParamsNoHash(splitURL[0]);
return hash == null ? uri : uri + '#' + hash;
}
Oder Sie können geringfügige Änderungen an der ansonsten hervorragenden Antwort von @ Adam vornehmen:
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=[^&#]*", "i");
if (re.test(uri)) {
return uri.replace(re, '$1' + key + "=" + value);
} else {
var matchData = uri.match(/^([^#]*)(#.*)?$/);
var separator = /\?/.test(uri) ? "&" : "?";
return matchData[0] + separator + key + "=" + value + (matchData[1] || '');
}
}
Um ein Codebeispiel zum Ändern von window.location.search zu geben, wie von Gal und tradyblix vorgeschlagen:
var qs = window.location.search || "?";
var param = key + "=" + value; // remember to URI encode your parameters
if (qs.length > 1) {
// more than just the question mark, so append with ampersand
qs = qs + "&";
}
qs = qs + param;
window.location.search = qs;
Hier ist eine alternative Methode, die die integrierten Eigenschaften des Anker-HTML-Elements verwendet:
- Verarbeitet Parameter mit mehreren Werten.
- Kein Risiko, das Fragment # oder andere als die Abfragezeichenfolge selbst zu ändern.
- Kann ein bisschen leichter zu lesen sein? Aber es ist länger.
var a = document.createElement('a'),
getHrefWithUpdatedQueryString = function(param, value) {
return updatedQueryString(window.location.href, param, value);
},
updatedQueryString = function(url, param, value) {
/*
A function which modifies the query string
by setting one parameter to a single value.
Any other instances of parameter will be removed/replaced.
*/
var fragment = encodeURIComponent(param) +
'=' + encodeURIComponent(value);
a.href = url;
if (a.search.length === 0) {
a.search = '?' + fragment;
} else {
var didReplace = false,
// Remove leading '?'
parts = a.search.substring(1)
// Break into pieces
.split('&'),
reassemble = [],
len = parts.length;
for (var i = 0; i < len; i++) {
var pieces = parts[i].split('=');
if (pieces[0] === param) {
if (!didReplace) {
reassemble.Push('&' + fragment);
didReplace = true;
}
} else {
reassemble.Push(parts[i]);
}
}
if (!didReplace) {
reassemble.Push('&' + fragment);
}
a.search = reassemble.join('&');
}
return a.href;
};Java-Skriptcode zum Suchen einer bestimmten Abfragezeichenfolge und zum Ersetzen des Werts *
('input.letter').click(function () {
//0- prepare values
var qsTargeted = 'letter=' + this.value; //"letter=A";
var windowUrl = '';
var qskey = qsTargeted.split('=')[0];
var qsvalue = qsTargeted.split('=')[1];
//1- get row url
var originalURL = window.location.href;
//2- get query string part, and url
if (originalURL.split('?').length > 1) //qs is exists
{
windowUrl = originalURL.split('?')[0];
var qs = originalURL.split('?')[1];
//3- get list of query strings
var qsArray = qs.split('&');
var flag = false;
//4- try to find query string key
for (var i = 0; i < qsArray.length; i++) {
if (qsArray[i].split('=').length > 0) {
if (qskey == qsArray[i].split('=')[0]) {
//exists key
qsArray[i] = qskey + '=' + qsvalue;
flag = true;
break;
}
}
}
if (!flag)// //5- if exists modify,else add
{
qsArray.Push(qsTargeted);
}
var finalQs = qsArray.join('&');
//6- prepare final url
window.location = windowUrl + '?' + finalQs;
}
else {
//6- prepare final url
//add query string
window.location = originalURL + '?' + qsTargeted;
}
})
});
Ja, ich hatte ein Problem, bei dem mein Querystring überlaufen und duplizieren würde, aber dies lag an meiner eigenen Trägheit. also habe ich ein bisschen gespielt und ein paar js jquery (eigentlich sizzle) und C # magick aufgearbeitet.
Ich habe also erst gemerkt, dass nachdem der Server die übergebenen Werte abgeschlossen hat, die Werte keine Rolle mehr spielen, es gibt keine Wiederverwendung gleiche Parameter werden übergeben. Und das ist alles clientseitig, also könnten einige Caching/Cookies usw. in dieser Hinsicht cool sein.
JS:
$(document).ready(function () {
$('#ser').click(function () {
SerializeIT();
});
function SerializeIT() {
var baseUrl = "";
baseUrl = getBaseUrlFromBrowserUrl(window.location.toString());
var myQueryString = "";
funkyMethodChangingStuff(); //whatever else before serializing and creating the querystring
myQueryString = $('#fr2').serialize();
window.location.replace(baseUrl + "?" + myQueryString);
}
function getBaseUrlFromBrowserUrl(szurl) {
return szurl.split("?")[0];
}
function funkyMethodChangingStuff(){
//do stuff to whatever is in fr2
}
});
HTML:
<div id="fr2">
<input type="text" name="qURL" value="http://somewhere.com" />
<input type="text" name="qSPart" value="someSearchPattern" />
</div>
<button id="ser">Serialize! and go play with the server.</button>
C #:
using System.Web;
using System.Text;
using System.Collections.Specialized;
public partial class SomeCoolWebApp : System.Web.UI.Page
{
string weburl = string.Empty;
string partName = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
string loadurl = HttpContext.Current.Request.RawUrl;
string querySZ = null;
int isQuery = loadurl.IndexOf('?');
if (isQuery == -1) {
//If There Was no Query
}
else if (isQuery >= 1) {
querySZ = (isQuery < loadurl.Length - 1) ? loadurl.Substring(isQuery + 1) : string.Empty;
string[] getSingleQuery = querySZ.Split('?');
querySZ = getSingleQuery[0];
NameValueCollection qs = null;
qs = HttpUtility.ParseQueryString(querySZ);
weburl = qs["qURL"];
partName = qs["qSPart"];
//call some great method thisPageRocks(weburl,partName); or whatever.
}
}
}
Okay, Kritik ist willkommen (dies war eine nächtliche Zusammenstellung, also zögern Sie nicht, Anpassungen zu notieren). Wenn dies alles geholfen hat, Daumen hoch, Happy Coding.
Keine Duplikate, jede Anforderung ist so einzigartig wie Sie sie geändert haben, und aufgrund ihrer Struktur ist es einfach, weitere Abfragen dynamisch aus dem Dom hinzuzufügen.