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


2697

¿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?


Uso el complemento getUrlParam descrito en jQuery-Plugin - getUrlParam (versión 2) .
coma

69
Una solución simple de JavaScript sin RegEx: css-tricks.com/snippets/javascript/get-url-variables
Lorenzo Polidori

66
Aunque la solución principal a la pregunta merece su popularidad debido a su excelente observación de que jQuery no es necesaria, su método de crear nuevas expresiones regulares y volver a analizar la cadena de consulta para cada parámetro deseado es extremadamente ineficiente. Han existido soluciones mucho más eficientes (y versátiles) durante mucho tiempo, por ejemplo, en este artículo reimpreso aquí: htmlgoodies.com/beyond/javascript/article.php/11877_3755006_3/…
Joseph Myers

1
posible duplicado de la cadena de consulta

44
Joseph, ¿la "excelente observación de que jQuery no es necesaria"? Por supuesto que no es necesario. Todo lo que hace jQuery, lo hace usando JavaScript. La gente no usa jQuery porque hace cosas que JavaScript no puede hacer. El punto de jQuery es la conveniencia.
Vladimir Kornea

Respuestas:


8331

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.


131
¿Cómo maneja esta función? http://www.mysite.com/index.php?x=x1&x=x2&x=x3El valor del campo xes ambiguo.
dpp

94
esto tampoco maneja claves de valores múltiples , que también son perfectamente legales.
hurrymaplelad

17
¿Por qué usarías una expresión regular para esto?
Ry-

28
Para una cadena de consulta de ?mykey=0&m.+key=1, getParameterByName("m.+key")volvería a llamar en 0lugar de 1. Debe escapar de los metacaracteres de la expresión regular nameantes 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.searchlugar de location.href. Una respuesta con más de 400 votos a favor debería tener en cuenta estos detalles.
gilly3

77
No necesita jQuery para ese o cualquier otro propósito. Simplemente no lo NECESITAS.
gztomas

1708

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=valuepares. 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.


Si está utilizando un lenguaje de preprocesamiento del lado del servidor, es posible que desee utilizar 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!

ACTUALIZADO

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

11
si está haciendo una aplicación muy ajax, entonces puede estar usando el hash (#) para "habilitar el botón de retroceso" ... en ese caso, la cadena de consulta cambiaría todo el tiempo (vea cómo lo hace Facebook). .. aunque estas soluciones ignoran las cosas que vienen después de los # anways ...
Nick Franceschina

100
@Nick: Cualquier cosa después del hash reside en la window.location.hashpropiedad, que está separada de la window.location.searchpropiedad. Si el hash cambia, no afecta en absoluto la cadena de consulta.
Andy E

27
No olvide que ;es un delimitador legal para key=valuepares GET . Es raro, pero lleva 5 segundos implementarlo.
alex

44
Para ser justos, RFC3986 no define un formato específico para la cadena de consulta. ?a=b&c=des convencional y una recomendación del W3C para formularios web, pero la especificación de URI simplemente define query = *( pchar / "/" / "?" ).
Matthew Gilliard

21
Para aquellos de nosotros utilizando una configuración bastante estricta de JSHint intercambiar los while(match = search.exec(query))conwhile((match = search.exec(query)) !== null)
craigts

1283

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, volverá lo siguiente:

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

Método de Google

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 dse 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&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 dividido contra método regex) ( jsPerf )

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

Código de prueba dividido

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

Prueba 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

1
Este también es un buen enfoque, dividir cadenas en lugar de usar expresiones regulares. Sin embargo, hay algunas cosas que vale la pena señalar :-) 1. unescapees 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.
Andy E

55
¿Curioso por qué haría de este un complemento jQuery cuando no tiene ningún código específico de jQuery?
zachleat

63
@zachleat si no tiene un marco, sus funciones solo se distribuirán en su código. Si extiende jQuery tendrá un alcance para sus funciones, no estará flotando en algún lugar de su código. Creo que esa es la única razón.
BrunoLM

66
Aquí está la versión jQuery ajustada para pasar JSLint (al menos el objetivo semi-móvil de JSLint.com el 15/06/2011). Principalmente solo moviendo cosas para apaciguar a The Crockford.
patridge

3
Como bromeó @BenjaminGruenbaum, tampoco entiendo el punto de comparar el rendimiento del análisis de URL. Si esto se convirtió en un módulo de JavaScript isomorfo que podría llamarse desde Node para, por ejemplo, analizar registros, entonces sí. Pero usarlo para extraer parámetros de URL window.locationhace que cualquier problema de rendimiento sea discutible, dado que el cliente que navega a la URL es mucho, mucho más costoso.
Dan Dascalescu

659

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/


23
Si quisieras acortarlo un poco más, podrías eliminar el condicional ternario y reemplazarlo con un poco de cortocircuito en esa última línea - return match && decodeURIComponent(match[1].replace(/\+/g, ' '));.
Andy E

Regresa nullsi el parámetro no es seguido de '='. Podría anteponerse if (!RegExp('[?&]'+name+'(&.*)?$').exec(window.location.search)) return false;para que regrese boolean falsesi el parámetro no está allí en absoluto.
commonpike

99
newUsaría el prefijo al crear la expresión regular:var match = new RegExp('...
Patrick Berkeley

2
Error de IE11: IE decide anteponer el valor devuelto con el carácter ascii 8206 (hexadecimal: 200E - el "carácter de izquierda a derecha"). ¡Perdí más de 6 horas encontrando esto! ventilación terapéutica ... para arreglar, virar al final de la última línea:.replace('\u200E', '')
JayRO-GreyBeard

En Chrome en una Mac al menos (tal vez también en otros navegadores), el último valor era un '/' agregado. Así que modifiqué la expresión regular para ignorarla. var results = new RegExp('[\\?&]' + name + '=([^&#/]*)').exec(url);
CaseyB

594

URLSearchParams

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 .searchParamspropiedad 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.


Esos dos votantes negativos probablemente se perdieron (como acabo de hacer) el hecho de que tienes que usar en .getlugar de solo.
Nakilon

20
En realidad no es necesario slice(1)en .search, puede utilizar directamente. URLSearchParams puede manejar los principales ?.
Jason C

URLSearchParamsno es bueno porque no devuelve los valores reales de los parámetros de una URL.
Melab

Esto new URL('https://example.com?foo=1&bar=2') no funciona para la url de Androidfile:///android_asset/...
shah

@Melab todavía es bueno porque proporciona una API simple para todas las expresiones regulares extrañas en las otras respuestas aquí. Pero también me distingue de que id no hace window.location.search por defecto y que no hay forma de actualizar la url actual incluida.
Damon

400

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

77
Al momento de escribir, purl ya no se mantiene y el responsable
Dan Pantry

238

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

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 Vanilla.

Para acceder a diferentes partes de una URL use 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 llaves vacías correctamente.
  • Invalida las teclas múltiples 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

Claves de valores múltiples

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]]})
  • Ahora devuelve matrices en su lugar.
  • Acceda a valores por qd.key[index]oqd[key][index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

Personajes codificados?

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



De comentarios

* !!! 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(...)

1
Agradable. Lo único que cambiaría es que si no hay más de un valor para una clave, no hay necesidad de que sea una matriz. Solo use la matriz si hay más de un valor por clave.
Pavel Nikolov

2
@PavelNikolov Creo que introduciría dificultades para obtener a veces una matriz y, a veces, un valor. Tendría que verificarlo primero, ahora solo verificará la longitud, porque de todos modos usará ciclos para recuperar esos valores. También esta fue la solución más fácil, pero funcional, aquí.
Qwerty

@katsh Sí, de hecho, funciona en> = IE9, sin embargo, puede enseñarle a su procesador javascript array.forEach()inyectando cierto código al comienzo de su script. ver Polyfill developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Qwerty

1
Se aplanó un poco para facilitar la lectura, se convirtió en una función y se reutilizó la llamada dividida: function parseQueryString () {var qd = {}; location.search.substr (1) .split ("&"). forEach (function (item) {var parts = item.split ("="); var k = partes [0]; var v = decodeURIComponent (partes [ 1]); (k en qd)? Qd [k] .push (v): qd [k] = [v,]}); volver qd; }
Casey

1
decodeDocumentURI (undefined) devuelve "undefined" en lugar de undefined. Un parche funcional pero no muy elegante: 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] })
loop

218

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 .


13
con jQuery parece significar espacio de nombres de la función para el objeto jQuery. Además, ¿por qué el valor no es válido 0? Claro, podría usar un estricto control de igualdad, pero ¿no debería ser así null?
alex

Convenido. Funciona igual que una referencia de variable de JavaScript normal de esa manera (excepto que tal vez devolver indefinido sería más preciso).
Isócrono

'nombre' no se escapa correctamente, solo se inyecta directamente en el RegExp. Esto falla Como otros han dicho, es increíble que estas respuestas estén reinventando la rueda y obteniendo tantos votos, cuando esto debería implementarse en una biblioteca bien probada.
Triynko

167

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.


100

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;

77
¡Muy aseado! Sin embargo, no funcionará si tiene un valor anterior con un nombre de clave que termina con el que desea, por ejemplo, get('value')en http://the-url?oldvalue=1&value=2.
Rup

3
Sin embargo, si sabe que el nombre del parámetro está esperando, este será el enfoque más rápido.
Martin Borthiry

Editado: si solo prueba que halfes 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 !== undefinedresuelve.
philh

¡Frio! Hice una function get(param){return decodeURIComponent((location.search.split(param+'=')[1]||'').split('&')[0])}
frase

Tuve que cambiar la segunda línea para return half !== undefined ? decodeURIComponent(half[1].split('&')[0]) : null;que funcione
divillysausages

95

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!


76

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)


// requiere src / URI.fragmentURI.js para cargarse
JoeB

1
+1 URI.js es un gran complemento pequeño. También puede hacerlo var data = URI.parseQuery('?foo=bar&bar=baz&foo=world');por el mismo resultado ( docs ).
Yarin

62

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 .


3
Parece que window.location.getParameter () se ha eliminado de Chrome.
mhenry1384

54

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=6esto devuelve el objeto:

{
  x: "6",
  y: undefined,
  z: "hello"
}

si lo necesita como un complemento jQuery, aquí está: (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()
tim

Gracias. También terminé usando esto. Agregué esto antes de su declaración de devolución: si (param) return result [param], de esa manera también puedo hacer get_query ('foo') si es necesario
sqram

1
No funciona si tienes hashes. Por ejemplo: test.aspx? Test = t1 # default . Devolverá {test: "t1 # default"} y espero {test: "t1"}
Bogdan M.

@BogdanM: de hecho. location.hreftendría que ser reemplazado por location.search.
Dan Dascalescu

53

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

1
Creo que está haciendo algo similar a mí, pero creo que mi enfoque es MUCHO más simple stackoverflow.com/a/21152762/985454
Qwerty

Déjame presentarte (redoble de batería, por favor) window.location.search.
ErikE

46

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:

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

44

De la MDN :

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

alert(loadPageVar("name"));

39

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=cheezburgermuestra

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

99
Me encanta tu respuesta, especialmente lo compacto que es el script, pero probablemente deberías estar usando decodeURIComponent. Ver xkr.us/articles/javascript/encode-compare y stackoverflow.com/questions/619323/…
pluckyglen

39

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


38
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

55
Este es un enfoque interesante, que devuelve una matriz que contiene valores de los parámetros especificados. Tiene al menos un problema: no decodifica correctamente los valores de la URL, y también necesitaría codificar la URL de los nombres de los parámetros utilizados en la coincidencia. Sin embargo, funcionará en cadenas de consulta simples en su forma actual. ps no olvides usar la palabra clave var al declarar variables para declaraciones.
Andy E

38

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

36

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.


36

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?paramla solución de Bruno devuelve un objeto sin claves, mientras que la mía devuelve un objeto con clave paramy undefinedvalor.


34

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=barcreará una URL como :

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

44
Ordenado. Sin embargo, según Mozilla, forEach no funciona en IE7 u 8 y sospecho que se caerá si no hay ninguna cadena de consulta. Una mejora mínima que abarcaría más casos sería decodeURIComponentel valor a medida que lo almacena, y posiblemente también la clave, pero es menos probable que use cadenas impares en eso.
Rup

1
Agradable y simple No maneja los parámetros de la matriz ni, ?a&b&cpero esto es realmente muy legible (y por cierto similar a mi primera idea). También splites redundante, pero tengo más rendimiento para freír que dividir una cadena de 10 caracteres dos veces.
cod3monk3y

1
cuando querystring es "? hello = world & one = a = b & two = 2", entonces cuando toma el valor de 'one' solo obtiene la parte antes del primer '=' en el valor. su valor debería ser 'a = b' pero solo obtiene 'a' porque divide 'one = a = b' en '='. Esto es simplemente con errores. : ((
Shawn Kovac

2
Lo usaría en location.search.substr(1)lugar de location.href.split('?')[1]evitar recoger hash ( #anchor) junto con el último parámetro de consulta.
mlt

¡Sí, déjame presentarte también location.search!
ErikE

32

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; 1se 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[]=jimo person=neek&person=jeff&person=jimcomo 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;
};

Para obtener los valores de la cadena de consulta, puede usar esta función "GetParameterValues". En esto, solo tiene que pasar el nombre del parámetro de consulta y le devolverá el valor $ (documento) .ready (function () {var bid = GetParameterValues ​​('token');}); función GetParameterValues ​​(param) {var url = decodeURIComponent (window.location.href); url = url.slice (url.indexOf ('?') + 1) .split ('&'); for (var i = 0; i <url.length; i ++) {var urlparam = url [i] .split ('='); if (urlparam [0] == param) {return urlparam [1]; }}
Mike Clark

1
He estado usando esto por un tiempo, y hasta ahora ha sido genial. Excepto por el manejo de arreglos urlencoded. Usar q = decodeURIComponent(window.location.search.substring(1)),ayuda a hacer eso también.
Vladislav Dimitrov

31

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

Además, es mejor usar decodeURI () o decodeURIComponent () en lugar de unescape (). developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Adarsh ​​Konchady

27

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=truey #hash=truepuedes usar los métodos Arg.query()y Arg.hash().


me salvaste hombre ... arg.js es la solución ninguna de las soluciones está obteniendo los valores de # en IE 8 .. :( cualquiera que busque IE8 # obtener de solicitud esta es la solución ..
Dilip Rajkumar

27

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

1
Eso es interesante si lo necesita, pero no hay un estándar para el formato de la parte hash AFAIK, por lo que no es justo llamarlo como una debilidad de la otra respuesta.
Rup

2
Sí, lo sé. Pero en mi aplicación integro la navegación js de terceros, que tienen algunos parámetros después del signo hash.
Ph0en1x

Por ejemplo, en la página de búsqueda de Google, la consulta de búsqueda es seguida por el signo hash '#'.
etlds

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

Ya hay algunas implementaciones de este enfoque aquí. Como mínimo, debe decodificar UriComponent () los valores del resultado. Esto también podría comportarse mal si no especifica un valor, por ejemplo ?stringtext&stringword=foo.
Rup

24

Si está usando Browserify, puede usar el urlmó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"

La documentación para la urlAPI del módulo está aquí: nodejs.org/api/url.html
andrezsanchez

Esto es bueno para el desarrollo de nw.js. Browserify ni siquiera es necesario, ya que la mayoría de los módulos de nodo funcionan como en una ventana nw.js. He probado este código y funciona de maravilla sin ninguna modificación.
Andrew Grothe

OHH esto es genial! URLSearchParams funciona perfecto. ¡Muchas gracias!
Baran Emre

1
probablemente debería ser el mejor votado, sin problemas con funciones personalizadas y bibliotecas adicionales. También parece ser adoptado principalmente por los navegadores 2019.
TheWhiteLlama
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.