¿Hay alguna forma sin complemento de recuperar la cadena de consulta valores de través de jQuery (o sin)?
¿Si es así, cómo? Si no, ¿hay un complemento que pueda hacerlo?
¿Hay alguna forma sin complemento de recuperar la cadena de consulta valores de través de jQuery (o sin)?
¿Si es así, cómo? Si no, ¿hay un complemento que pueda hacerlo?
Respuestas:
Actualización: Sep-2018
Puede usar URLSearchParams, que es simple y tiene un soporte de navegador decente (pero no completo) .
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
Original
No necesitas jQuery para ese propósito. Puede usar solo JavaScript puro:
function getParameterByName(name, url) {
if (!url) 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, ' '));
}
Uso:
// 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)
Nota: Si un parámetro está presente varias veces ( ?foo=lorem&foo=ipsum
), obtendrá el primer valor ( lorem
). No hay un estándar sobre esto y los usos varían, consulte, por ejemplo, esta pregunta: Posición autorizada de claves de consulta HTTP GET duplicadas .
NOTA: La función distingue entre mayúsculas y minúsculas. Si prefiere el nombre del parámetro que no distingue entre mayúsculas y minúsculas, agregue el modificador 'i' a RegExp
Esta es una actualización basada en las nuevas especificaciones URLSearchParams para lograr el mismo resultado de manera más sucinta. Consulte la respuesta titulada " URLSearchParams " a continuación.
http://www.mysite.com/index.php?x=x1&x=x2&x=x3
El valor del campo x
es ambiguo.
?mykey=0&m.+key=1
, getParameterByName("m.+key")
volvería a llamar en 0
lugar de 1
. Debe escapar de los metacaracteres de la expresión regular name
antes de construir su expresión regular. Y solo necesita llamar .replace()
una vez usando la bandera global y usando "\\$&"
como expresión de reemplazo. Deberías buscar en location.search
lugar de location.href
. Una respuesta con más de 400 votos a favor debería tener en cuenta estos detalles.
Algunas de las soluciones publicadas aquí son ineficientes. Repetir la búsqueda de expresiones regulares cada vez que el script necesita acceder a un parámetro es completamente innecesario, una sola función para dividir los parámetros en un objeto de estilo de matriz asociativa es suficiente. Si no está trabajando con la API de historial de HTML 5, esto solo es necesario una vez por carga de página. Las otras sugerencias aquí también fallan al decodificar la URL correctamente.
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]);
})();
Ejemplo de cadena de consulta:
?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty
Resultado:
urlParams = {
enc: " Hello ",
i: "main",
mode: "front",
sid: "de8d49b78a85a322c4155015fdce22c4",
empty: ""
}
alert(urlParams["mode"]);
// -> "front"
alert("empty" in urlParams);
// -> true
Esto podría mejorarse fácilmente para manejar cadenas de consulta de estilo matriz también. Aquí hay un ejemplo de esto , pero como los parámetros de estilo de matriz no están definidos en RFC 3986 , no contaminaré esta respuesta con el código fuente.Para aquellos interesados en una versión "contaminada", mire la respuesta de Campbeln a continuación .
Además, como se señala en los comentarios, ;
es un delimitador legal para key=value
pares. Se requeriría una expresión regular más complicada para manejar ;
o &
, lo que creo que es innecesario porque es raro que ;
se use y diría que es aún más improbable que se usen ambos. Si necesita soporte en ;
lugar de &
, simplemente cámbielos en la expresión regular.
<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>
Mucho más simple!
Una nueva capacidad sería recuperar parámetros repetidos de la siguiente manera
myparam=1&myparam=2
. No hay una especificación , sin embargo, la mayoría de los enfoques actuales siguen a la generación de una matriz.
myparam = ["1", "2"]
Entonces, este es el enfoque para administrarlo:
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]);
}
}
})();
window.location.hash
propiedad, que está separada de la window.location.search
propiedad. Si el hash cambia, no afecta en absoluto la cadena de consulta.
;
es un delimitador legal para key=value
pares GET . Es raro, pero lleva 5 segundos implementarlo.
?a=b&c=d
es convencional y una recomendación del W3C para formularios web, pero la especificación de URI simplemente define query = *( pchar / "/" / "?" )
.
while(match = search.exec(query))
conwhile((match = search.exec(query)) !== null)
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;
}, {}
)
: {}
};
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('&'));
Con una URL como ?topic=123&name=query+string
, volverá lo siguiente:
qs["topic"]; // 123
qs["name"]; // query string
qs["nothere"]; // undefined (object)
Al romper el código de Google, encontré el método que usan: 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
}
Está ofuscado, pero es comprensible. No funciona porque algunas variables no están definidas.
Comienzan a buscar parámetros en la url desde ?
y también desde el hash #
. Luego, para cada parámetro, se dividen en el signo igual b[f][p]("=")
(que parece indexOf
, usan la posición del carácter para obtener la clave / valor). Al dividirlo, comprueban si el parámetro tiene un valor o no, si lo tiene, almacenan el valor d
, de lo contrario simplemente continúan.
Al final d
se devuelve el objeto , manejando el escape y el +
signo. Este objeto es como el mío, tiene el mismo comportamiento.
Mi método como un complemento 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);
Uso
//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));
Código de preparación: declaración de métodos
var qs = window.GetQueryString(query);
var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];
var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");
Prueba en Firefox 4.0 x86 en Windows Server 2008 R2 / 7 x64
unescape
es una función obsoleta y se reemplaza por decodeURIComponent()
, tenga en cuenta que ninguna de estas funciones decodificará correctamente +
un carácter de espacio. 2. Debe declarar el resultado como un objeto, en lugar de una matriz, ya que JavaScript no tiene matrices asociativas, per se, y la matriz que declara se trata como un objeto asignándole propiedades con nombre de todos modos.
window.location
hace que cualquier problema de rendimiento sea discutible, dado que el cliente que navega a la URL es mucho, mucho más costoso.
Versión mejorada de la respuesta de Artem Barger :
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
Para obtener más información sobre mejoras, consulte: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
.
null
si el parámetro no es seguido de '='. Podría anteponerse if (!RegExp('[?&]'+name+'(&.*)?$').exec(window.location.search)) return false;
para que regrese boolean false
si el parámetro no está allí en absoluto.
new
Usaría el prefijo al crear la expresión regular:var match = new RegExp('...
.replace('\u200E', '')
var results = new RegExp('[\\?&]' + name + '=([^&#/]*)').exec(url);
Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ y Chrome 49+ admiten la API URLSearchParams :
Hay un polyfill URLSearchParams sugerido por Google para las versiones estables de IE.
No está estandarizado por W3C , pero es un estándar de vida de WhatWG .
Puedes usarlo en location
:
let params = new URLSearchParams(location.search);
o
let params = (new URL(location)).searchParams;
O, por supuesto, en cualquier URL:
let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);
También puede obtener parámetros utilizando una .searchParams
propiedad abreviada en el objeto URL, como esta:
let params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2"
Uno lee / parámetros establecidos a través de la get(KEY)
, set(KEY, VALUE)
, append(KEY, VALUE)
API. También puedes iterar sobre todos los valoresfor (let p of params) {}
.
Una implementación de referencia y una página de muestra están disponibles para auditoría y pruebas.
.get
lugar de solo.
slice(1)
en .search
, puede utilizar directamente. URLSearchParams puede manejar los principales ?
.
URLSearchParams
no es bueno porque no devuelve los valores reales de los parámetros de una URL.
new URL('https://example.com?foo=1&bar=2')
no funciona para la url de Androidfile:///android_asset/...
Solo otra recomendación. El complemento Purl permite recuperar todas las partes de la URL, incluido el ancla, el host, etc.
Se puede usar con o sin jQuery.
El uso es muy simple y genial:
var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'
Sin embargo, a partir del 11 de noviembre de 2014, Purl ya no se mantiene y el autor recomienda usar URI.js en su lugar. El complemento jQuery es diferente porque se enfoca en elementos: para usar con cadenas, solo use URI
directamente, con o sin jQuery. Un código similar se vería como tal, documentos más completos aquí :
var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'
Una solución rápida y completa , que maneja claves multivalor y caracteres codificados .
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)})
Multi-forrado:
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
})
¿Qué es todo este código ...
"fusión nula" , evaluación de cortocircuito
ES6 Destrucción de asignaciones , funciones de flecha , cadenas de plantillas
"?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"
Para acceder a diferentes partes de una URL use location.(search|hash)
var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined
Verificación simple de teclas (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]]})
qd.key[index]
oqd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]
Úselo decodeURIComponent()
para la segunda o ambas divisiones.
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]})
Ejemplo:
"?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"]
* !!! Tenga en cuenta que eso decodeURIComponent(undefined)
devuelve una cadena "undefined"
. La solución radica en un uso simple de &&
, que garantiza que decodeURIComponent()
no se invoque en valores indefinidos. (Consulte la "solución completa" en la parte superior).
v = v && decodeURIComponent(v);
Si la cadena de consulta está vacía ( location.search == ""
), el resultado es algo engañoso qd == {"": undefined}
. Se sugiere verificar la cadena de consulta antes de iniciar la función de análisis likeso:
if (location.search) location.search.substr(1).split("&").forEach(...)
array.forEach()
inyectando cierto código al comienzo de su script. ver Polyfill developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
var qd = {}; location.search.substr(1).split("&").forEach( function(item) { var s = item.split("="), k = s[0], v; if(s.length>1) v = decodeURIComponent(s[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v] })
Roshambo en snipplr.com tiene un script simple para lograr esto descrito en Obtener parámetros de URL con jQuery | Mejora . Con su script, también puede extraer fácilmente los parámetros que desee.
Aquí está la esencia:
$.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;
}
Luego solo obtenga sus parámetros de la cadena de consulta.
Entonces, si la cadena URL / consulta era xyz.com/index.html?lang=de
.
Solo llama var langval = $.urlParam('lang');
, y lo tienes.
UZBEKJON también tiene una gran publicación de blog sobre esto, obtenga parámetros y valores de URL con jQuery .
0
? Claro, podría usar un estricto control de igualdad, pero ¿no debería ser así null
?
Si está usando jQuery, puede usar una biblioteca, como jQuery BBQ: Botón de retroceso y Biblioteca de consultas .
... jQuery BBQ proporciona un
.deparam()
método completo , junto con la gestión de estado hash y los métodos de utilidad de análisis / fusión de cadenas de fragmentos / consultas.
Editar: Agregar Deparam Ejemplo:
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();
}
};
Si solo quieres usar JavaScript simple, puedes usar ...
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;
}
})();
Debido a la nueva API Historia de HTML y, específicamente, history.pushState()
y history.replaceState()
, la URL puede cambiar lo que invalida la memoria caché de parámetros y sus valores.
Esta versión actualizará su caché interna de parámetros cada vez que cambie el historial.
Solo usa dos divisiones :
function get(n) {
var half = location.search.split(n + '=')[1];
return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}
Estaba leyendo todas las respuestas anteriores y más completas. Pero creo que ese es el método más simple y rápido. Puede consultar este punto de referencia jsPerf
Para resolver el problema en el comentario de Rup, agregue una división condicional cambiando la primera línea a las dos siguientes. Pero la precisión absoluta significa que ahora es más lento que regexp (ver 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;
}
Entonces, si sabe que no se encontrará con el contra-caso de Rup, esto gana. De lo contrario, regexp.
O si tiene el control de la cadena de consulta y puede garantizar que un valor que está tratando de obtener nunca contendrá caracteres codificados con URL (sería una mala idea tener estos valores): puede usar la siguiente versión ligeramente más simplificada y legible de la primera opción:
function getQueryStringValueByName(name) { var queryStringFromStartOfValue = location.search.split(name + '=')[1]; return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;
get('value')
en http://the-url?oldvalue=1&value=2
.
half
es verdadero, esto devuelve nulo para un parámetro vacío como ?param=
. Debería devolver la cadena vacía en este caso, y la comprobación lo half !== undefined
resuelve.
function get(param){return decodeURIComponent((location.search.split(param+'=')[1]||'').split('&')[0])}
return half !== undefined ? decodeURIComponent(half[1].split('&')[0]) : null;
que funcione
Aquí está mi intento de convertir la excelente solución de Andy E en un complemento jQuery completo:
;(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);
La sintaxis es:
var someVar = $.getQueryString('myParam');
¡Lo mejor de ambos mundos!
Si está haciendo más manipulación de URL que simplemente analizar la cadena de consulta, puede encontrar útil URI.js. Es una biblioteca para manipular URL, y viene con todas las campanas y silbatos. (Perdón por la publicidad propia aquí)
para convertir su cadena de consulta en un mapa:
var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data == {
"foo": ["bar", "world"],
"bar": "baz"
}
(URI.js también "correcciones" malas cadenas de consulta gusta ?&foo&&bar=baz&
a ?foo&bar=baz
)
Me gusta la solución de Ryan Phelan . ¿Pero no veo ningún punto de extender jQuery para eso? No se utiliza la funcionalidad jQuery.
Por otro lado, me gusta la función incorporada en Google Chrome: window.location.getParameter.
Entonces, ¿por qué no usar esto? De acuerdo, otros navegadores no tienen. Entonces, creemos esta función si no existe:
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];
};
}
Esta función es más o menos de Ryan Phelan, pero está envuelta de manera diferente: nombre claro y sin dependencias de otras bibliotecas javascript. Más sobre esta función en mi blog .
Aquí hay una forma rápida de obtener un objeto similar a la matriz 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;
}
Uso:
var $_GET = get_query();
Para la cadena de consulta, x=5&y&z=hello&x=6
esto devuelve el objeto:
{
x: "6",
y: undefined,
z: "hello"
}
(function($) { $.extend({ get_query: function (name) { var url = location.href; 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]] = qs[i][1]; } return result; } }); })(jQuery);
y úselo así:$.get_query()
location.href
tendría que ser reemplazado por location.search
.
Mantenlo simple en código JavaScript simple:
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];
}
Llámalo desde cualquier lugar del código JavaScript:
var result = qs('someKey');
window.location.search
.
Estas son todas excelentes respuestas, pero necesitaba algo un poco más robusto, y pensé que a todos les gustaría tener lo que creé.
Es un método de biblioteca simple que hace disección y manipulación de parámetros de URL. El método estático tiene los siguientes submétodos que se pueden invocar en la URL del asunto:
Ejemplo:
URLParser(url).getParam('myparam1')
var url = "http://www.test.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>');
Código de golf:
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]);
}
¡Muéstralo!
for (i in a) {
document.write(i + ":" + a[i] + "<br/>");
};
En mi Mac: test.htm?i=can&has=cheezburger
muestra
0:can
1:cheezburger
i:can
has:cheezburger
Uso muchas expresiones regulares, pero no para eso.
Me parece más fácil y más eficiente leer la cadena de consulta una vez en mi aplicación, y construir un objeto a partir de todos los pares clave / valor como:
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;
}();
Para una URL como http://domain.com?param1=val1¶m2=val2
usted puede obtener su valor más adelante en su código como search.param1
y search.param2
.
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
El método jQuery de Roshambo no se ocupaba de decodificar la URL
http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/
Acabo de agregar esa capacidad también al agregar en la declaración de devolución
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
Ahora puedes encontrar la esencia actualizada:
$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
}
Me gusta este (tomado de 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;
}
Funciona muy bien para mi.
Aquí está mi edición de esta excelente respuesta , con la capacidad adicional de analizar cadenas de consulta con claves sin valores.
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('&'));
¡IMPORTANTE! El parámetro para esa función en la última línea es diferente. Es solo un ejemplo de cómo se le puede pasar una URL arbitraria. Puede usar la última línea de la respuesta de Bruno para analizar la URL actual.
Entonces, ¿qué cambió exactamente? Con url los http://sb.com/reg/step1?param=
resultados serán los mismos. Pero con url, http://sb.com/reg/step1?param
la solución de Bruno devuelve un objeto sin claves, mientras que la mía devuelve un objeto con clave param
y undefined
valor.
Necesitaba un objeto de la cadena de consulta y odio mucho código. Puede que no sea el más robusto del universo, pero solo son unas pocas líneas de código.
var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
q[i.split('=')[0]]=i.split('=')[1];
});
Se this.htm?hello=world&foo=bar
creará una URL como :
{hello:'world', foo:'bar'}
decodeURIComponent
el valor a medida que lo almacena, y posiblemente también la clave, pero es menos probable que use cadenas impares en eso.
?a&b&c
pero esto es realmente muy legible (y por cierto similar a mi primera idea). También split
es redundante, pero tengo más rendimiento para freír que dividir una cadena de 10 caracteres dos veces.
location.search.substr(1)
lugar de location.href.split('?')[1]
evitar recoger hash ( #anchor
) junto con el último parámetro de consulta.
location.search
!
Aquí hay una versión extendida de la versión vinculada "Manejar cadenas de consulta de estilo de matriz" de Andy E. Corregido error ( ?key=1&key[]=2&key[]=3
; 1
se pierde y se sustituye por [2,3]
), hecho algunas mejoras en el rendimiento menor (re-decodificación de los valores, recalculando "[" posición, etc.) y se añadió una serie de mejoras (funcionalizado, el soporte para ?key=1&key=2
, el apoyo a ;
delimitadores) . Dejé las variables molestamente cortas, pero agregué comentarios en abundancia para que fueran legibles (oh, y reutilicév
dentro de las funciones locales, perdón si eso es confuso;).
Manejará la siguiente cadena de consulta ...
? test = Hello & person = neek & person [] = jeff & person [] = jim & person [extra] = john & test3 & nocache = 1398914891264
... convirtiéndolo en un objeto que se parece a ...
{
"test": "Hello",
"person": {
"0": "neek",
"1": "jeff",
"2": "jim",
"length": 3,
"extra": "john"
},
"test3": "",
"nocache": "1398914891264"
}
Como puede ver arriba, esta versión maneja algunas medidas de arreglos "malformados", es decir, person=neek&person[]=jeff&person[]=jim
o person=neek&person=jeff&person=jim
como la clave es identificable y válida (al menos en dotNet's NameValueCollection.Add ):
Si la clave especificada ya existe en la instancia de NameValueCollection de destino, el valor especificado se agrega a la lista existente de valores separados por comas en la forma "valor1, valor2, valor3".
Parece que el jurado está un poco interesado en las teclas repetidas, ya que no hay especificaciones. En este caso, se almacenan varias claves como una matriz (falsa). Pero tenga en cuenta que no proceso valores basados en comas en matrices.
El código:
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;
};
q = decodeURIComponent(window.location.search.substring(1)),
ayuda a hacer eso también.
Esta es una función que creé hace un tiempo y estoy bastante contento. No distingue entre mayúsculas y minúsculas, lo cual es útil. Además, si el QS solicitado no existe, solo devuelve una cadena vacía.
Yo uso una versión comprimida de esto. Estoy publicando sin comprimir para los tipos novatos para explicar mejor lo que está sucediendo.
Estoy seguro de que esto podría optimizarse o hacerse de manera diferente para trabajar más rápido, pero siempre funcionó muy bien para lo que necesito.
Disfrutar.
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);
}
Acabamos de lanzar arg.js , un proyecto destinado a resolver este problema de una vez por todas. Tradicionalmente ha sido muy difícil, pero ahora puedes hacer:
var name = Arg.get("name");
o conseguir todo el lote:
var params = Arg.all();
y si te importa la diferencia entre ?query=true
y #hash=true
puedes usar los métodos Arg.query()
y Arg.hash()
.
El problema con la respuesta principal a esa pregunta es que no se admiten parámetros colocados después de #, pero a veces también es necesario para obtener este valor.
Modifiqué la respuesta para permitirle analizar una cadena de consulta completa con un signo hash también:
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;
};
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];
}
}
}
Y así es como puede usar esta función suponiendo que la URL es
http://dummy.com/?stringtext=jquery&stringword=jquerybyexample
var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');
?stringtext&stringword=foo
.
Si está usando Browserify, puede usar el url
módulo de Node.js :
var url = require('url');
url.parse('http://example.com/?bob=123', true).query;
// returns { "bob": "123" }
Lecturas adicionales: URL Node.js v0.12.2 Manual y documentación
EDITAR: puede usar la interfaz URL , está bastante ampliamente adoptada en casi todos los navegadores nuevos y si el código se va a ejecutar en un navegador antiguo, puede usar un polyfill como este . Aquí hay un ejemplo de código sobre cómo usar la interfaz URL para obtener parámetros de consulta (también conocidos como parámetros de búsqueda)
const url = new URL('http://example.com/?bob=123');
url.searchParams.get('bob');
También puede usar URLSearchParams para ello, aquí hay un ejemplo de MDN para hacerlo con 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"
url
API del módulo está aquí: nodejs.org/api/url.html