it-swarm.com.de

Wie füge ich einen Abfrageparameter in einer URL hinzu oder ersetze ihn mit Javascript/jQuery?

Ich verwende jQuery 1.12. Ich möchte einen Abfragezeichenfolgeparameter in der URL-Abfragezeichenfolge meines Fensters ersetzen oder den Parameter hinzufügen, falls er noch nicht vorhanden war. Ich habe das folgende probiert:

new_url = window.location.href.replace( /[\?#].*|$/, "?order_by=" + data_val )  
window.location.href = new_url 

ich stelle jedoch fest, dass dadurch alle vorherigen Parameter in der Abfragezeichenfolge gelöscht werden, was ich nicht möchte. Wenn die Abfragezeichenfolge lautet:

?a=1&b=2

Ich möchte, dass die neue Abfragezeichenfolge lautet:

?a=2&b=2&order_by=data

und wenn die Abfragezeichenfolge war:

?a=2&b=3&order_by=old_data

es würde werden:

?a=2&b=3&order_by=data
7
user7055375

Sie können ein jQuery-Plugin verwenden, um das schwere Anheben für Sie zu erledigen. Es wird die Abfragezeichenfolge analysieren und die aktualisierte Abfragezeichenfolge für Sie rekonstruieren. Viel weniger Code, mit dem man umgehen muss.

Plugin-Download-Seite
Github Repo

// URL: ?a=2&b=3&order_by=old_data

var order_by = $.query.get('order_by');
//=> old_data

// Conditionally modify parameter value
if (order_by) { 
  order_by = “data”;
}

// Inject modified parameter back into query string
var newUrl = $.query.set(“order_by”, order_by).toString();
//=> ?a=2&b=3&order_by=data

Für diejenigen, die Node.js verwenden, ist in NPM dafür ein Paket verfügbar. 

NPM-Paket
Github Repo

var queryString = require('query-string');
var parsed = queryString.parse('?a=2&b=3&order_by=old_data');  // location.search

// Conditionally modify parameter value
if (parsed.order_by) {
  parsed.order_by = 'data';
}

// Inject modified parameter back into query string
const newQueryString = queryString.stringify(parsed);
//=> a=2&b=3&order_by=data
3
grizzthedj

Eine gute Lösung sollte mit allen folgenden Punkten umgehen:

  1. Eine URL, die bereits einen order_by-Abfrageparameter enthält, optional mit Leerzeichen vor dem Gleichheitszeichen. Dies kann weiter in Fälle unterteilt werden, in denen der order_by am Anfang, in der Mitte oder am Ende der Abfragezeichenfolge angezeigt wird.
  2. Eine URL, die noch nicht über einen order_by-Abfrageparameter verfügt, jedoch bereits ein Fragezeichen enthält, um die Abfragezeichenfolge zu begrenzen.
  3. Eine URL, die noch nicht über den Abfrageparameter order_by verfügt und noch kein Fragezeichen enthält, um die Abfragezeichenfolge zu begrenzen.

Im Folgenden werden die oben genannten Fälle behandelt:

  if (/[?&]order_by\s*=/.test(oldUrl)) {
    newUrl = oldUrl.replace(/(?:([?&])order_by\s*=[^?&]*)/, "$1order_by=" + data_val);
  } else if (/\?/.test(oldUrl)) {
    newUrl = oldUrl + "&order_by=" + data_val;
  } else {
    newUrl = oldUrl + "?order_by=" + data_val;
  }

wie unten gezeigt:

getNewUrl("?a=1&b=2");
getNewUrl("?a=2&b=3&order_by=old_data");
getNewUrl("?a=2&b=3&order_by = old_data&c=4");
getNewUrl("?order_by=old_data&a=2&b=3");
getNewUrl("http://www.stackoverflow.com");

function getNewUrl(oldUrl) {
  var data_val = "new_data";
  var newUrl;
  if (/[?&]order_by\s*=/.test(oldUrl)) {
    newUrl = oldUrl.replace(/(?:([?&])order_by\s*=[^?&]*)/, "$1order_by=" + data_val);
  } else if (/\?/.test(oldUrl)) {
    newUrl = oldUrl + "&order_by=" + data_val;
  } else {
    newUrl = oldUrl + "?order_by=" + data_val;
  }
  console.log(oldUrl + "\n...becomes...\n" + newUrl);
}  

4
Steve Chambers

function addOrReplaceOrderBy(newData) {
  var stringToAdd = "order_by=" + newData;

  if (window.location.search == "")
    return window.location.href + stringToAdd;

  if (window.location.search.indexOf('order_by=') == -1)
    return window.location.href + stringToAdd;

  var newSearchString = "";
  var searchParams = window.location.search.substring(1).split("&");
  for (var i = 0; i < searchParams.length; i++) {
    if (searchParams[i].indexOf('order_by=') > -1) {
      searchParams[i] = "order_by=" + newData;
      break;
    }
  }
  return window.location.href.split("?")[0] + "?" + searchParams.join("&");
}

window.location.href = addOrReplaceOrderBy("new_order_by");

Ein bisschen lang, aber ich denke es funktioniert wie beabsichtigt.

3
AVAVT

Vielleicht könnten Sie versuchen, den regulären Ausdruck so anzupassen, dass nur die gewünschten Werte abgerufen werden, und diese dann in einer Hilfsfunktion hinzufügen oder aktualisieren.

function paramUpdate(param) {

  var url = window.location.href,
      regExp = new RegExp(param.key + '=([a-z0-9\-\_]+)(?:&)?'),
      existsMatch = url.match(regExp);

  if (!existsMatch) {
      return url + '&' + param.key + '=' + param.value
  }

  var paramToUpdate = existsMatch[0],
      valueToReplace = existsMatch[1],
      updatedParam = paramToUpdate.replace(valueToReplace, param.value);

  return url.replace(paramToUpdate, updatedParam);
}

var new_url = paramUpdate({
    key: 'order_by',
    value: 'id'
});
window.location.href = new_url;

Hoffe es funktioniert gut für Ihre Bedürfnisse!

1
gtrenco

Sie können Parameter aus der Abfragezeichenfolge entfernen, indem Sie URLSearchParams https://developer.mozilla.org/ru/docs/Web/API/URLSearchParams?param11=val verwenden.

Es wird noch nicht von IE und Safari unterstützt, aber Sie können es verwenden, indem Sie polyfill https://github.com/jerrybendy/url-search-params-polyfill hinzufügen.

Um auf den Abfrageteil des URI zuzugreifen oder ihn zu ändern, sollten Sie die Eigenschaft "search" der window.location verwenden.

Arbeitscode-Beispiel:

  var a = document.createElement("a")
  a.href = "http://localhost.com?param1=val&param2=val2&param3=val3#myHashCode";
  var queryParams = new URLSearchParams(a.search)
  queryParams.delete("param2")
  a.search = queryParams.toString();
  console.log(a.href);

1
Artem Bozhko

Diese kleine Funktion könnte helfen. 

function changeSearchQueryParameter(oldParameter,newParameter,newValue) {
var parameters = location.search.replace("?", "").split("&").filter(function(el){ return el !== "" });
var out = "";
var count = 0;
if(oldParameter.length>0) {
if(newParameter.length>0 && (newValue.length>0 || newValue>=0)){
	out += "?";
	var params = [];
	parameters.forEach(function(v){
		var vA = v.split("=");
		if(vA[0]==oldParameter) {
			vA[0]=newParameter;
			if((newValue.length>0 || newValue>=0)) {
			vA[1] = newValue;			
			}
		} else {
			count++;
		}
		params.Push(vA.join("="));	
	});
	if(count==parameters.length) {
		params.Push([newParameter,newValue].join("="));
	}
  params = params.filter(function(el){ return el !== "" });
  if(params.length>1) {
  out += params.join("&");
  } 
  if(params.length==1) {
  out += params[0];
  }	
 }
} else {
if((newParameter.length>0) && (newValue.length>0 || newValue>=0)){
if(location.href.indexOf("?")!==-1) {
var out = "&"+newParameter+"="+newValue;	
} else {
var out = "?"+newParameter+"="+newValue;	
}
}
}
return location.href+out;
}
// if old query parameter is declared but does not exist in url then new parameter and value is simply added if it exists it will be replaced
console.log(changeSearchQueryParameter("ib","idx",5));
// add new parameter and value in url
console.log(changeSearchQueryParameter("","idy",5));
// if no new or old parameter are present url does not change
console.log(changeSearchQueryParameter("","",5));
console.log(changeSearchQueryParameter("","",""));

1
Peter Darmis

etwas wie das?

new_url = "";

if(window.location.search && window.location.search.indexOf('order_by=') != -1)
  new_url = window.location.search.replace( /order_by=\w*\d*/, "order_by=" + data_val);
else if(window.location.search)
  new_url = window.location.search + "&order_by=" + data_val;
else
  new_url = window.location.search + "?order_by=" + data_val;

window.location.href = new_url;
1
Georgiy Dubrov

Um Regex-Muster zu verwenden, bevorzuge ich dieses:

var oldUrl = "http://stackoverflow.com/";
var data_val = "newORDER" ;
var r = /^(.+order_by=).+?(&|$)(.*)$/i ;
var newUrl = "";

var matches = oldUrl.match(r) ;
if(matches===null){
  newUrl = oldUrl + ((oldUrl.indexOf("?")>-1)?"&":"?") + "order_by=" + data_val ;
}else{
  newUrl = matches[1]+data_val+matches[2]+matches[3] ;
}
conole.log(newUrl);

Wenn kein order_by vorhanden ist, ist matchesnull und order_by=.. sollte nach ? oder & kommen (falls andere Parameter vorhanden sind, benötigen neue &).

Wenn order_by vorhanden ist, hat matches 3 Elemente, siehe hier

1
MohaMad

Versuche dies:

Zum Lesen von Parametern:

const data = ['example.com?var1=value1&var2=value2&var3=value3', 'example.com?a=2&b=2&order_by=data']

const getParameters = url => {
  const parameters = url.split('?')[1],
        regex = /(\w+)=(\w+)/g,
        obj = {}
  let temp
  while (temp = regex.exec(parameters)){
    obj[temp[1]] = decodeURIComponent(temp[2])
  }
  return obj
}

for(let url of data){
  console.log(getParameters(url))
}

Um nur diese Parameter zu setzen: 

const data = ['example.com?zzz=asd']
const parameters = {a:1, b:2, add: "abs"}

const setParameters = (url, parameters) => {
  const keys = Object.keys(parameters)
  let temp = url.split('?')[0] += '?'
  for (let i = 0; i < keys.length; i++) {
    temp += `${keys[i]}=${parameters[keys[i]]}${i  == keys.length - 1 ? '' : '&'}`
  }
  return temp
}

for (let url of data){
  console.log(setParameters(url, parameters))
}

Und zum endgültigen Einfügen (oder Ersetzen während vorhanden)

const data = ['example.com?a=123&b=3&sum=126']
const parameters = {order_by: 'abc', a: 11}
const insertParameters = (url, parameters) => {
  const keys = Object.keys(parameters)
  let result = url
  for (let i = 0; i < keys.length; i++){
    if (result.indexOf(keys[i]) === -1) {
      result += `&${keys[i]}=${encodeURIComponent(parameters[keys[i]])}`
    } else {
      let regex = new RegExp(`${keys[i]}=(\\w+)`)
      result = result.replace(regex, `&${keys[i]}=${encodeURIComponent(parameters[keys[i]])}`)
    }
  }
  return result
}

for (let url of data){
  console.log(insertParameters(url, parameters))
}

Hoffe, das funktioniert für Sie;) Nach der Verwendung der Funktion ersetzen Sie einfach window.location.href

1
Maciej Kozieja

Basierend auf der Antwort von AVAVT habe ich es verbessert, so dass es einen beliebigen Schlüssel braucht, und ich habe auch das fehlende "?" wenn es kein querystring gab

function addOrReplace(key, value) {
  var stringToAdd = key+"=" + value;
  if (window.location.search == "")
    return window.location.href + '?'+stringToAdd;

  if (window.location.search.indexOf(key+'=') == -1)
    return window.location.href + stringToAdd;

  var newSearchString = "";
  var searchParams = window.location.search.substring(1).split("&");
  for (var i = 0; i < searchParams.length; i++) {
    if (searchParams[i].indexOf(key+'=') > -1) {
      searchParams[i] = key+"=" + value;
      break;
    }
  }
  return window.location.href.split("?")[0] + "?" + searchParams.join("&");
}

gebrauch:

window.location.href = addOrReplace('order_by', 'date_created');

wenn Sie die Seite nicht neu laden möchten, können Sie pushState Api verwenden

if (history.pushState) {
    var newurl =  addOrReplace('order_by', 'date_created');
    window.history.pushState({path:newurl},'',newurl);
}
0
john Smith