¿Existe una forma de recuperar los valores de query string sin necesidad de plugins a través de jQuery (o sin ellos)?
Si es así, ¿cómo? Si no, ¿hay algún plugin que pueda hacerlo?
Actualización: Sep-2018
Puedes usar URLSearchParams que es simple y tiene soporte decente (pero no completo) para el navegador.
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
Original
Usted don't necesita jQuery para ese propósito. Puedes usar sólo un poco de 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 existe ninguna norma al respecto y los usos varían, véase por ejemplo esta pregunta: Posición autorizada de las claves de consulta HTTP GET duplicadas.
NOTA: La función distingue entre mayúsculas y minúsculas. Si prefiere que el nombre del parámetro no distinga entre mayúsculas y minúsculas, añada el modificador 'i' a RegExp
Esta es una actualización basada en las nuevas especificaciones de URLSearchParams para conseguir el mismo resultado de forma más sucinta. Véase la respuesta titulada "URLSearchParams" a continuación.
Roshambo en snipplr.com tiene un sencillo script para lograr esto descrito en Get URL Parameters with jQuery | Improved. Con su script también consigues fácilmente sacar sólo los parámetros que quieres.
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;
}
Entonces, sólo tienes que obtener los parámetros de la cadena de consulta.
Así que si la cadena de URL/consulta era xyz.com/index.html?lang=de
.
Sólo tienes que llamar var langval = $.urlParam('lang');
, y ya lo tienes.
UZBEKJON tiene una gran entrada de blog sobre esto también, Obtener parámetros de URL & valores con jQuery.
Si utiliza jQuery, puede utilizar una biblioteca, como jQuery BBQ: Back Button & Query Library.
...jQuery BBQ proporciona un método completo .deparam()
, junto con la gestión del estado del hash, y los métodos de utilidad de análisis y fusión de fragmentos/cadenas de consulta.
Editar: Añadiendo el ejemplo de 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();
}
};
Si quieres usar simplemente JavaScript, 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 de HTML History y específicamente history.pushState()
y history.replaceState()
, la URL puede cambiar, lo que invalidará la caché de parámetros y sus valores.
Esta versión actualizará su caché interno de parámetros cada vez que el historial cambie.