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

Tengo una URL como esta:

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

Lo que tengo que hacer es obtener 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 esto:

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

No sé qué hacer a continuación.

Eche un vistazo al artículo de MDN sobre window.location.

QueryString está disponible en window.location.search.

Solución que también funciona en navegadores heredados

MDN proporciona un ejemplo (ya no está disponible en el artículo mencionado anteriormente) de cómo obtener el valor de una sola clave disponible en QueryString. 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 navegadores modernos

En los navegadores modernos, tiene la searchParamspropiedad de la interfaz URL, que devuelve un objeto URLSearchParams . El objeto devuelto tiene varios métodos convenientes, incluido un método get. Entonces, 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 convertirlas 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

Tenga en cuenta que la compatibilidad del navegador sigue siendo limitada en esta interfaz, por lo que si necesita admitir navegadores heredados, siga el primer ejemplo o use un polyfill .

Úselo window.location.searchpara obtener todo después de ? incluir?

Ejemplo:

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

decodeURI(window.location.search)
  .replace('?', '')
  .split('&')
  .map(param => param.split('='))
  .reduce((values, [ key, value ]) => {
    values[ key ] = value
    return values
  }, {})

Esto agregará una función global para acceder a las variables queryString 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);
    }
}

Disfrutar.

Si usó Typecript y tiene dom en su lib de tsconfig.json, puede hacer:

const url: URL = new URL(window.location.href);
const params: URLSearchParams = url.searchParams;
// get target key/value from URLSearchParams object
const yourParamValue: string = params.get('yourParamKey');

// To append, you can also leverage api to avoid the `?` check 
params.append('newKey', 'newValue');

Puede utilizar esta función para dividir la cadena de? 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í está el violín

Puede usar esto para el valor de búsqueda directa a través del nombre de parámetros.

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

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

Puede utilizar la searchpropiedad del window.locationobjeto 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 eso afecte la forma en que desea analizarlo.

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

Actualmente, esto no es compatible con todos los navegadores modernos, así que no olvide rellenarlo (Polyfill está disponible mediante https://qa.polyfill.io/ ).

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

ahora tienes la parte de consulta en queryString

El primer reemplazo eliminará todos los espacios en blanco, el segundo reemplazará toda la parte '&' con "," y finalmente el tercer reemplazo colocará ":" en lugar de los signos '='.

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

Digamos que tiene una consulta como abc = 123 & efg = 456 . Ahora, antes de analizar, su consulta se está convirtiendo en algo como {"abc": "123", "efg": "456"}. Ahora, cuando analice esto, le dará su consulta en el objeto json.

Convierta eso en una matriz y luego divídalo con '?'

var url= 'http://localhost/PMApp/temp.htm?ProjectID=462';

url.split('?')[1];     //ProjectID=462

q={};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);q;

Prueba este

/**
 * Get the value of a querystring
 * @param  {String} field The field to get the value of
 * @param  {String} url   The URL to get the value from (optional)
 * @return {String}       The field value
 */
var getQueryString = function ( field, url ) {
    var href = url ? url : window.location.href;
    var reg = new RegExp( '[?&]' + field + '=([^&#]*)', 'i' );
    var string = reg.exec(href);
    return string ? string[1] : null;
};

Supongamos que su URL es http: //example.com&this=chicken&that=sandwich . Quieres obtener el valor de esto, aquello y otro.

var thisOne = getQueryString('this'); // returns 'chicken'
var thatOne = getQueryString('that'); // returns 'sandwich'
var anotherOne = getQueryString('another'); // returns null

Si desea utilizar una URL distinta a la de la ventana, puede pasar una como segundo argumento.

var yetAnotherOne = getQueryString('example', 'http://another-example.com&example=something'); // returns 'something'

Referencia

Creo que es mucho más seguro confiar en el navegador que en cualquier expresión regular ingeniosa:

const parseUrl = function(url) { 
  const a = document.createElement('a')
  a.href = url
  return {
    protocol: a.protocol ? a.protocol : null,
    hostname: a.hostname ? a.hostname : null,
    port: a.port ? a.port : null,
    path: a.pathname ? a.pathname : null,
    query: a.search ? a.search : null,
    hash: a.hash ? a.hash : null,
    host: a.host ? a.host : null  
  }
}

console.log( parseUrl(window.location.href) ) //stacksnippet
//to obtain a query
console.log( parseUrl( 'https://example.com?qwery=this').query )