Obtener el parámetro de URL escapado


302

Estoy buscando un complemento jQuery que pueda obtener parámetros de URL y que sea compatible con esta cadena de búsqueda sin generar el error de JavaScript: "secuencia de URI con formato incorrecto". Si no hay un complemento jQuery que lo admita, necesito saber cómo modificarlo para admitirlo.

?search=%E6%F8%E5

El valor del parámetro URL, cuando se decodifica, debe ser:

æøå

(Los personajes son noruegos).

No tengo acceso al servidor, por lo que no puedo modificar nada en él.



1
La razón por la que está obteniendo una "secuencia de URI malformada" es porque la mayoría de las funciones usan decodeURIComponent(). Los caracteres noruegos probablemente se codificaron usando algo como escape()y cambiar la decodeURIComponent()llamada a unescape()debería ser útil.
Kevin M

Vea mi respuesta para una solución moderna: stackoverflow.com/a/19992436/64949
Sindre Sorhus

Respuestas:


418
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

33
Con name = 'bar', creo que esta expresión regular coincidiría 'foobar=10'y volvería '10'. Tal vez podría agregar '[?|&]'al comienzo de su expresión regular. ¡Salud!
Sébastien RoccaSerra

34
esta función devuelve 'nulo' en lugar de nulo cuando el parámetro no está definido ... la alegría de js ...
Damien

12
es posible que desee "decodeURIComponent ()" en lugar de "decodeURI ()", especialmente si está pasando datos interesantes como URL de retorno como parámetro de URL
perfeccionista

25
Esto es bueno, pero decodeURIComponent es mejor, por ejemplo, tenía un hashtag (% 23) en mi parámetro que sería ignorado por decodeURI. Y no devolvería nulo, pero "", porque decodeURI (nulo) === "nulo", que es un valor de retorno extraño, "" es mejor; puede hacer if (! getURLParameter ("param")) en lugar de if (getURLParameter ("param") === "null"). Entonces, mi versión mejorada: decodeURIComponent ((RegExp (name + '=' + '(. +?) (& | $)'). Exec (location.search) || [, ""]) [1])
standup75

3
Se votó hacia abajo ya que esto devuelve una cadena sin importar si se encontró el resultado o no, y no importa lo que pones como matriz alternativa, por ejemplo [, nulo], porque el resultado estaba envuelto dentro de decodeURI que convirtió cualquier cosa en cadena, Sanjeev tenía razón, pero su código no se probó correctamente y copiar y pegar simple no funciona. function getURLParameter(name) { var p = RegExp(name + '=' + '(.+?)(&|$)').exec(location.search); if(!!p) { p = decodeURI(p[1]); } return p; }
Lukasz 'Severiaan' Grela

295

A continuación se muestra lo que he creado a partir de los comentarios aquí, así como la corrección de errores no mencionados (como devolver realmente nulo y no 'nulo'):

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

66
¿Qué hay de agregar newfrente a RegExp? Menos advertencias de pelusa.
ripper234

18
Esta debería ser la respuesta aceptada. Recuperar nulo real en lugar de "nulo" es mucho mejor.
Arte el

11
Si alguien necesita convertir esto a coffeescript: getURLParameter: (name) -> return decodeURIComponent ((new RegExp ("[? | &] # {Name} = ([^ &;] +?) (& | ## |; | | $) "). exec (location.search) || [null," "]) [1] .replace (/ \ + / g, '% 20')) || null;
Barbanegra

1
@Redbeard: ¿no debería su función tener un signo '=' después de la definición del método en lugar de dos puntos?
Zippie

1
Esta es la única versión de una función get-URL-parameter que funciona para mí con una cadena UTF8.
certainlyakey

107

Lo que realmente quieres es el complemento jQuery URL Parser . Con este complemento, obtener el valor de un parámetro de URL específico (para la URL actual) se ve así:

$.url().param('foo');

Si desea un objeto con nombres de parámetros como claves y valores de parámetros como valores, simplemente llame param()sin un argumento, como este:

$.url().param();

Esta biblioteca también funciona con otras URL, no solo la actual:

$.url('http://allmarkedup.com?sky=blue&grass=green').param();
$('#myElement').url().param(); // works with elements that have 'src', 'href' or 'action' attributes

Como se trata de una biblioteca de análisis de URL completa, también puede obtener otra información de la URL, como el puerto especificado o la ruta, el protocolo, etc.

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value');
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

También tiene otras características, consulte su página de inicio para obtener más documentos y ejemplos.

En lugar de escribir su propio analizador URI para este propósito específico que un poco funciona en la mayoría de los casos, utilizar un analizador real URI. Dependiendo de la respuesta, el código de otras respuestas puede regresar en 'null'lugar de null, no funciona con parámetros vacíos ( ?foo=&bar=x), no puede analizar y devolver todos los parámetros a la vez, repite el trabajo si consulta repetidamente la URL para parámetros, etc.

Use un analizador de URI real, no invente el suyo.

Para aquellos aversos a jQuery, hay una versión del complemento que es JS puro .


23
La pregunta es "obtener el parámetro URL con jQuery". Mi respuesta responde a la pregunta. Otras respuestas indican al usuario que básicamente escriba su propio analizador de URI para este caso de uso específico, lo cual es una idea terrible. Analizar los URI es más complicado de lo que la gente piensa.
Lucas

2
Esta es la respuesta que estaba buscando, y es muy jQuery-ish, a diferencia de algunas de las otras respuestas.
Ehtesh Choudhury

¿El complemento maneja la codificación URI o tengo que decodificarlo manualmente?
Roberto Linares

La pregunta dice "javascript" (creo que significa DOM directamente) o jQuery. Entonces cualquiera de los otros lo hará.
brunoais

43

Si no sabe cuáles serán los parámetros de la URL y desea obtener un objeto con las claves y los valores que están en los parámetros, puede usar esto:

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

Llamar a getParameters () con una URL como /posts?date=9/10/11&author=nilbusdevolvería:

{
  date:   '9/10/11',
  author: 'nilbus'
}

No incluiré el código aquí, ya que está aún más lejos de la pregunta, pero weareon.net publicó una biblioteca que también permite la manipulación de los parámetros en la URL:


1
Sí, es mejor obtener todos los parámetros. Todas las otras soluciones enumeradas aquí repiten la expresión regular para cada parámetro.
Bernard

Esta función devuelve un objeto incómodo: {"": undefined}cuando la URL no tiene parámetros. Es mejor devolver un objeto vacío utilizando if(searchString=='') return {};directamente después de la searchStringasignación.
Jordan Arseno 01 de

40

Puede usar la propiedad nativa location.search del navegador :

function getParameter(paramName) {
  var searchString = window.location.search.substring(1),
      i, val, params = searchString.split("&");

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

Pero hay algunos complementos de jQuery que pueden ayudarte:


44
Esto es mucho más limpio y más legible (y probablemente más libre de errores) que todas esas frases regulares de expresiones regulares.
Timmmm

8
Sugeriré usar decodeURIComponent () en lugar de unescape ()
freedev

+1 esto funciona para los navegadores modernos, pero algunos desarrolladores deben trabajar con ...: | IE8: S.
brunoais

25

Basado en la respuesta del 999 :

function getURLParameter(name) {
    return decodeURIComponent(
        (location.search.match(RegExp("[?|&]"+name+'=(.+?)(&|$)'))||[,null])[1]
    );  
}

Cambios:

  • decodeURI() se reemplaza con decodeURIComponent()
  • [?|&] se agrega al comienzo de la expresión regular

3
Podría ser útil para otros si pudiera explicar por qué realizó estos cambios. Thx
Timm

3
No maneja params vacías: ?a=&b=1. Mejor "[?&]"+name+"=([^&]*)"
expresión regular

6

Necesita agregar el parámetro i para que no distinga entre mayúsculas y minúsculas:

  function getURLParameter(name) {
    return decodeURIComponent(
      (RegExp(name + '=' + '(.+?)(&|$)', 'i').exec(location.search) || [, ""])[1]
    );
  }

3

Después de leer todas las respuestas, terminé con esta versión con + una segunda función para usar parámetros como indicadores

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)','i').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

function isSetURLParameter(name) {
    return (new RegExp('[?|&]' + name + '(?:[=|&|#|;|]|$)','i').exec(location.search) !== null)
}

2
Buena respuesta, solo una advertencia. Según JSHint, [, ""] puede causar problemas para los navegadores más antiguos. Por lo tanto, use en su lugar [null, ""] o [undefined, ""]. Todavía hay algunos de nosotros infelices que admitimos IE8 y me atrevo a decirlo IE7.
Delicia Brummitt

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

$.urlParam("key");

2

Por ejemplo, una función que devuelve el valor de cualquier variable de parámetros.

function GetURLParameter(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://example.com/?technology=jquery&blog=jquerybyexample".

var tech = GetURLParameter('technology');
var blog = GetURLParameter('blog');

Entonces, en la variable de código anterior "tech" tendrá "jQuery" como valor y la variable "blog" será "jquerybyexample".


2

¡No deberías usar jQuery para algo como esto!
La forma moderna es usar pequeños módulos reutilizables a través de un administrador de paquetes como Bower.

He creado un pequeño módulo que puede analizar la cadena de consulta en un objeto. Úselo así:

// parse the query string into an object and get the property
queryString.parse(unescape(location.search)).search;
//=> æøå

Si dice que no es moderno tener un marco, está bien. Pero en mi opinión, los marcos realmente tienen su lugar. Sin embargo, jQuery me parece cada vez menos bonita.
Lodewijk

0

Aquí hay mucho código con errores y las soluciones de expresiones regulares son muy lentas. Encontré una solución que funciona hasta 20 veces más rápido que la contraparte regex y es elegantemente simple:

    /*
    *   @param      string      parameter to return the value of.
    *   @return     string      value of chosen parameter, if found.
    */
    function get_param(return_this)
    {
        return_this = return_this.replace(/\?/ig, "").replace(/=/ig, ""); // Globally replace illegal chars.

        var url = window.location.href;                                   // Get the URL.
        var parameters = url.substring(url.indexOf("?") + 1).split("&");  // Split by "param=value".
        var params = [];                                                  // Array to store individual values.

        for(var i = 0; i < parameters.length; i++)
            if(parameters[i].search(return_this + "=") != -1)
                return parameters[i].substring(parameters[i].indexOf("=") + 1).split("+");

        return "Parameter not found";
    }

console.log(get_param("parameterName"));

Regex no es la solución completa y definitiva, para este tipo de problema, la simple manipulación de cadenas puede funcionar mucho más eficientemente. Código fuente .


0
<script type="text/javascript">
function getURLParameter(name) {
        return decodeURIComponent(
            (location.search.toLowerCase().match(RegExp("[?|&]" + name + '=(.+?)(&|$)')) || [, null])[1]
        );
    }

</script>

getURLParameter(id)o getURLParameter(Id)funciona igual:)


0

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;
    }
    else{
       return results[1] || 0;
    }
}

example.com?param1=name&param2=&id=6

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

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

console.log(decodeURIComponent($.urlParam('city'))); 
//output: Gold Coast

-1
function getURLParameters(paramName) 
{
        var sURL = window.document.URL.toString();  
    if (sURL.indexOf("?") > 0)
    {
       var arrParams = sURL.split("?");         
       var arrURLParams = arrParams[1].split("&");      
       var arrParamNames = new Array(arrURLParams.length);
       var arrParamValues = new Array(arrURLParams.length);     
       var i = 0;
       for (i=0;i<arrURLParams.length;i++)
       {
        var sParam =  arrURLParams[i].split("=");
        arrParamNames[i] = sParam[0];
        if (sParam[1] != "")
            arrParamValues[i] = unescape(sParam[1]);
        else
            arrParamValues[i] = "No Value";
       }

       for (i=0;i<arrURLParams.length;i++)
       {
                if(arrParamNames[i] == paramName){
            //alert("Param:"+arrParamValues[i]);
                return arrParamValues[i];
             }
       }
       return "No Parameters Found";
    }

}

-1

Creé una función simple para obtener el parámetro de URL en JavaScript desde una URL como esta:

.....58e/web/viewer.html?page=*17*&getinfo=33


function buildLinkb(param) {
    var val = document.URL;
    var url = val.substr(val.indexOf(param))  
    var n=parseInt(url.replace(param+"=",""));
    alert(n+1); 
}
buildLinkb("page");

SALIDA: 18


2
Tenga cuidado al publicar copiar y pegar respuestas repetitivas / textuales a múltiples preguntas, la comunidad suele marcarlas como "spam". Si está haciendo esto, generalmente significa que las preguntas son duplicadas, así que márquelas como tales en su lugar: stackoverflow.com/a/11808489/419
Kev

-1

En caso de que tengan la URL como localhost / index.xsp? A = 1 # algo y necesiten obtener el parámetro, no el hash.

var vars = [], hash, anchor;
var q = document.URL.split('?')[1];
if(q != undefined){
    q = q.split('&');
    for(var i = 0; i < q.length; i++){
        hash = q[i].split('=');
        anchor = hash[1].split('#');
        vars.push(anchor[0]);
        vars[hash[0]] = anchor[0];
    }
}

-1

Ligera modificación a la respuesta por @pauloppenheim, ya que no manejará adecuadamente los nombres de parámetros que pueden ser parte de otros nombres de parámetros.

Por ejemplo: si tiene parámetros "appenv" y "env", cambiar el valor de "env" puede recoger el valor "appenv".

Reparar:

var urlParamVal = function (name) {
    var result = RegExp("(&|\\?)" + name + "=(.+?)(&|$)").exec(location.search);
    return result ? decodeURIComponent(result[2]) : "";
};

-2

Esto puede ayudar.

<script type="text/javascript">
    $(document).ready(function(){
        alert(getParameterByName("third"));
    });
    function getParameterByName(name){
        var url     = document.URL,
            count   = url.indexOf(name);
            sub     = url.substring(count);
            amper   = sub.indexOf("&"); 

        if(amper == "-1"){
            var param = sub.split("=");
            return param[1];
        }else{
            var param = sub.substr(0,amper).split("=");
            return param[1];
        }

    }
</script>

1
Este código no se ha probado bien. Adivina lo que sucede con la consulta?twothrids=text
Lyth
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.