¿Cómo obtener el parámetro de URL usando jQuery o JavaScript simple?

619

He visto muchos ejemplos de jQuery donde el tamaño y el nombre del parámetro son desconocidos.

Mi URL solo tendrá 1 cadena:

http://example.com?sent=yes

Solo quiero detectar:

  1. ¿Existe sent?
  2. ¿Es igual a "sí"?
LeBlaireau
fuente
2
posible duplicado de ¿Cómo puedo obtener valores de cadena de consulta?
James Donnelly
La mejor solución que he visto [aquí] [1] [1]: stackoverflow.com/a/901144/3106590
hmfarimani
1
Ahora hay un complemento / biblioteca para esto, llamado URI.js: github.com/medialize/URI.js
alexw

Respuestas:

1211

La mejor solución aquí .

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};

Y esto es cómo se puede utilizar esta función asumiendo la dirección URL es,
http://dummy.com/?technology=jquery&blog=jquerybyexample.

var tech = getUrlParameter('technology');
var blog = getUrlParameter('blog');
Sameer Kazi
fuente
8
¡Gracias! Pero al copiar esto, encontré una desagradable sorpresa, que involucra un espacio en blanco de ancho cero () hacia el final allí. Hacer que el script tenga un error de sintaxis invisible.
Christofer Ohlsson
11
Regrese falseao nullpara búsqueda vacía
Stefano Caravana
44
Esta solución funciona bastante bien para mí. Acabo de usar var sPageURL = decodeURI (window.location.search.substring (1)); para convertir% 20 caracteres en espacios en blanco y también devuelvo una cadena vacía en lugar de nada si el parámetro no coincide.
Christophe
18
He actualizado la respuesta para incluir todos los cambios en el código de comentarios sobre este comentario.
Rob Evans
77
La decodificación debe hacerse en el valor del parámetro (como sugiere Iouri). Si la decodificación se realiza en la url (como en la respuesta), no funcionará correctamente si hay un valor codificado &o =en un parámetro.
zakinster
288

Solución desde 2020

Tenemos: http://example.com?sent=yes

let searchParams = new URLSearchParams(window.location.search)

¿El envió existen ?

searchParams.has('sent') // true

¿Es igual a "sí"?

let param = searchParams.get('sent')

y luego solo compáralo.

Optio
fuente
16
Creo que esto no es compatible con los navegadores, ¿por qué debería uno usarlo? referencia - developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
p_champ
1
@p_champ tienes razón. Pero puede usar polyfill para URLSearchParams
Optio
2
actualmente no funciona en IE / Edge, también lo hace la detección de características: if ('URLSearchParams' in window) { // Browser supports URLSearchParams} ver aquí
mfgmicha
44
Lo suficientemente bueno para mí y mi público objetivo. caniuse.com/#feat=urlsearchparams
jontsai
44
@p_champ Edge recibió soporte en v17 (abril de 2018). Deje morir a IE.
Ryan DuVal
198

Fragmento de código jQuery para obtener las variables dinámicas almacenadas en la url como parámetros y almacenarlas como variables JavaScript listas para usar con sus scripts:

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null) {
       return null;
    }
    return decodeURI(results[1]) || 0;
}

example.com?param1=name¶m2=&id=6

$.urlParam('param1'); // name
$.urlParam('id');        // 6
$.urlParam('param2');   // null

ejemplos de parámetros con espacios

http://www.jquery4u.com?city=Gold Coast
console.log($.urlParam('city'));  
//output: Gold%20Coast



console.log(decodeURIComponent($.urlParam('city'))); 
//output: Gold Coast
Reza Baradaran Gazorisangi
fuente
12
Nota: return results[1] || 0;Debe decodificar en caso de que haya caracteres especiales como parámetro o Umlaute, etc. Por lo tanto, en lugar de hacerlo, debería serloreturn decodeURI(results[1]) || 0;
Kai Noack
Solo por curiosidad, ¿por qué necesita la || 0parte ya que ya hay una comprobación del resultado, no siempre devolvería la matriz de coincidencias?
AirWick219
@ AirWick219 un adecuado a prueba de fallos. aunque redundante, nunca está de más ser precavido
zanderwar
2
Aquí es, muy probablemente, la fuente original: sitepoint.com/url-parameters-jquery pero esta respuesta ha añadido algunas nuevas ideas
bgmCoder
1
No estoy seguro de que valga la pena usar jQuery para esto.
Quentin 2
88

Siempre pego esto como una línea. Ahora params tiene los vars:

params={};location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){params[k]=v})

multilínea:

var params={};
window.location.search
  .replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str,key,value) {
    params[key] = value;
  }
);

como una función

function getSearchParams(k){
 var p={};
 location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){p[k]=v})
 return k?p[k]:p;
}

que podrías usar como:

getSearchParams()  //returns {key1:val1, key2:val2}

o

getSearchParams("key1")  //returns val1
Despertó
fuente
Hack feo que modifica la cadena de búsqueda ... pero no se requieren módulos externos o jquery. Me gusta.
Bryce
44
@Bryce En realidad no modifica la cadena de búsqueda. el .replace en realidad devuelve una nueva cadena y esas cadenas devueltas se procesan en el objeto params.
AwokeKnowing
Agradable, breve y, al contrario de la solución aceptada, no necesita volver a analizar la URL cada vez que necesita un valor. Podría mejorarse un poco con replace(/[?&;]+([^=]+)=([^&;]*)/gipara reconocer ";" personaje como separador también.
Le Droid
una línea clara e indolora, mejor que la respuesta aceptada para mí, no hay libs adicionales.
Sam
Esto es lo que uno usaría si uno usa hashes en lugar del delimitador de consulta GET (signo de interrogación): var params={};window.location.hash.replace(/[#&]+([^=&]+)=([^&]*)/gi,function(str,key,value){params[key] = value;}); esto es útil para cosas como AJAX donde el hash en la ventana se actualiza con solicitudes ajax pero también uno para que el usuario vaya a una uri que contiene un hash
Tommie
48

Otra función alternativa más ...

function param(name) {
    return (location.search.split(name + '=')[1] || '').split('&')[0];
}
rodnaph
fuente
El nombre debe ser una cadena. Trabajó como un encanto ~
mintedsky
2
Este es mi favorito. +1 Cabe destacar que este es un tipo de búsqueda "termina con". Por ejemplo, si pasa "Teléfono" para el nombre, y también hay un campo llamado "HomePhone", puede devolver el valor del incorrecto si aparece primero en la url.
efreed
2
¡Esto está mal! Por ejemplo param('t') == param('sent') == 'yes'en el ejemplo OP. Aquí hay una solución: return (location.search.split(new RegExp('[?&]' + name + '='))[1] || '').split('&')[0]; También tenga en cuenta que no puede saber si el parámetro existe porque obtiene una cadena vacía para los parámetros que faltan.
oriadam
Muy simple y elegante. Funciona como un sueño. Gracias.
Anjana Silva
// (para forzar la existencia de la clave completa en lugar de solo la última parte de la clave)return (location.search.split('?' + name + '=')[1] || location.search.split('&' + name + '=')[1] || '').split('&')[0];
Aaron
45

Puede ser demasiado tarde. Pero este método es muy fácil y simple.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>

<!-- URL:  www.example.com/correct/?message=done&year=1990 -->

<script type="text/javascript">
$(function(){
    $.url.attr('protocol')  // --> Protocol: "http"
    $.url.attr('path')      // --> host: "www.example.com"
    $.url.attr('query')         // --> path: "/correct/"
    $.url.attr('message')       // --> query: "done"
    $.url.attr('year')      // --> query: "1990"
});

ACTUALIZACIÓN
Requiere el complemento url: plugins.jquery.com/url
Gracias -Ripounet

Sariban D'Cl
fuente
2
Quien decida esto debe consultar primero el repositorio. El uso ha cambiado. $ .url.attr ('mensaje') se convierte en $ .url ("consulta") y solo da la consulta completa. Para obtener solo un parámetro tuve que: $ .url ("query"). Split ("=") [1] url github link
pseudozach
34

O puede usar esta pequeña función ordenada, porque ¿ por qué soluciones demasiado complicadas?

function getQueryParam(param, defaultValue = undefined) {
    location.search.substr(1)
        .split("&")
        .some(function(item) { // returns first occurence and stops
            return item.split("=")[0] == param && (defaultValue = item.split("=")[1], true)
        })
    return defaultValue
}

que se ve aún mejor cuando se simplifica y se alinea:

tl; dr solución de una línea

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
resultado:
queryDict ['enviado'] // indefinido o 'valor'

Pero, ¿qué pasa si tienes caracteres codificados o claves multivalor ?

Es mejor que vea esta respuesta: ¿Cómo puedo obtener valores de cadena de consulta en JavaScript?

Escurrir el bulto

"?a=1&b=2&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"
> queryDict
a: ["1", "5", "t e x t"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> queryDict["a"][1] // "5"
> queryDict.a[1] // "5"
QWERTY
fuente
3
es probable que la división de cadenas también sea más rápida que la expresión regular. No es que sea un factor teniendo en cuenta que la URL solo se analizará una vez.
Patrick
Esta es la solución (la primera) que funcionó perfectamente para mí en todos los navegadores. ¡Gracias!
NickyTheWrench
1
@NickyTheWrench Genial escuchar eso, ¡gracias! De todos modos, tenga en cuenta que esta es una solución muy simple, si obtiene parámetros de URL complicados que contienen caracteres especiales, es mejor que consulte el enlace proporcionado.
Qwerty
@Qwerty sí: mi caso de uso es muy simple donde el parámetro siempre es el mismo, etc. (básicamente exactamente lo que pidió el OP) ¡Gracias de nuevo!
NickyTheWrench
1
@BernardVanderBeken Interesante, lo arreglé, de todos modos, es una solución bastante tonta, la de la parte inferior que admite caracteres codificados y matrices es mucho mejor.
Qwerty
33

Utilizando URLSearchParams:

var params = new window.URLSearchParams(window.location.search);
console.log(params.get('name'));

Tenga cuidado con la compatibilidad (en su mayoría está bien, pero IE y Edge pueden ser una historia diferente, verifique esto para obtener referencias compatibles: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams )

Xin
fuente
No la mayoría de los navegadores pueden usar esto.
saf21
URLSearchParams reemplaza el carácter especial "+" con un espacio. Entonces, si su parámetro de URL tiene un "+", será reemplazado.
Growler
11

Este es simple y funcionó para mí.

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results[1] || 0;
}

así que si tu url es http://www.yoursite.com?city=4

prueba esto

console.log($.urlParam('city'));
Shuhad Zaman
fuente
10

¿Tal vez quieras echarle un vistazo al dentista JS ? (descargo de responsabilidad: escribí el código)

código:

document.URL == "http://helloworld.com/quotes?id=1337&author=kelvin&message=hello"
var currentURL = document.URL;
var params = currentURL.extract();
console.log(params.id); // 1337
console.log(params.author) // "kelvin"
console.log(params.message) // "hello"

con Dentist JS, básicamente puede llamar a la función extract () en todas las cadenas (por ejemplo, document.URL.extract ()) y obtiene un HashMap de todos los parámetros encontrados. También es personalizable para tratar con delimitadores y todo.

Versión minimizada <1kb

Kelvintaywl
fuente
5

Espero que esto sea de ayuda.

 <script type="text/javascript">
   function getParameters() {
     var searchString = window.location.search.substring(1),
       params = searchString.split("&"),
       hash = {};

     if (searchString == "") return {};
     for (var i = 0; i < params.length; i++) {
       var val = params[i].split("=");
       hash[unescape(val[0])] = unescape(val[1]);
     }

     return hash;
   }

    $(window).load(function() {
      var param = getParameters();
      if (typeof param.sent !== "undefined") {
        // Do something.
      }
    });
</script>
Tarun Gupta
fuente
5

function GetRequestParam(param)
{
	var res = null;
	try{
		var qs = decodeURIComponent(window.location.search.substring(1));//get everything after then '?' in URI
		var ar = qs.split('&');
		$.each(ar, function(a, b){
			var kv = b.split('=');
			if(param === kv[0]){
				res = kv[1];
				return false;//break loop
			}
		});
	}catch(e){}
	return res;
}

p_champ
fuente
4

Pruebe esta demostración de trabajo http://jsfiddle.net/xy7cX/

API:

Esto debería ayudar :)

código

var url = "http://myurl.com?sent=yes"

var pieces = url.split("?");
alert(pieces[1] + " ===== " + $.inArray("sent=yes", pieces));
Tats_innit
fuente
3
solo funciona para una sola var - la y la descartaría - podría ampliarse con regex
Alvin
3

Existe esta gran biblioteca: https://github.com/allmarkedup/purl

que te permite hacer simplemente

url = 'http://example.com?sent=yes';
sent = $.url(url).param('sent');
if (typeof sent != 'undefined') { // sent exists
   if (sent == 'yes') { // sent is equal to yes
     // ...
   }
}

El ejemplo es asumir que estás usando jQuery. También podría usarlo como javascript simple, la sintaxis sería un poco diferente.

Michael Konečný
fuente
1
Esta biblioteca ya no se mantiene, sin embargo, la uso y es genial. Asegúrese de usar param not attr para obtener esos parámetros de cadena de consulta, como el autor ha incluido en su ejemplo.
Acción Dan
3

Esto podría ser una exageración, pero hay una biblioteca bastante popular ahora disponible para URI de análisis sintáctico, llamados URI.js .

Ejemplo

var uri = "http://example.org/foo.html?technology=jquery&technology=css&blog=stackoverflow";
var components = URI.parse(uri);
var query = URI.parseQuery(components['query']);
document.getElementById("result").innerHTML = "URI = " + uri;
document.getElementById("result").innerHTML += "<br>technology = " + query['technology'];

// If you look in your console, you will see that this library generates a JS array for multi-valued queries!
console.log(query['technology']);
console.log(query['blog']);
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.17.0/URI.min.js"></script>

<span id="result"></span>

alexw
fuente
3

Tan simple que puede usar cualquier url y obtener valor

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

Ejemplo de uso

// query string: ?first=value1&second=&value2
var foo = getParameterByName('first'); // "value1"
var bar = getParameterByName('second'); // "value2" 

Nota: Si un parámetro está presente varias veces (? First = value1 & second = value2), obtendrá el primer valor (value1) y el segundo valor como (value2).

ImBhavin95
fuente
2

Esto te dará un buen objeto para trabajar

    function queryParameters () {
        var result = {};

        var params = window.location.search.split(/\?|\&/);

        params.forEach( function(it) {
            if (it) {
                var param = it.split("=");
                result[param[0]] = param[1];
            }
        });

        return result;
    }

Y entonces;

    if (queryParameters().sent === 'yes') { .....
Brian F
fuente
dividido (/ \? | \ & /) esto significa
Selva Ganapathi
2

Esto se basa en la respuesta de Gazoris , pero la URL decodifica los parámetros para que puedan usarse cuando contienen datos distintos de números y letras:

function urlParam(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    // Need to decode the URL parameters, including putting in a fix for the plus sign
    // https://stackoverflow.com/a/24417399
    return results ? decodeURIComponent(results[1].replace(/\+/g, '%20')) : null;
}
Stephen Ostermiller
fuente
2

Hay otro ejemplo con el uso de la biblioteca URI.js.

El ejemplo responde las preguntas exactamente como se le preguntó.

var url = 'http://example.com?sent=yes';
var urlParams = new URI(url).search(true);
// 1. Does sent exist?
var sendExists = urlParams.sent !== undefined;
// 2. Is it equal to "yes"?
var sendIsEqualtToYes = urlParams.sent == 'yes';

// output results in readable form
// not required for production
if (sendExists) {
  console.log('Url has "sent" param, its value is "' + urlParams.sent + '"');
  if (urlParams.sent == 'yes') {
    console.log('"Sent" param is equal to "yes"');
  } else {
    console.log('"Sent" param is not equal to "yes"');
  }
} else {
  console.log('Url hasn\'t "sent" param');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.2/URI.min.js"></script>

userlond
fuente
2
http://example.com?sent=yes

La mejor solución aquí .

function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.href);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, '    '));
};

Con la función anterior, puede obtener valores de parámetros individuales:

getUrlParameter('sent');
Naami
fuente
¡Respuesta perfecta!
Srijani Ghosh
1

Versión en coffeescript de la respuesta de Sameer

getUrlParameter = (sParam) ->
  sPageURL = window.location.search.substring(1)
  sURLVariables = sPageURL.split('&')
  i = 0
  while i < sURLVariables.length
    sParameterName = sURLVariables[i].split('=')
    if sParameterName[0] == sParam
      return sParameterName[1]
    i++
stevenspiel
fuente
1

Una ligera mejora a la respuesta de Sameer, guarda los parámetros en caché para cerrarlos para evitar analizar y recorrer todos los parámetros cada vez que se llama

var getURLParam = (function() {
    var paramStr = decodeURIComponent(window.location.search).substring(1);
    var paramSegs = paramStr.split('&');
    var params = [];
    for(var i = 0; i < paramSegs.length; i++) {
        var paramSeg = paramSegs[i].split('=');
        params[paramSeg[0]] = paramSeg[1];
    }
    console.log(params);
    return function(key) {
        return params[key];
    }
})();
streaver91
fuente
1

Yo uso esto y funciona. http://codesheet.org/codesheet/NF246Tzs

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
    });
return vars;
}


var first = getUrlVars()["id"];
studio-klik
fuente
1

Con JavaScript vainilla, puede tomar fácilmente los parámetros (location.search), obtener la subcadena (sin el?) Y convertirla en una matriz, dividiéndola por '&'.

A medida que recorre urlParams, puede dividir la cadena nuevamente con '=' y agregarla al objeto 'params' como object [elmement [0]] = element [1]. Súper simple y de fácil acceso.

http://www.website.com/?error=userError&type=handwritten

            var urlParams = location.search.substring(1).split('&'),
                params = {};

            urlParams.forEach(function(el){
                var tmpArr = el.split('=');
                params[tmpArr[0]] = tmpArr[1];
            });


            var error = params['error'];
            var type = params['type'];
DDT
fuente
1

¿Qué pasa si hay & en el parámetro de URL como filename = "p & g.html" & uid = 66

En este caso, la primera función no funcionará correctamente. Entonces modifiqué el código

function getUrlParameter(sParam) {
    var sURLVariables = window.location.search.substring(1).split('&'), sParameterName, i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
}
usuario562451
fuente
1

Es cierto que estoy agregando mi respuesta a una pregunta con respuesta excesiva, pero esto tiene las ventajas de:

- No depende de ninguna biblioteca externa, incluida jQuery

- No contamina el espacio de nombres de la función global, al extender 'String'

- No crea ningún dato global y realiza un procesamiento innecesario después de encontrar una coincidencia

- Manejo de problemas de codificación, y aceptación (asumiendo) nombre de parámetro no codificado

- Evitar forbucles explícitos

String.prototype.urlParamValue = function() {
    var desiredVal = null;
    var paramName = this.valueOf();
    window.location.search.substring(1).split('&').some(function(currentValue, _, _) {
        var nameVal = currentValue.split('=');
        if ( decodeURIComponent(nameVal[0]) === paramName ) {
            desiredVal = decodeURIComponent(nameVal[1]);
            return true;
        }
        return false;
    });
    return desiredVal;
};

Entonces lo usarías como:

var paramVal = "paramName".urlParamValue() // null if no match
BaseZen
fuente
1

Si desea encontrar un parámetro específico de una URL específica:

function findParam(url, param){
  var check = "" + param;
  if(url.search(check )>=0){
      return url.substring(url.search(check )).split('&')[0].split('=')[1];
  }
}  

var url = "http://www.yourdomain.com/example?id=1&order_no=114&invoice_no=254";  
alert(findParam(url,"order_no"));
Wahid Masud
fuente
0

Otra solución que usa jQuery y JSON, para que pueda acceder a los valores de los parámetros a través de un objeto.

var loc = window.location.href;
var param = {};
if(loc.indexOf('?') > -1)
{
    var params = loc.substr(loc.indexOf('?')+1, loc.length).split("&");

    var stringJson = "{";
    for(var i=0;i<params.length;i++)
    {
        var propVal = params[i].split("=");
        var paramName = propVal[0];
        var value = propVal[1];
        stringJson += "\""+paramName+"\": \""+value+"\"";
        if(i != params.length-1) stringJson += ",";
    }
    stringJson += "}";
    // parse string with jQuery parseJSON
    param = $.parseJSON(stringJson);
}

Asumiendo que su URL es http://example.com/?search=hello+world&language=en&page=3

Después de eso, solo es cuestión de usar parámetros como este:

param.language

regresar

en

El uso más útil de esto es ejecutarlo en la carga de la página y hacer uso de una variable global para usar los parámetros en cualquier lugar donde los necesite.

Si su parámetro contiene valores numéricos, simplemente analice el valor.

parseInt(param.page)

Si no hay parámetros paramsolo habrá un objeto vacío.

Niksuski
fuente
-1
$.urlParam = function(name) {
  var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
  return results[1] || 0;
}
Aftab Uddin
fuente
& está mal codificado como "& amp;" en la respuesta anterior, consulte la respuesta correcta stackoverflow.com/a/25359264/73630
Palani
-1

utilizar este

$.urlParam = function(name) {
  var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
  return results[1] || 0;
}
ddfsf
fuente