ultimo - ¿Cómo puedo obtener valores de cadena de consulta en JavaScript?

obtener parametros url javascript

Question

¿Existe una forma sin complementos de recuperar valores de cadena de consulta a través de jQuery (o sin)?

¿Si es así, cómo? Si no, ¿hay un plugin que pueda hacerlo?

Answer 1

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;
}, {}
)
: {}
};

Sin 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(''&''));

Con una URL como ?topic=123&name=query+string , aparecerá lo siguiente:

qs["topic"]; // 123
qs["name"]; // query string
qs["nothere"]; // undefined (object)

Método de Google

Al rasgar 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.

¿Empiezan a buscar parámetros en la url de ? y también del hash # . Luego, para cada parámetro, se dividen en el signo igual b[f][p]("=") (que se parece a indexOf , usan la posición del personaje para obtener la clave / valor). Al dividirlo, comprueban si el parámetro tiene un valor o no, si lo tiene, entonces almacenan el valor de d , de lo contrario simplemente continúan.

Al final, se devuelve el objeto d , manejando el escape y el signo + . Este objeto es igual que el mío, tiene el mismo comportamiento.

Mi método como 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);

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&param2=val"
//Update the url/querystring in the browser''s location bar with the $.QueryString object
history.replaceState({}, '''', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '''', "?" + $.param($.QueryString));

Prueba de rendimiento (método de división contra el método de jsPerf regulares) ( jsPerf )

Código de preparación: declaración de métodos.

Código de prueba de división

var qs = window.GetQueryString(query);
var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];

Código de prueba Regex

var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");

Pruebas en Firefox 4.0 x86 en Windows Server 2008 R2 / 7 x64

• Método de división : 144,780 ± 2.17% más rápido
• Método Regex : 13,891 ± 0,85% | 90% más lento

Answer 2

URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ y Chrome 49+ admiten la API URLSearchParams :

• Anuncio de cromo y detalles.
• Anuncio de Ópera y detalles.
• Anuncio de Firefox y detalles.

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 por WhatWG .

Puede usarlo en la ubicación, pero necesita quitar el ? signo de interrogación (por ejemplo, con .slice(1) ):

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 usando una propiedad abreviada .searchParams en el objeto de URL, como esto:

let params = new URL(''https://example.com?foo=1&bar=2'').searchParams;
params.get(''foo''); // "1"
params.get(''bar''); // "2"

Usted lee / configura los parámetros a través de la API de get(KEY) , set(KEY, VALUE) , append(KEY, VALUE) . También puedes iterar sobre todos los valores for (let p of params) {} .

Una implementación de referencia y una página de muestra están disponibles para auditorías y pruebas.

Answer 3

tl; dr

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)}) Multilínea:

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 ...
"null-coalescing" , evaluación de cortocircuito
ES6 Destrucción de tareas , funciones de flecha , cadenas de plantillas

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]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]
> qd.a[1] // "5"
> qd["a"][1] // "5"

Leer más ... sobre la solución JavaScript de vainilla.

Para acceder a diferentes partes de una URL use la location.(search|hash)

La solución más fácil (ficticia)

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})

• Maneja las teclas vacías correctamente.
• Anula múltiples teclas con el último valor encontrado.

"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

Llaves multivalor

Verificación de llave simple (item in dict) ? dict.item.push(val) : dict.item = [val] (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]]})

• Ahora devuelve matrices en su lugar.
• Acceda a los valores mediante qd.key[index] o qd[key][index]

> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

¿Caracteres codificados?

Use decodeURIComponent() para la segunda división o ambas .

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"]

De los comentarios

* !!! Tenga en cuenta que decodeURIComponent(undefined) devuelve la cadena "undefined" . La solución se decodeURIComponent() en un uso simple de && , que garantiza que no se decodeURIComponent() en valores no definidos. (Vea 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 un tanto 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(...)

Answer 4

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, basta con una sola función para dividir los parámetros en un objeto de estilo de matriz asociativa. 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í tampoco pueden 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 de matriz también. Un ejemplo de esto está here , 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 .

Asimismo, como se señala en los comentarios ; Es un delimitador legal para pares key=value . Requeriría un regex más complicado de manejar ; o & , lo que creo que es innecesario porque es raro que ; Se usa y diría que es aún más improbable que se usen ambos. Si necesita apoyo ; en lugar de & , simplemente intercambiarlos en la expresión regular.

Si está utilizando un lenguaje de preprocesamiento del lado del servidor, es posible que desee usar sus funciones JSON nativas para hacer el trabajo pesado por usted. Por ejemplo, en PHP puedes escribir:

<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

Mucho más simple!

Answer 5

Aquí está mi intento de convertir la excelente solución de Andy E en un plugin 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!

Answer 6

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"
}

Answer 7

Estas son todas respuestas geniales, pero necesitaba algo un poco más sólido y pensé que a todos les gustaría tener lo que creé.

Es un método de biblioteca simple que hace la disección y manipulación de los parámetros de URL. El método estático tiene los siguientes métodos secundarios que se pueden llamar en la URL del asunto:

• getHost
• getPath
• getHash
• sethash
• getParams
• getQuery
• setParam
• getParam
• hasParam
• removeParam

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>'');

Answer 8

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 en el código JavaScript:

var result = qs(''someKey'');

Answer 9

Me gusta la solución de Ryan Phelan . ¿Pero no veo ningún punto de extender jQuery para eso? No hay uso de 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. Así que vamos a crear 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 de JavaScript. Más sobre esta función en mi blog .

Answer 10

Roshambo en snipplr.com tiene un script simple para lograr esto descrito en Obtener parámetros de URL con jQuery | Mejorado Con su script, también puedes extraer fácilmente los parámetros que deseas.

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 solo obtén tus parámetros de la cadena de consulta.

Entonces, si la URL / cadena de consulta era xyz.com/index.html?lang=de .

Simplemente llame a var langval = $.urlParam(''lang''); , y lo tienes

UZBEKJON también tiene una excelente publicación en el blog, Obtener parámetros y valores de URL con jQuery .

Answer 11

Sólo otra recomendación. El plugin Purl permite recuperar todas las partes de la URL, incluidos el ancla, el host, etc.

Se puede utilizar con o sin jQuery.

El uso es muy simple y fresco:

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 URI.js 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 here :

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''

Answer 12

Si está haciendo más manipulación de URL que simplemente analizando la cadena de consulta, puede encontrar URI.js útil. Es una biblioteca para manipular URLs, y viene con todas las campanas y silbidos. (Lo siento por auto-publicidad 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 "corrige" las cadenas de consulta incorrectas como ?&foo&&bar=baz& to ?foo&bar=baz )

Answer 13

Si está usando jQuery, puede usar una biblioteca, como jQuery BBQ: Back Button & Query Library .

... jQuery BBQ proporciona un .deparam() completo .deparam() , junto con la administración del estado hash y los métodos de utilidad de fusión y análisis de fragmentos / cadenas de consulta.

Editar: Agregando 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 plano, 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 historial HTML 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 cambie el historial.

Answer 14

Solo usa dos splits :

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. Puedes consultar en este jsPerf benchmark

Para resolver el problema en el comentario de Rup, agregue una división condicional cambiando la primera línea a las dos a continuación. 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 sabes que no te encontrarás 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á ningún código URL codificado (sería una mala idea tener estos en un valor) - puede usar la siguiente versión un poco más simplificada y legible de la 1ª opción:

 function getQueryStringValueByName(name) {
var queryStringFromStartOfValue = location.search.split(name + ''='')[1];
return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split(''&'')[0] : null;

Answer 15

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, visite: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/

Answer 16

Actualización: Sep-2018

Puede usar URLSearchParams, que es simple y tiene un buen soporte de navegador .

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get(''myParam'');

Orignal

No necesitas jQuery para ese propósito. Puedes usar solo algo 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 hay un estándar sobre esto y los usos varían, vea por ejemplo esta pregunta: Posición autorizada de claves de consulta GET de HTTP duplicadas .
NOTA: La función distingue entre mayúsculas y minúsculas. Si prefiere un nombre de parámetro que no distinga mayúsculas y minúsculas, agregue el modificador ''i'' a RegExp

Esta es una actualización basada en las nuevas especificaciones de URLSearchParams para lograr el mismo resultado de manera más sucinta. Vea la respuesta titulada " URLSearchParams " a continuación.

Answer 17

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]);
}

Mostrarlo!

for (i in a) {
document.write(i + ":" + a[i] + "<br/>");
};

En mi Mac: test.htm?i=can&has=cheezburgermuestra

0:can
1:cheezburger
i:can
has:cheezburger

Answer 18

El método jQuery de Roshambo no se ocupaba de decodificar la URL

http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/

Acaba de agregar esa capacidad también al agregar la declaración de retorno

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;
}

Answer 19

El problema con la respuesta principal a esa pregunta es que no se admiten los parámetros colocados después de #, pero a veces también se necesita para obtener este valor.

También modifiqué la respuesta para permitirle analizar una cadena de consulta completa con un signo hash:

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;
};

Answer 20

Uso mucho las 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 crear 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&param2=val2usted puede obtener su valor más adelante en su código como search.param1y search.param2.

Answer 21

Acabamos de lanzar arg.js , un proyecto destinado a resolver este problema de una vez por todas. Tradicionalmente ha sido tan difícil pero ahora puedes hacer:

var name = Arg.get("name");

o obteniendo todo el lote:

var params = Arg.all();

y si te importa la diferencia entre ?query=truey #hash=trueluego puedes usar los métodos Arg.query()y Arg.hash().

Answer 22

Aquí está mi edición de esta excelente respuesta , con capacidad adicional para 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 puede pasarle 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?paramla solución de Bruno devuelve un objeto sin claves, mientras que el mío devuelve un objeto con clave paramy undefinedvalor.

Answer 23

Aquí hay una versión extendida de la versión "Manejar cadenas de consulta de estilo de matriz" de Andy E. Se corrigió un error ( ?key=1&key[]=2&key[]=3; 1se pierde y se reemplaza con [2,3]), se realizaron algunas mejoras menores de rendimiento (recodificación de valores, recálculo de la posición "[", etc.) y se agregaron varias mejoras (funcionalizado, soporte para ?key=1&key=2, soporte para ;delimitadores) . Dejé las variables muy brevemente cortas, pero agregué comentarios en abundancia para hacerlas legibles (ah, y reutilizé vdentro de las funciones locales, perdón si eso es confuso;).

Se 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[]=jimo person=neek&person=jeff&person=jimcomo la clave es identificable y válida (al menos en NameValueCollection.Add de NameValueCollection.Add ):

Si la clave especificada ya existe en la instancia de NameValueCollection de destino, el valor especificado se agrega a la lista de valores separados por comas existentes en la forma "valor1, valor2, valor3".

Parece que el jurado está algo fuera de las claves repetidas ya que no hay especificaciones. En este caso, varias claves se almacenan como una matriz (falsa). Pero tenga en cuenta que no proceso valores basados ​​en comas en arreglos.

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;
};

Answer 24

Desde el MDN :

function loadPageVar (sVar) {
  return unescape(window.location.search.replace(new RegExp("^(?:.*[&//?]" + escape(sVar).replace(/[/./+/*]/g, "//$&") + "(?://=([^&]*))?)?.*$", "i"), "$1"));
}
alert(loadPageVar("name"));

Answer 25

Esta es una función que creé hace un tiempo y estoy muy contento con eso. No distingue entre mayúsculas y minúsculas, lo que es útil. Además, si el QS solicitado no existe, simplemente 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á pasando.

Estoy seguro de que esto podría optimizarse o realizarse de manera diferente para trabajar más rápido, pero siempre ha funcionado 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);
}

Answer 26

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 mí.

Answer 27

Necesitaba un objeto de la cadena de consulta, y odio muchos códigos. Puede que no sea el más robusto del universo, pero son solo unas pocas líneas de código.

var q = {};
location.href.split(''?'')[1].split(''&'').forEach(function(i){
q[i.split(''='')[0]]=i.split(''='')[1];
});

Una URL como this.htm?hello=world&foo=barcreará:

{hello:''world'', foo:''bar''}

Answer 28

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

Answer 29

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 puedes usar esta función asumiendo que la URL es

http://dummy.com/?stringtext=jquery&stringword=jquerybyexample

var tech = GetQueryStringParams(''stringtext'');
var blog = GetQueryStringParams(''stringword'');

Answer 30

http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash

• Clave regular / valor par ( ?param=value)
• Teclas sin valor ( ?param: sin signo o valor igual)
• Teclas con valor vacío ( ?param=: signo igual, pero ningún valor a la derecha del signo igual)
• Teclas repetidas ( ?param=1&param=2)
• Elimina las teclas vacías ( ?&&: sin clave o valor)

Código:

• var queryString = window.location.search || '''';
  var keyValPairs = [];
  var params = {};
  queryString = queryString.substr(1);
  if (queryString.length)
  {
  keyValPairs = queryString.split(''&'');
  for (pairNum in keyValPairs)
  {
  var key = keyValPairs[pairNum].split(''='')[0];
  if (!key.length) continue;
  if (typeof params[key] === ''undefined'')
  params[key] = [];
  params[key].push(keyValPairs[pairNum].split(''='')[1]);
  }
  }

Como llamar:

• params[''key'']; // returns an array of values (1..n)

Salida:

• key ["value"]
  keyemptyvalue [""]
  keynovalue [undefined, "nowhasvalue"]