¿Cómo obtener la cadena de consulta de la URL actual con JavaScript?

Question

que tienen URL como esta:

http://localhost/PMApp/temp.htm?ProjectID=462 

Lo que necesito hacer es conseguir los detalles después del ? signo (cadena de consulta) - es decir ProjectID=462. ¿Cómo puedo obtener eso usando JavaScript?

Lo que he hecho hasta ahora es la siguiente:

var url = window.location.toString(); 
url.match(?); 

no sé qué hacer a continuación.

Answer 1

Eche un vistazo a MDN article sobre window.location.

QueryString está disponible en window.location.search.

solución que funciona en navegadores antiguos, así

MDN son un ejemplo (ya no está disponible en el artículo de referencia anterior) de cómo conseguir el valor de una única disposición clave en la cadena de consulta. Algo como esto:

function getQueryStringValue (key) { 
    return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1")); 
} 

// Would write the value of the QueryString-variable called name to the console 
console.log(getQueryStringValue("name")); 

En los navegadores modernos

En los navegadores modernos que tienen la propiedad searchParams de la interfaz de URL, que devuelve un objeto URLSearchParams. El objeto devuelto tiene varios métodos convenientes, incluido un método get. Por lo que el equivalente del ejemplo anterior sería:

let params = (new URL(document.location)).searchParams; 
let name = params.get("name"); 

La interfaz URLSearchParams también se puede utilizar para analizar cadenas en un formato de cadena de consulta, y los convierten en un práctico objeto URLSearchParams.

let paramsString = "name=foo&age=1337" 
let searchParams = new URLSearchParams(paramsString); 

searchParams.has("name") === true; // true 
searchParams.get("age") === "1337"; // true 

en cuenta que el soporte de los navegadores es todavía limitado en esta interfaz, por lo que si usted necesita para apoyar navegadores antiguos, seguir con el primer ejemplo.

Answer 2

Puede usar la propiedad search del objeto window.location para obtener la parte de consulta de la URL. Tenga en cuenta que incluye el signo de interrogación (?) Al principio, en caso de que afecte a la forma en que pretende analizarlo.

Answer 3

Uso window.location.search a obtener todo tras ?incluyendo ?

Ejemplo:

var url = window.location.search; 
url = url.replace("?", ''); // remove the ? 
alert(url); //alerts ProjectID=462 is your case 

Answer 4

Esto agregará una función global para acceder a las variables de cadena de consulta como un mapa.

// ------------------------------------------------------------------------------------- 
// Add function for 'window.location.query([queryString])' which returns an object 
// of querystring keys and their values. An optional string parameter can be used as 
// an alternative to 'window.location.search'. 
// ------------------------------------------------------------------------------------- 
// Add function for 'window.location.query.makeString(object, [addQuestionMark])' 
// which returns a queryString from an object. An optional boolean parameter can be 
// used to toggle a leading question mark. 
// ------------------------------------------------------------------------------------- 
if (!window.location.query) { 
    window.location.query = function (source) { 
     var map = {}; 
     source = source || this.search; 

     if ("" != source) { 
      var groups = source, i; 

      if (groups.indexOf("?") == 0) { 
       groups = groups.substr(1); 
      } 

      groups = groups.split("&"); 

      for (i in groups) { 
       source = groups[i].split("=", 
        // For: xxx=, Prevents: [xxx, ""], Forces: [xxx] 
        (groups[i].slice(-1) !== "=") + 1 
       ); 

       // Key 
       i = decodeURIComponent(source[0]); 

       // Value 
       source = source[1]; 
       source = typeof source === "undefined" 
        ? source 
        : decodeURIComponent(source); 

       // Save Duplicate Key 
       if (i in map) { 
        if (Object.prototype.toString.call(map[i]) !== "[object Array]") { 
         map[i] = [map[i]]; 
        } 

        map[i].push(source); 
       } 

       // Save New Key 
       else { 
        map[i] = source; 
       } 
      } 
     } 

     return map; 
    } 

    window.location.query.makeString = function (source, addQuestionMark) { 
     var str = "", i, ii, key; 

     if (typeof source == "boolean") { 
      addQuestionMark = source; 
      source = undefined; 
     } 

     if (source == undefined) { 
      str = window.location.search; 
     } 
     else { 
      for (i in source) { 
       key = "&" + encodeURIComponent(i); 

       if (Object.prototype.toString.call(source[i]) !== "[object Array]") { 
        str += key + addUndefindedValue(source[i]); 
       } 
       else { 
        for (ii = 0; ii < source[i].length; ii++) { 
         str += key + addUndefindedValue(source[i][ii]); 
        } 
       } 
      } 
     } 

     return (addQuestionMark === false ? "" : "?") + str.substr(1); 
    } 

    function addUndefindedValue(source) { 
     return typeof source === "undefined" 
      ? "" 
      : "=" + encodeURIComponent(source); 
    } 
} 

Enjoy.

Answer 5

Puede usar esta función para partir de una cuerda dividida?id =

function myfunction(myvar){ 
    var urls = myvar; 
    var myurls = urls.split("?id="); 
    var mylasturls = myurls[1]; 
    var mynexturls = mylasturls.split("&"); 
    var url = mynexturls[0]; 
    alert(url) 
} 
myfunction(window.top.location.href); 
myfunction("http://www.myname.com/index.html?id=dance&emp;cid=in_social_facebook-hhp-food-moonlight-influencer_s7_20160623"); 

aquí es la fiddle

Answer 6

Usted debe echar un vistazo a la API URL que tiene métodos de ayuda para lograr esto en él como el URLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Esto no está soportado actualmente por todos los navegadores modernos, así que no olvides rellenarlo (Polyfill disponible usando https://qa.polyfill.io/).

Answer 7

var queryObj = {}; 
    if(url.split("?").length>0){ 
    var queryString = url.split("?")[1]; 
    } 

ahora tiene la parte de consulta en queryString

Primera reemplazar eliminará todos los espacios en blanco, en segundo lugar se sustituirá todo el '&' parte con "", y finalmente el tercer reemplazar pondrá ": "en lugar de '=' signos.

queryObj = JSON.parse('{"' + queryString.replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}') 

así que vamos a decir que tenía una consulta como ABC = 123 = 456 & efg. Ahora, antes del análisis, su consulta se está convirtiendo en algo así como {"abc": "123", "efg": "456"}. Ahora, cuando lo analice, le dará su consulta en el objeto json.

Answer 8

window.location.href.slice(window.location.href.indexOf('?') + 1);