Come ottenere la stringa di query dall’URL corrente con JavaScript?

Ho un URL come questo:

http://localhost/PMApp/temp.htm?ProjectID=462 

Quello che devo fare è ottenere i dettagli dopo ? sign (query string) – che è ProjectID=462 . Come posso ottenere che usando JavaScript?

Quello che ho fatto finora è questo:

 var url = window.location.toString(); url.match(?); 

Non so cosa fare dopo.

window.location un’occhiata all’articolo di MDN su window.location .

QueryString è disponibile in window.location.search .

Soluzione che funziona anche nei browser legacy

MDN fornisce un esempio (non più disponibile nell’articolo di riferimento sopra) su come ottenere il valore di una singola chiave disponibile in QueryString. Qualcosa come questo:

 function getQueryStringValue (key) { return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1")); } // Would write the value of the QueryString-variable called name to the console console.log(getQueryStringValue("name")); 

Nei browser moderni

Nei browser moderni hai la proprietà searchParams dell’interfaccia URL, che restituisce un object URLSearchParams . L’object restituito ha un numero di metodi convenienti, incluso un metodo get. Quindi l’equivalente dell’esempio sopra sarebbe:

 let params = (new URL(document.location)).searchParams; let name = params.get("name"); 

L’interfaccia URLSearchParams può anche essere utilizzata per analizzare le stringhe in un formato querystring e trasformarle in un utile object URLSearchParams.

 let paramsString = "name=foo&age=1337" let searchParams = new URLSearchParams(paramsString); searchParams.has("name") === true; // true searchParams.get("age") === "1337"; // true 

Si noti che il supporto del browser è ancora limitato su questa interfaccia, quindi se è necessario supportare i browser legacy, attenersi al primo esempio.

Usa window.location.search per ottenere tutto dopo ? incluso ?

Esempio:

 var url = window.location.search; url = url.replace("?", ''); // remove the ? alert(url); //alerts ProjectID=462 is your case 

Ciò aggiungerà una funzione globale per accedere alle variabili queryString come una mappa.

 // ------------------------------------------------------------------------------------- // Add function for 'window.location.query( [queryString] )' which returns an object // of querystring keys and their values. An optional string parameter can be used as // an alternative to 'window.location.search'. // ------------------------------------------------------------------------------------- // Add function for 'window.location.query.makeString( object, [addQuestionMark] )' // which returns a queryString from an object. An optional boolean parameter can be // used to toggle a leading question mark. // ------------------------------------------------------------------------------------- if (!window.location.query) { window.location.query = function (source) { var map = {}; source = source || this.search; if ("" != source) { var groups = source, i; if (groups.indexOf("?") == 0) { groups = groups.substr(1); } groups = groups.split("&"); for (i in groups) { source = groups[i].split("=", // For: xxx=, Prevents: [xxx, ""], Forces: [xxx] (groups[i].slice(-1) !== "=") + 1 ); // Key i = decodeURIComponent(source[0]); // Value source = source[1]; source = typeof source === "undefined" ? source : decodeURIComponent(source); // Save Duplicate Key if (i in map) { if (Object.prototype.toString.call(map[i]) !== "[object Array]") { map[i] = [map[i]]; } map[i].push(source); } // Save New Key else { map[i] = source; } } } return map; } window.location.query.makeString = function (source, addQuestionMark) { var str = "", i, ii, key; if (typeof source == "boolean") { addQuestionMark = source; source = undefined; } if (source == undefined) { str = window.location.search; } else { for (i in source) { key = "&" + encodeURIComponent(i); if (Object.prototype.toString.call(source[i]) !== "[object Array]") { str += key + addUndefindedValue(source[i]); } else { for (ii = 0; ii < source[i].length; ii++) { str += key + addUndefindedValue(source[i][ii]); } } } } return (addQuestionMark === false ? "" : "?") + str.substr(1); } function addUndefindedValue(source) { return typeof source === "undefined" ? "" : "=" + encodeURIComponent(source); } } 

Godere.

È ansible utilizzare questa funzione, per la stringa divisa da? Id =

  function myfunction(myvar){ var urls = myvar; var myurls = urls.split("?id="); var mylasturls = myurls[1]; var mynexturls = mylasturls.split("&"); var url = mynexturls[0]; alert(url) } myfunction(window.top.location.href); myfunction("http://www.myname.com/index.html?id=dance&emp;cid=in_social_facebook-hhp-food-moonlight-influencer_s7_20160623"); 

ecco il violino

  window.location.href.slice(window.location.href.indexOf('?') + 1); 

È ansible utilizzare la proprietà window.location dell’object window.location per ottenere la parte query dell’URL. Si noti che include il punto interrogativo (?) All’inizio, nel caso in cui ciò influisce sul modo in cui si intende analizzarlo.

  var queryObj = {}; if(url.split("?").length>0){ var queryString = url.split("?")[1]; } 

ora hai la parte query in queryString

La prima sostituzione rimuoverà tutti gli spazi bianchi, la seconda sostituirà tutta la parte “&” con “,” e infine la terza sostituzione inserirà “:” al posto dei segni “=”.

 queryObj = JSON.parse('{"' + queryString.replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}') 

Quindi diciamo che hai una query come abc = 123 & efg = 456 . Ora prima dell’analisi, la tua query viene convertita in qualcosa come {“abc”: “123”, “efg”: “456”}. Ora, quando lo analizzerete, vi fornirà la vostra richiesta in json object.

 decodeURI(window.location.search) .replace('?', '') .split('&') .map(param => param.split('=')) .reduce((values, [ key, value ]) => { values[ key ] = value return values }, {}) 

Dovresti dare un’occhiata all’URL dell’URL che ha metodi di supporto per ottenere questo in esso come URLSearchParams : https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Questo non è attualmente supportato da tutti i browser moderni, quindi non dimenticare di inserirlo in polipropilene (Polyfill disponibile utilizzando https://qa.polyfill.io/ ).

Convertilo in array e poi dividi con ‘?’

 var url= 'http://localhost/PMApp/temp.htm?ProjectID=462'; url.split('?')[1]; //ProjectID=462