Ich habe diese URL:
site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc
was ich brauche, ist in der Lage zu sein, den URL-Parameter "Zeilen" in etwas zu ändern, das ich spezifiziert habe, sagen wir 10 Wert, den ich bereits angegeben habe (10).
Um meine eigene Frage 4 Jahre später zu beantworten, nachdem ich viel gelernt habe. Vor allem, dass Sie jQuery nicht für alles verwenden sollten. Ich habe ein einfaches Modul erstellt, das eine Abfragezeichenfolge analysieren/stringifizieren kann. Dies macht es leicht, die Abfragezeichenfolge zu ändern.
Sie können query-string wie folgt verwenden:
// parse the query string into an object
var q = queryString.parse(location.search);
// set the `row` property
q.rows = 10;
// convert the object to a query string
// and overwrite the existing query string
location.search = queryString.stringify(q);
Ich habe den Code von Sujoy um eine Funktion erweitert.
/**
* http://stackoverflow.com/a/10997390/11236
*/
function updateURLParameter(url, param, paramVal){
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var additionalURL = tempArray[1];
var temp = "";
if (additionalURL) {
tempArray = additionalURL.split("&");
for (var i=0; i<tempArray.length; i++){
if(tempArray[i].split('=')[0] != param){
newAdditionalURL += temp + tempArray[i];
temp = "&";
}
}
}
var rows_txt = temp + "" + param + "=" + paramVal;
return baseURL + "?" + newAdditionalURL + rows_txt;
}
Funktionsaufrufe:
var newURL = updateURLParameter(window.location.href, 'locId', 'newLoc');
newURL = updateURLParameter(newURL, 'resId', 'newResId');
window.history.replaceState('', '', updateURLParameter(window.location.href, "param", "value"));
Aktualisierte Version, die auch die Anker der URL berücksichtigt.
function updateURLParameter(url, param, paramVal)
{
var TheAnchor = null;
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var additionalURL = tempArray[1];
var temp = "";
if (additionalURL)
{
var tmpAnchor = additionalURL.split("#");
var TheParams = tmpAnchor[0];
TheAnchor = tmpAnchor[1];
if(TheAnchor)
additionalURL = TheParams;
tempArray = additionalURL.split("&");
for (var i=0; i<tempArray.length; i++)
{
if(tempArray[i].split('=')[0] != param)
{
newAdditionalURL += temp + tempArray[i];
temp = "&";
}
}
}
else
{
var tmpAnchor = baseURL.split("#");
var TheParams = tmpAnchor[0];
TheAnchor = tmpAnchor[1];
if(TheParams)
baseURL = TheParams;
}
if(TheAnchor)
paramVal += "#" + TheAnchor;
var rows_txt = temp + "" + param + "=" + paramVal;
return baseURL + "?" + newAdditionalURL + rows_txt;
}
Ich denke, du willst das Query Plugin .
Z.B.:
window.location.search = jQuery.query.set("rows", 10);
Dies funktioniert unabhängig vom aktuellen Status der Zeilen.
Ben Alman hat ein gutes jquery Querystring/URL-Plugin hier , mit dem Sie den Querystring leicht manipulieren können.
Wie gewünscht -
Gehe zu seiner Testseite hier
In firebug geben Sie folgendes in die Konsole ein
jQuery.param.querystring(window.location.href, 'a=3&newValue=100');
Es wird die folgende geänderte URL-Zeichenfolge zurückgegeben
http://benalman.com/code/test/js-jquery-url-querystring.html?a=3&b=Y&c=Z&newValue=100#n=1&o=2&p=
Beachten Sie, dass sich der Wert für einen Querystring für a von X auf 3 geändert hat und den neuen Wert hinzugefügt hat.
Sie können dann die neue URL - Zeichenfolge verwenden, wie Sie möchten, z
Schnelle kleine Lösung in reinen js, keine Plugins erforderlich:
function replaceQueryParam(param, newval, search) {
var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
var query = search.replace(regex, "$1").replace(/&$/, '');
return (query.length > 2 ? query + "&" : "?") + (newval ? param + "=" + newval : '');
}
Nenne es so:
window.location = '/mypage' + replaceQueryParam('rows', 55, window.location.search)
Oder, wenn Sie auf derselben Seite bleiben und mehrere Parameter ersetzen möchten:
var str = window.location.search
str = replaceQueryParam('rows', 55, str)
str = replaceQueryParam('cols', 'no', str)
window.location = window.location.pathname + str
bearbeiten, danke Luke: Um den Parameter vollständig zu entfernen, übergeben Sie false
oder null
als Wert: replaceQueryParam('rows', false, params)
. Da 0
auch falsy ist, geben Sie '0'
an.
sie können es auch über normale JS tun
var url = document.URL
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var aditionalURL = tempArray[1];
var temp = "";
if(aditionalURL)
{
var tempArray = aditionalURL.split("&");
for ( var i in tempArray ){
if(tempArray[i].indexOf("rows") == -1){
newAdditionalURL += temp+tempArray[i];
temp = "&";
}
}
}
var rows_txt = temp+"rows=10";
var finalURL = baseURL+"?"+newAdditionalURL+rows_txt;
Ein moderner Ansatz hierfür ist die Verwendung von nativen Standard-basierten URLSearchParams . Es wird von allen gängigen Browsern unterstützt, mit Ausnahme von IE, wo sie Polyfills available sind.
const paramsString = "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc"
const searchParams = new URLSearchParams(paramsString);
searchParams.set('rows', 10);
console.log(searchParams.toString()); // return modified string.
Wäre es eine sinnvolle Alternative zur String-Manipulation, eine HTML-Variable form
einzurichten und nur den Wert des rows
-Elements zu ändern?
Mit html
ist das also ungefähr so
<form id='myForm' target='site.fwx'>
<input type='hidden' name='position' value='1'/>
<input type='hidden' name='archiveid' value='5000'/>
<input type='hidden' name='columns' value='5'/>
<input type='hidden' name='rows' value='20'/>
<input type='hidden' name='sorting' value='ModifiedTimeAsc'/>
</form>
Mit folgendem JavaScript das Formular absenden
var myForm = document.getElementById('myForm');
myForm.rows.value = yourNewValue;
myForm.submit();
Wahrscheinlich nicht für alle Situationen geeignet, könnte aber schöner sein, als die URL-Zeichenfolge zu analysieren.
Sie können diese Bibliothek für diese Aufgabe verwenden: https://github.com/Mikhus/jsurl
var url = new Url('site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc');
url.query.rows = 10;
alert( url);
Ich habe eine kleine Hilfsfunktion geschrieben, die mit jedem select funktioniert. Alles, was Sie tun müssen, ist, die Klasse "redirectOnChange" zu einem select-Element hinzuzufügen. Dadurch wird die Seite mit einem neuen/geänderten Querystring-Parameter neu geladen, der der ID und dem Wert des select entspricht.
<select id="myValue" class="redirectOnChange">
<option value="222">test222</option>
<option value="333">test333</option>
</select>
Das obige Beispiel würde "? MyValue = 222" oder "? MyValue = 333" hinzufügen (oder "&" verwenden, wenn andere Parameter vorhanden sind) und die Seite neu laden.
jQuery:
$(document).ready(function () {
//Redirect on Change
$(".redirectOnChange").change(function () {
var href = window.location.href.substring(0, window.location.href.indexOf('?'));
var qs = window.location.href.substring(window.location.href.indexOf('?') + 1, window.location.href.length);
var newParam = $(this).attr("id") + '=' + $(this).val();
if (qs.indexOf($(this).attr("id") + '=') == -1) {
if (qs == '') {
qs = '?'
}
else {
qs = qs + '&'
}
qs = qs + newParam;
}
else {
var start = qs.indexOf($(this).attr("id") + "=");
var end = qs.indexOf("&", start);
if (end == -1) {
end = qs.length;
}
var curParam = qs.substring(start, end);
qs = qs.replace(curParam, newParam);
}
window.location.replace(href + '?' + qs);
});
});
Dies ist der moderne Weg, es zu tun:
function setGetParam(key,value) {
if (history.pushState) {
var params = new URLSearchParams(window.location.search);
params.set(key, value);
var newUrl = window.location.protocol + "//" + window.location.Host + window.location.pathname + '?' + params.toString();
window.history.pushState({path:newUrl},'',newUrl);
}
}
Hier habe ich die Antwort von Adil Malik genommen und die 3 Probleme behoben, die ich damit identifizierte.
/**
* Adds or updates a URL parameter.
*
* @param {string} url the URL to modify
* @param {string} param the name of the parameter
* @param {string} paramVal the new value for the parameter
* @return {string} the updated URL
*/
self.setParameter = function (url, param, paramVal){
// http://stackoverflow.com/a/10997390/2391566
var parts = url.split('?');
var baseUrl = parts[0];
var oldQueryString = parts[1];
var newParameters = [];
if (oldQueryString) {
var oldParameters = oldQueryString.split('&');
for (var i = 0; i < oldParameters.length; i++) {
if(oldParameters[i].split('=')[0] != param) {
newParameters.Push(oldParameters[i]);
}
}
}
if (paramVal !== '' && paramVal !== null && typeof paramVal !== 'undefined') {
newParameters.Push(param + '=' + encodeURI(paramVal));
}
if (newParameters.length > 0) {
return baseUrl + '?' + newParameters.join('&');
} else {
return baseUrl;
}
}
Ich suchte das Gleiche und fand: https://github.com/medialize/URI.js das ist ganz nett :)
- Aktualisieren
Ich habe ein besseres Paket gefunden: https://www.npmjs.org/package/qs es befasst sich auch mit Arrays in get params.
Hier ist was ich mache. Mit meiner Funktion editParams () können Sie beliebige Parameter hinzufügen, entfernen oder ändern. Anschließend können Sie die eingebaute replaceState () - Funktion verwenden, um die URL zu aktualisieren:
window.history.replaceState('object or string', 'Title', 'page.html' + editParams('sorting', ModifiedTimeAsc));
// background functions below:
// add/change/remove URL parameter
// use a value of false to remove parameter
// returns a url-style string
function editParams (key, value) {
key = encodeURI(key);
var params = getSearchParameters();
if (Object.keys(params).length === 0) {
if (value !== false)
return '?' + key + '=' + encodeURI(value);
else
return '';
}
if (value !== false)
params[key] = encodeURI(value);
else
delete params[key];
if (Object.keys(params).length === 0)
return '';
return '?' + $.map(params, function (value, key) {
return key + '=' + value;
}).join('&');
}
// Get object/associative array of URL parameters
function getSearchParameters () {
var prmstr = window.location.search.substr(1);
return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}
// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
var params = {},
prmarr = prmstr.split("&");
for (var i = 0; i < prmarr.length; i++) {
var tmparr = prmarr[i].split("=");
params[tmparr[0]] = tmparr[1];
}
return params;
}
Auch ich habe eine library geschrieben, um URL-Abfrageparameter in JavaScript abzurufen und einzustellen.
Hier ist ein Beispiel für ihre Verwendung.
var url = Qurl.create()
, query
, foo
;
Abfrageparameter als Objekt oder Schlüssel abrufen oder hinzufügen/ändern/entfernen.
// returns { foo: 'bar', baz: 'qux' } for ?foo=bar&baz=qux
query = url.query();
// get the current value of foo
foo = url.query('foo');
// set ?foo=bar&baz=qux
url.query('foo', 'bar');
url.query('baz', 'qux');
// unset foo, leaving ?baz=qux
url.query('foo', false); // unsets foo
Eine weitere Variante von Sujoys Antwort. Ich habe einfach die Variablennamen geändert und einen Namespace-Wrapper hinzugefügt:
window.MyNamespace = window.MyNamespace || {};
window.MyNamespace.Uri = window.MyNamespace.Uri || {};
(function (ns) {
ns.SetQueryStringParameter = function(url, parameterName, parameterValue) {
var otherQueryStringParameters = "";
var urlParts = url.split("?");
var baseUrl = urlParts[0];
var queryString = urlParts[1];
var itemSeparator = "";
if (queryString) {
var queryStringParts = queryString.split("&");
for (var i = 0; i < queryStringParts.length; i++){
if(queryStringParts[i].split('=')[0] != parameterName){
otherQueryStringParameters += itemSeparator + queryStringParts[i];
itemSeparator = "&";
}
}
}
var newQueryStringParameter = itemSeparator + parameterName + "=" + parameterValue;
return baseUrl + "?" + otherQueryStringParameters + newQueryStringParameter;
};
})(window.MyNamespace.Uri);
Useage ist jetzt:
var changedUrl = MyNamespace.Uri.SetQueryStringParameter(originalUrl, "CarType", "Ford");
Meine Lösung:
const setParams = (data) => {
if (typeof data !== 'undefined' && typeof data !== 'object') {
return
}
let url = new URL(window.location.href)
const params = new URLSearchParams(url.search)
for (const key of Object.keys(data)) {
if (data[key] == 0) {
params.delete(key)
} else {
params.set(key, data[key])
}
}
url.search = params
url = url.toString()
window.history.replaceState({ url: url }, null, url)
}
Dann rufen Sie einfach "setParams" auf und übergeben ein Objekt mit den Daten, die Sie setzen möchten.
Beispiel:
$('select').on('change', e => {
const $this = $(e.currentTarget)
setParams({ $this.attr('name'): $this.val() })
})
In meinem Fall musste ich eine HTML-Select-Eingabe aktualisieren, wenn sich diese ändert und wenn der Wert "0" ist, den Parameter entfernen. Sie können die Funktion bearbeiten und den Parameter aus der URL entfernen, wenn der Objektschlüssel ebenfalls "null" ist.
Hoffe, das hilft dir