url - Cum pot obține valorile șirului de interogare în JavaScript?
Există o metodă fără plugin-uri de a prelua valorile șirului de interogare prin jQuery (sau fără)?
Dacă da, cum? Dacă nu, există un plugin care poate face acest lucru?
Răspuns #1
Folosește URLSearchParams pentru a obține parametrii din șirul de interogare.
De exemplu:
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
Actualizare: Ian-2022
Folosirea Proxy() este mai rapidă decât folosirea Object.fromEntries() și este mai bine suportată.
Această abordare vine cu avertizarea că nu mai poți itera peste parametrii din interogare.
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
let value = params.some_key; // "some_value"
Actualizare: Iunie-2021
Pentru un caz specific în care aveți nevoie de toți parametrii interogării:
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
Actualizare: sep-2018
Poți folosi URLSearchParams, care este simplu și are suport decent (dar nu complet) în browsere.
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
Original
Nu ai nevoie de jQuery pentru acest scop. Poți folosi doar puțin JavaScript pur:
function getParameterByName(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
Utilizare:
// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)
NOTĂ: Dacă un parametru este prezent de mai multe ori (?foo=lorem&foo=ipsum), veți obține prima valoare (lorem). Nu există un standard în această privință și utilizările variază, vedeți de exemplu această întrebare: Poziția autoritară a cheilor duplicate din interogarea HTTP GET.
NOTĂ: Funcția diferențiază între majuscule și minuscule. Dacă preferați un nume de parametru care să nu facă diferența între majuscule și minuscule, adăugați modificatorul 'i' la RegExp
NOTĂ: Dacă primești o eroare eslint no-useless-escape, poți înlocui name=name.replace(/[\[\]]/g, '\$&'); cu name=name.replace(/[[\]]/g, '\$&').
Aceasta este o actualizare bazată pe noile specificații URLSearchParams pentru a obține același rezultat mai concis. Vezi răspunsul intitulat „URLSearchParams” mai jos.
Răspunsul #2
Unele dintre soluțiile postate aici sunt ineficiente. Repetarea căutării cu expresii regulate de fiecare dată când scriptul are nevoie să acceseze un parametru este complet inutilă, o singură funcție pentru a împărți parametrii într-un obiect de tip tabel asociativ este suficientă. Dacă nu lucrați cu API-ul History din HTML 5, acest lucru este necesar doar o dată pe încărcarea paginii. Celelalte sugestii de aici eșuează, de asemenea, în a decoda corect URL-ul.
var urlParams;
(window.onpopstate = function () {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query = window.location.search.substring(1);
urlParams = {};
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
})();Exemplu de querystring:
?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty
Rezultat :
urlParams = {
enc: " Hello ",
i: "main",
mode: "front",
sid: "de8d49b78a85a322c4155015fdce22c4",
empty: ""
}
alert(urlParams["mode"]);
// -> "front"
alert("empty" in urlParams);
// -> true
Acest lucru ar putea fi ușor îmbunătățit pentru a gestiona și șiruri de interogare de tip array. Un exemplu al acestuia este aici, dar deoarece parametrii de tip array nu sunt definiți în RFC 3986, nu voi polua acest răspuns cu codul sursă. Pentru cei interesați de o versiune „poluată”, consultați răspunsul lui campbeln de mai jos.
De asemenea, așa cum s-a menționat în comentarii, ; este un separator legal pentru perechile key=value. Ar fi necesar un regex mai complicat pentru a gestiona ; sau &, ceea ce cred că este inutil deoarece este rar ca ; să fie folosit și aș spune chiar și mai puțin probabil ca ambele să fie folosite. Dacă trebuie să suporti ; în loc de &, doar înlocuiește-le în regex.
<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>Mult mai simplu!
#ACTUALIZAT
O nouă capacitate ar fi să se recupereze parametrii repetați astfel:
myparam=1&myparam=2. Nu există o specificație, totuși, majoritatea abordărilor actuale urmează generarea unui tablou.
myparam = ["1", "2"]
Deci, aceasta este abordarea pentru a o gestiona:
let urlParams = {};
(window.onpopstate = function () {
let match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) {
return decodeURIComponent(s.replace(pl, " "));
},
query = window.location.search.substring(1);
while (match = search.exec(query)) {
if (decode(match[1]) in urlParams) {
if (!Array.isArray(urlParams[decode(match[1])])) {
urlParams[decode(match[1])] = [urlParams[decode(match[1])]];
}
urlParams[decode(match[1])].push(decode(match[2]));
} else {
urlParams[decode(match[1])] = decode(match[2]);
}
}
})();
Răspunsul #3
ES2015 (ES6)
getQueryStringParams = query => {
return query
? (/^[?#]/.test(query) ? query.slice(1) : query)
.split('&')
.reduce((params, param) => {
let [key, value] = param.split('=');
params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
return params;
}, {}
)
: {}
};
Fără jQuery
var qs = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i)
{
var p=a[i].split('=', 2);
if (p.length == 1)
b[p[0]] = "";
else
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'));
Cu un URL de genul ?topic=123&name=query+string, următorul va returna:
qs["topic"]; // 123
qs["name"]; // query string
qs["nothere"]; // undefined (object)
Metoda Google
Distrugând codul Google am găsit metoda pe care o folosesc: getUrlParameters
function (b) {
var c = typeof b === "undefined";
if (a !== h && c) return a;
for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) {
var l = b[f][p]("=");
if (l !== -1) {
var q = b[f][I](0, l),
l = b[f][I](l + 1),
l = l[Ca](/\+/g, " ");
try {
d[q] = e(l)
} catch (A) {}
}
}
c && (a = d);
return d
}
Este obfuscat, dar este de înțeles. Nu funcționează deoarece unele variabile nu sunt definite.
Ei încep să caute parametri în URL de la ? și de asemenea din hash #. Apoi, pentru fiecare parametru, îl împart la semnul egal b[f][p]("=") (care arată ca indexOf, folosesc poziția caracterului pentru a obține cheia/valoarea). După ce îl împart, verifică dacă parametrul are o valoare sau nu; dacă are, atunci stochează valoarea lui d, altfel continuă pur și simplu.
La final, obiectul d este returnat, gestionând scăparea și semnul +. Acest obiect este exact ca al meu, are același comportament.
Metoda mea ca plugin jQuery
(function($) {
$.QueryString = (function(paramsArray) {
let params = {};
for (let i = 0; i < paramsArray.length; ++i)
{
let param = paramsArray[i]
.split('=', 2);
if (param.length !== 2)
continue;
params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
}
return params;
})(window.location.search.substr(1).split('&'))
})(jQuery);
Utilizare
//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"
//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }
//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object
//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue¶m2=val"
//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));
Test de performanță (metoda split versus metoda regex) (jsPerf)
Cod de pregătire: declarația metodelor
Cod de testare divizat
var qs = window.GetQueryString(query);
var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];
Cod de test Regex
var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");
Testare în Firefox 4.0 x86 pe Windows Server 2008 R2/7 x64
- Metoda Split: 144.780 ±2,17% cea mai rapidă
- Metoda Regex: 13.891 ±0,85% | cu 90% mai lent
Răspunsul #4
ParametriiCăutareURL
Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ și Chrome 49+ suportă API-ul URLSearchParams:
- Anunț și detalii despre Chrome
- Anunț și detalii despre operă
- Anunț și detalii despre Firefox
Există un polyfill URLSearchParams sugerat de Google pentru versiunile stabile ale IE.
Nu este standardizat de W3C, dar este un standard viu de către WhatWG.
Îl poți folosi pe location:
const params = new URLSearchParams(location.search);
sau
const params = (new URL(location)).searchParams;
Sau desigur pe orice URL:
const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);
Poți obține parametrii și folosind o scurtătură .searchParams pe obiectul URL, astfel:
const params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2"
Citiți/stabiliți parametrii prin API-ul get(KEY), set(KEY, VALUE), append(KEY, VALUE). De asemenea, puteți itera peste toate valorile for (let p of params) {}.
O implementare de referință și o pagină de exemplu sunt disponibile pentru audit și testare.
Răspunsul #5
Versiune îmbunătățită a răspunsului lui Artem Barger:
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
Pentru mai multe informații despre îmbunătățire, vezi: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/
Răspunsul #6
Doar o altă recomandare. Pluginul Purl permite accesarea tuturor părților URL-ului, inclusiv ancora, gazda, etc.
Poate fi utilizat cu sau fără jQuery.
Utilizarea este foarte simplă și cool:
var url = $.url('http://example.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://example.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'
Totuși, începând cu 11 noiembrie 2014, Purl nu mai este întreținut și autorul recomandă utilizarea URI.js în schimb. Pluginul jQuery este diferit prin faptul că se concentrează pe elemente - pentru utilizarea cu șiruri de caractere, folosiți direct URI, cu sau fără jQuery. Codul similar ar arăta astfel, documentație mai completă aici:
var url = new URI('http://example.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'
Răspunsul #7
rezumat
O soluție rapidă, completă, care gestionează chei cu valori multiple și caractere codificate.
// using ES5 (200 characters)
var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)})
// using ES6 (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})
// as a function with reduce
function getQueryParams() {
return location.search
? location.search.substr(1).split`&`.reduce((qd, item) => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v); return qd}, {})
: {}
}
Pe mai multe linii:
var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
var s = item.split("="),
k = s[0],
v = s[1] && decodeURIComponent(s[1]); // null-coalescing / short-circuit
//(k in qd) ? qd[k].push(v) : qd[k] = [v]
(qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit
})
Ce este tot acest cod...
"null-coalescing", evaluare short-circuit
Atribuiri Destructurare ES6, Funcții săgeată, Șiruri de caractere template ####Exemplu:
"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]
> qd.a[1] // "5"
> qd["a"][1] // "5"
Citește mai mult... despre soluția Vanilla JavaScript.
Pentru a accesa diferite părți ale unui URL folosiți location.(search|hash)
Cea mai ușoară soluție (pentru începători)
var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
- Gestionează corect cheile goale.
- Suprascrie mai multe chei cu ultima valoare găsită.
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined
Chei cu mai multe valori
Verificare simplă a cheii (item in dict) ? dict.item.push(val) : dict.item=[val]
var qd = {};
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})
- Acum returnează tablouri în schimb.
- Accesați valorile prin
qd.key[index]sauqd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]
Caractere codificate?
Folosește decodeURIComponent() pentru al doilea sau ambele divizări.
var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v]})
####Exemplu:
"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: ["undefined"] // decodeURIComponent(undefined) returns "undefined" !!!*
e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]
v = v && decodeURIComponent(v);
if (location.search) location.search.substr(1).split("&").forEach(...)
Răspunsul #8
Roshambo pe snipplr.com are un script simplu pentru a realiza acest lucru descris în Get URL Parameters with jQuery | Improved. Cu scriptul său poți, de asemenea, să extragi cu ușurință doar parametrii pe care îi dorești.
Iată esența:
$.urlParam = function(name, url) {
if (!url) {
url = window.location.href;
}
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
if (!results) {
return undefined;
}
return results[1] || undefined;
}
Atunci doar ia-ți parametrii din șirul de interogare.
Deci dacă URL-ul/șirul de interogare era xyz.example/index.html?lang=de.
Pur și simplu apelează var langval=$.urlParam('lang');, și îl ai.
UZBEKJON are și un articol grozav pe această temă, Obțineți parametrii și valorile URL cu jQuery.
Răspunsul #9
Dacă folosești jQuery, poți folosi o bibliotecă, cum ar fi jQuery BBQ: Biblioteca pentru Back Button și Query.
...jQuery BBQ oferă o metodă completă
.deparam(), împreună cu gestionarea stării hash și metode utilitare pentru analizarea și combinarea fragmentelor/șirurilor de interogare.
Editare: Adăugarea unui exemplu Deparam:
var DeparamExample = function() {
var params = $.deparam.querystring();
//nameofparam is the name of a param from url
//code below will get param if ajax refresh with hash
if (typeof params.nameofparam == 'undefined') {
params = jQuery.deparam.fragment(window.location.href);
}
if (typeof params.nameofparam != 'undefined') {
var paramValue = params.nameofparam.toString();
}
};Dacă vrei să folosești doar JavaScript simplu, ai putea folosi...
var getParamValue = (function() {
var params;
var resetParams = function() {
var query = window.location.search;
var regex = /[?&;](.+?)=([^&;]+)/g;
var match;
params = {};
if (query) {
while (match = regex.exec(query)) {
params[match[1]] = decodeURIComponent(match[2]);
}
}
};
window.addEventListener
&& window.addEventListener('popstate', resetParams);
resetParams();
return function(param) {
return params.hasOwnProperty(param) ? params[param] : null;
}
})();
Datorită noului API HTML History și în special history.pushState() și history.replaceState(), URL-ul se poate schimba, ceea ce va invalida memoria cache a parametrilor și valorilor acestora.
Această versiune își va actualiza memoria internă a parametrilor de fiecare dată când se schimbă istoricul.
Răspuns #10
Folosește doar două împărțiri:
function get(n) {
var half = location.search.split(n + '=')[1];
return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}
Am citit toate răspunsurile anterioare și mai complete. Dar cred că acesta este metoda cea mai simplă și mai rapidă. Poți verifica în acest benchmark jsPerf
Pentru a rezolva problema din comentariul lui Rup, adăugați o divizare condițională schimbând prima linie cu cele două de mai jos. Dar acuratețea absolută înseamnă că acum este mai lent decât regexp (vezi jsPerf).
function get(n) {
var half = location.search.split('&' + n + '=')[1];
if (!half) half = location.search.split('?' + n + '=')[1];
return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}
Deci, dacă știi că nu te vei confrunta cu cazul opus al lui Rup, asta câștigă. Altfel, expresia regulată.
Sau dacă aveți control asupra șirului de interogare și puteți garanta că o valoare pe care încercați să o obțineți nu va conține niciun caracter codificat URL (a avea astfel de caractere într-o valoare ar fi o idee proastă) - puteți utiliza următoarea versiune ușor mai simplificată și mai ușor de citit a primei opțiuni:
function getQueryStringValueByName(name) { var queryStringFromStartOfValue = location.search.split(name + '=')[1]; return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;
Răspunsul #11
Iată încercarea mea de a transforma soluția excelentă a lui Andy E într-un plugin jQuery complet:
;(function ($) {
$.extend({
getQueryString: function (name) {
function parseParams() {
var params = {},
e,
a = /\+/g, // Regex for replacing addition symbol with a space
r = /([^&=]+)=?([^&]*)/g,
d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
q = window.location.search.substring(1);
while (e = r.exec(q))
params[d(e[1])] = d(e[2]);
return params;
}
if (!this.queryStringParams)
this.queryStringParams = parseParams();
return this.queryStringParams[name];
}
});
})(jQuery);
Sintaxa este:
var someVar = $.getQueryString('myParam');
Ce e mai bun din ambele lumi!
Răspunsul #12
Dacă faci mai multe manipulări ale URL-ului decât simpla analiză a șirului de interogare, s-ar putea să găsești URI.js util. Este o bibliotecă pentru manipularea URL-urilor - și vine cu toate dotările posibile. (Îmi cer scuze pentru auto-promovare aici)
pentru a converti șirul tău de interogare într-o hartă:
var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data == {
"foo": ["bar", "world"],
"bar": "baz"
}
(URI.js, de asemenea, „corectează” querystring-urile incorecte, cum ar fi ?&foo&&bar=baz& în ?foo&bar=baz)
Răspunsul #13
Îmi place soluția lui Ryan Phelan. Dar nu văd niciun motiv să extind jQuery pentru asta? Nu există nicio utilizare a funcționalității jQuery.
Pe de altă parte, îmi place funcția încorporată din Google Chrome: window.location.getParameter.
Deci de ce să nu folosim asta? Bine, celelalte browsere nu au. Așadar, să creăm această funcție dacă nu există:
if (!window.location.getParameter ) {
window.location.getParameter = function(key) {
function parseParams() {
var params = {},
e,
a = /\+/g, // Regex for replacing addition symbol with a space
r = /([^&=]+)=?([^&]*)/g,
d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
q = window.location.search.substring(1);
while (e = r.exec(q))
params[d(e[1])] = d(e[2]);
return params;
}
if (!this.queryStringParams)
this.queryStringParams = parseParams();
return this.queryStringParams[key];
};
}
Această funcție este mai mult sau mai puțin de la Ryan Phelan, dar este ambalată diferit: nume clar și fără dependențe de alte biblioteci javascript. Mai multe despre această funcție pe blogul meu.
Răspuns #14
Iată un mod rapid de a obține un obiect similar cu array-ul PHP $_GET:
function get_query(){
var url = location.search;
var qs = url.substring(url.indexOf('?') + 1).split('&');
for(var i = 0, result = {}; i < qs.length; i++){
qs[i] = qs[i].split('=');
result[qs[i][0]] = decodeURIComponent(qs[i][1]);
}
return result;
}
Utilizare :
var $_GET = get_query();
Pentru șirul de interogare x=5&y&z=hello&x=6 acesta returnează obiectul:
{
x: "6",
y: undefined,
z: "hello"
}
Răspuns #15
Păstrează-l simplu în cod JavaScript de bază:
function qs(key) {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars[key];
}
Apelează-l de oriunde din codul JavaScript:
var result = qs('someKey');
Răspuns #16
De la MDN:
function loadPageVar (sVar) {
return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
alert(loadPageVar("name"));
Răspunsul #17
Acestea sunt toate răspunsuri grozave, dar aveam nevoie de ceva puțin mai robust și m-am gândit că v-ar plăcea să aveți ceea ce am creat.
Este o metodă simplă de bibliotecă care realizează disecția și manipularea parametrilor URL. Metoda statică are următoarele submetode care pot fi apelate pe URL-ul respectiv:
- obțineGazdă
- obțineCalea
- obțineHash
- seteazăHash
- obțineParametri
- obțineInterogarea
- seteazăParam
- obțineParam
- areParametru
- eliminăParam
Exemplu :
URLParser(url).getParam('myparam1')
var url = "http://www.example.com/folder/mypage.html?myparam1=1&myparam2=2#something";
function URLParser(u){
var path="",query="",hash="",params;
if(u.indexOf("#") > 0){
hash = u.substr(u.indexOf("#") + 1);
u = u.substr(0 , u.indexOf("#"));
}
if(u.indexOf("?") > 0){
path = u.substr(0 , u.indexOf("?"));
query = u.substr(u.indexOf("?") + 1);
params= query.split('&');
}else
path = u;
return {
getHost: function(){
var hostexp = /\/\/([\w.-]*)/;
var match = hostexp.exec(path);
if (match != null && match.length > 1)
return match[1];
return "";
},
getPath: function(){
var pathexp = /\/\/[\w.-]*(?:\/([^?]*))/;
var match = pathexp.exec(path);
if (match != null && match.length > 1)
return match[1];
return "";
},
getHash: function(){
return hash;
},
getParams: function(){
return params
},
getQuery: function(){
return query;
},
setHash: function(value){
if(query.length > 0)
query = "?" + query;
if(value.length > 0)
query = query + "#" + value;
return path + query;
},
setParam: function(name, value){
if(!params){
params= new Array();
}
params.push(name + '=' + value);
for (var i = 0; i < params.length; i++) {
if(query.length > 0)
query += "&";
query += params[i];
}
if(query.length > 0)
query = "?" + query;
if(hash.length > 0)
query = query + "#" + hash;
return path + query;
},
getParam: function(name){
if(params){
for (var i = 0; i < params.length; i++) {
var pair = params[i].split('=');
if (decodeURIComponent(pair[0]) == name)
return decodeURIComponent(pair[1]);
}
}
console.log('Query variable %s not found', name);
},
hasParam: function(name){
if(params){
for (var i = 0; i < params.length; i++) {
var pair = params[i].split('=');
if (decodeURIComponent(pair[0]) == name)
return true;
}
}
console.log('Query variable %s not found', name);
},
removeParam: function(name){
query = "";
if(params){
var newparams = new Array();
for (var i = 0;i < params.length;i++) {
var pair = params[i].split('=');
if (decodeURIComponent(pair[0]) != name)
newparams .push(params[i]);
}
params = newparams;
for (var i = 0; i < params.length; i++) {
if(query.length > 0)
query += "&";
query += params[i];
}
}
if(query.length > 0)
query = "?" + query;
if(hash.length > 0)
query = query + "#" + hash;
return path + query;
},
}
}
document.write("Host: " + URLParser(url).getHost() + '<br>');
document.write("Path: " + URLParser(url).getPath() + '<br>');
document.write("Query: " + URLParser(url).getQuery() + '<br>');
document.write("Hash: " + URLParser(url).getHash() + '<br>');
document.write("Params Array: " + URLParser(url).getParams() + '<br>');
document.write("Param: " + URLParser(url).getParam('myparam1') + '<br>');
document.write("Has Param: " + URLParser(url).hasParam('myparam1') + '<br>');
document.write(url + '<br>');
// Remove the first parameter
url = URLParser(url).removeParam('myparam1');
document.write(url + ' - Remove the first parameter<br>');
// Add a third parameter
url = URLParser(url).setParam('myparam3',3);
document.write(url + ' - Add a third parameter<br>');
// Remove the second parameter
url = URLParser(url).removeParam('myparam2');
document.write(url + ' - Remove the second parameter<br>');
// Add a hash
url = URLParser(url).setHash('newhash');
document.write(url + ' - Set Hash<br>');
// Remove the last parameter
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove the last parameter<br>');
// Remove a parameter that doesn't exist
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove a parameter that doesn\"t exist<br>');
Răspunsul #18
Concurs de programare cu cod scurt:
var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&");
for (var i in a) {
var s = a[i].split("=");
a[i] = a[unescape(s[0])] = unescape(s[1]);
}
Afișează-l!
for (i in a) {
document.write(i + ":" + a[i] + "<br/>");
};
Pe Mac-ul meu: test.htm?i=can&has=cheezburger afișează
0:can
1:cheezburger
i:can
has:cheezburger
Răspunsul #19
Folosec expresii regulate mult, dar nu pentru asta.
Mi se pare mai ușor și mai eficient să citesc șirul de interogare o singură dată în aplicația mea și să construiesc un obiect din toate perechile cheie/valoare astfel:
var search = function() {
var s = window.location.search.substr(1),
p = s.split(/\&/), l = p.length, kv, r = {};
if (l === 0) {return false;}
while (l--) {
kv = p[l].split(/\=/);
r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
}
return r;
}();
Pentru un URL precum http://example.com?param1=val1¶m2=val2 poți obține valoarea lor mai târziu în codul tău ca search.param1 și search.param2.
Răspuns #20
function GET() {
var data = [];
for(x = 0; x < arguments.length; ++x)
data.push(location.href.match(new RegExp("/\?".concat(arguments[x],"=","([^\n&]*)")))[1])
return data;
}
example:
data = GET("id","name","foo");
query string : ?id=3&name=jet&foo=b
returns:
data[0] // 3
data[1] // jet
data[2] // b
or
alert(GET("id")[0]) // return 3
Răspuns #21
Metoda jQuery Roshambo nu se ocupa de decodificarea URL-ului
http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/
Tocmai am adăugat și acea capacitate în timp ce adăugam în instrucțiunea return
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
Acum poți găsi esența actualizată:
$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
}
Răspunsul #22
Iată editarea mea la acest răspuns excelent - cu abilitatea adăugată de a analiza șirurile de interogare cu chei fără valori.
var url = 'http://sb.com/reg/step1?param';
var qs = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i) {
var p=a[i].split('=', 2);
if (p[1]) p[1] = decodeURIComponent(p[1].replace(/\+/g, " "));
b[p[0]] = p[1];
}
return b;
})((url.split('?'))[1].split('&'));
IMPORTANT! Parametrul pentru acea funcție din ultima linie este diferit. Este doar un exemplu despre cum se poate transmite un URL arbitrar către ea. Poți folosi ultima linie din răspunsul lui Bruno pentru a parsa URL-ul curent.
Deci ce s-a schimbat exact? Cu url-ul http://sb.com/reg/step1?param= rezultatele vor fi aceleași. Dar cu url-ul http://sb.com/reg/step1?param soluția lui Bruno returnează un obiect fără chei, în timp ce a mea returnează un obiect cu cheia param și valoarea undefined.
Răspunsul #23
Îmi place acesta (preluat de pe jquery-howto.blogspot.co.uk):
// get an array with all querystring values
// example: var valor = getUrlVars()["valor"];
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
Funcționează grozav pentru mine.
Răspuns #24
Iată o versiune extinsă a versiunii legate de Andy E „Handle array-style query strings”. Am rezolvat un bug (?key=1&key[]=2&key[]=3; 1 se pierdea și era înlocuit cu [2,3]), am făcut câteva îmbunătățiri minore de performanță (re-decodarea valorilor, recalcularea poziției „[”, etc.) și am adăugat o serie de îmbunătățiri (funcționalizat, suport pentru ?key=1&key=2, suport pentru delimitatori ;). Am lăsat variabilele enervant de scurte, dar am adăugat o mulțime de comentarii pentru a le face lizibile (oh, și am refolosit v în cadrul funcțiilor locale, scuze dacă este confuz ;).
Va gestiona următorul șir de interogare...
?test=Hello&person=neek&person[]=jeff&person[]=jim&person[extra]=john&test3&nocache=1398914891264
...transformându-l într-un obiect care arată ca...
{
"test": "Hello",
"person": {
"0": "neek",
"1": "jeff",
"2": "jim",
"length": 3,
"extra": "john"
},
"test3": "",
"nocache": "1398914891264"
}
După cum puteți observa mai sus, această versiune gestionează o anumită măsură de matrici „malformate”, adică - person=neek&person[]=jeff&person[]=jim sau person=neek&person=jeff&person=jim, deoarece cheia este identificabilă și validă (cel puțin în NameValueCollection.Add din dotNet):
Dacă cheia specificată există deja în instanța NameValueCollection țintă, valoarea specificată este adăugată la lista existentă de valori separate prin virgulă, sub forma „valoare1,valoare2,valoare3”.
Se pare că juriul este oarecum împărțit în privința cheilor repetate, deoarece nu există o specificație. În acest caz, mai multe chei sunt stocate ca un (fals) array. Dar rețineți că nu procesez valorile pe baza virgulilor în array-uri.
Codul:
getQueryStringKey = function(key) {
return getQueryStringAsObject()[key];
};
getQueryStringAsObject = function() {
var b, cv, e, k, ma, sk, v, r = {},
d = function (v) { return decodeURIComponent(v).replace(/\+/g, " "); }, //# d(ecode) the v(alue)
q = window.location.search.substring(1), //# suggested: q = decodeURIComponent(window.location.search.substring(1)),
s = /([^&;=]+)=?([^&;]*)/g //# original regex that does not allow for ; as a delimiter: /([^&=]+)=?([^&]*)/g
;
//# ma(make array) out of the v(alue)
ma = function(v) {
//# If the passed v(alue) hasn't been setup as an object
if (typeof v != "object") {
//# Grab the cv(current value) then setup the v(alue) as an object
cv = v;
v = {};
v.length = 0;
//# If there was a cv(current value), .push it into the new v(alue)'s array
//# NOTE: This may or may not be 100% logical to do... but it's better than loosing the original value
if (cv) { Array.prototype.push.call(v, cv); }
}
return v;
};
//# While we still have key-value e(ntries) from the q(uerystring) via the s(earch regex)...
while (e = s.exec(q)) { //# while((e = s.exec(q)) !== null) {
//# Collect the open b(racket) location (if any) then set the d(ecoded) v(alue) from the above split key-value e(ntry)
b = e[1].indexOf("[");
v = d(e[2]);
//# As long as this is NOT a hash[]-style key-value e(ntry)
if (b < 0) { //# b == "-1"
//# d(ecode) the simple k(ey)
k = d(e[1]);
//# If the k(ey) already exists
if (r[k]) {
//# ma(make array) out of the k(ey) then .push the v(alue) into the k(ey)'s array in the r(eturn value)
r[k] = ma(r[k]);
Array.prototype.push.call(r[k], v);
}
//# Else this is a new k(ey), so just add the k(ey)/v(alue) into the r(eturn value)
else {
r[k] = v;
}
}
//# Else we've got ourselves a hash[]-style key-value e(ntry)
else {
//# Collect the d(ecoded) k(ey) and the d(ecoded) sk(sub-key) based on the b(racket) locations
k = d(e[1].slice(0, b));
sk = d(e[1].slice(b + 1, e[1].indexOf("]", b)));
//# ma(make array) out of the k(ey)
r[k] = ma(r[k]);
//# If we have a sk(sub-key), plug the v(alue) into it
if (sk) { r[k][sk] = v; }
//# Else .push the v(alue) into the k(ey)'s array
else { Array.prototype.push.call(r[k], v); }
}
}
//# Return the r(eturn value)
return r;
};
Răspuns #25
Aveam nevoie de un obiect din șirul de interogare și urăsc mult cod. S-ar putea să nu fie cel mai robust din univers, dar sunt doar câteva linii de cod.
var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
q[i.split('=')[0]]=i.split('=')[1];
});
Un URL ca this.htm?hello=world&foo=bar va crea:
{hello:'world', foo:'bar'}
Răspuns #26
Aceasta este o funcție pe care am creat-o acum ceva timp și cu care sunt destul de mulțumit. Nu este sensibilă la majuscule - ceea ce este util. De asemenea, dacă QS-ul solicitat nu există, pur și simplu returnează un șir gol.
Folosesc o versiune comprimată a acestuia. Public varianta necomprimată pentru ca începătorii să înțeleagă mai bine ce se întâmplă.
Sunt sigur că acest lucru ar putea fi optimizat sau făcut diferit pentru a funcționa mai repede, dar a funcționat întotdeauna foarte bine pentru ceea ce am nevoie.
Bucură-te.
function getQSP(sName, sURL) {
var theItmToRtn = "";
var theSrchStrg = location.search;
if (sURL) theSrchStrg = sURL;
var sOrig = theSrchStrg;
theSrchStrg = theSrchStrg.toUpperCase();
sName = sName.toUpperCase();
theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&";
var theSrchToken = "&" + sName + "=";
if (theSrchStrg.indexOf(theSrchToken) != -1) {
var theSrchTokenLth = theSrchToken.length;
var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth;
var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart);
theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign));
}
return unescape(theItmToRtn);
}
Răspunsul #27
function GetQueryStringParams(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
Și așa poți folosi această funcție presupunând că URL-ul este
http://example.com/?stringtext=jquery&stringword=jquerybyexample
var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');
Răspunsul #28
Dacă folosești Browserify, poți folosi modulul url din Node.js:
var url = require('url');
url.parse('http://example.com/?bob=123', true).query;
// returns { "bob": "123" }
Lecturi suplimentare: URL Node.js v0.12.2 Manual & Documentație
EDIT: Poți folosi interfața URL, este destul de larg adoptată în aproape toate browserele noi și dacă codul urmează să ruleze pe un browser vechi, poți folosi un polyfill ca acesta. Iată un exemplu de cod despre cum să folosești interfața URL pentru a obține parametrii query (cunoscuți și ca parametrii de căutare)
const url = new URL('http://example.com/?bob=123');
url.searchParams.get('bob');
De asemenea, poți folosi URLSearchParams pentru asta, iată un exemplu de pe MDN despre cum să faci acest lucru cu URLSearchParams:
var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);
//Iterate the search parameters.
for (let p of searchParams) {
console.log(p);
}
searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"
Răspunsul #29
Tocmai am lansat arg.js, un proiect destinat să rezolve această problemă o dată pentru totdeauna. A fost tradițional atât de dificil, dar acum poți să faci:
var name = Arg.get("name");
sau a obține totul:
var params = Arg.all();
și dacă îți pasă de diferența dintre ?query=true și #hash=true, atunci poți folosi metodele Arg.query() și Arg.hash().
Răspuns #30
Problema cu răspunsul de top la acea întrebare este că nu sunt susținuți parametrii plasați după #, dar uneori este necesar să obții și această valoare.
Am modificat răspunsul pentru a permite analizarea unui șir complet de interogare cu semnul hash inclus:
var getQueryStringData = function(name) {
var result = null;
var regexS = "[\\?&#]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec('?' + window.location.href.split('?')[1]);
if (results != null) {
result = decodeURIComponent(results[1].replace(/\+/g, " "));
}
return result;
};