Comment obtenir la chaîne de requête à partir de l'URL actuelle avec JavaScript?

J'ai une URL comme celle-ci:

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

Ce que je dois faire est d'obtenir les détails après le ?signe (chaîne de requête) - c'est-à-dire ProjectID=462. Comment puis-je obtenir cela en utilisant JavaScript?

Voici ce que j'ai fait jusqu'à présent:

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

Je ne sais pas quoi faire ensuite.

Jetez un œil à l' article de MDN sur window.location.

La QueryString est disponible dans window.location.search.

Solution qui fonctionne également dans les anciens navigateurs

MDN fournit un exemple (qui n'est plus disponible dans l'article référencé ci-dessus) sur la façon d'obtenir la valeur d'une clé unique disponible dans la QueryString. Quelque chose comme ça:

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

Dans les navigateurs modernes

Dans les navigateurs modernes, vous avez la searchParamspropriété de l'interface URL, qui renvoie un objet URLSearchParams . L'objet retourné a un certain nombre de méthodes pratiques, y compris une méthode get. Donc, l'équivalent de l'exemple ci-dessus serait:

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

L' interface URLSearchParams peut également être utilisée pour analyser des chaînes dans un format de chaîne de requête et les transformer en un objet URLSearchParams pratique.

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

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

Notez que la prise en charge du navigateur est toujours limitée sur cette interface, donc si vous avez besoin de prendre en charge les anciens navigateurs, restez avec le premier exemple ou utilisez un polyfill .

Utilisez window.location.searchpour tout obtenir après avoir ? inclus?

Exemple:

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

Cela ajoutera une fonction globale pour accéder aux variables queryString sous forme de carte.

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

Prendre plaisir.

Si vous avez utilisé Typescript et que vous avez dom dans votre bibliothèque de tsconfig.json, vous pouvez faire:

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

Vous pouvez utiliser cette fonction, pour séparer la chaîne 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");

voici le violon

Vous pouvez l'utiliser pour trouver une valeur directe via le nom des paramètres.

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

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

Vous pouvez utiliser la searchpropriété de l' window.locationobjet pour obtenir la partie requête de l'URL. Notez qu'il inclut le point d'interrogation (?) Au début, juste au cas où cela affecte la façon dont vous avez l'intention de l'analyser.

Vous devriez jeter un oeil à l'API URL qui a des méthodes d'aide pour y parvenir en tant que URLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Ce n'est actuellement pas pris en charge par tous les navigateurs modernes, alors n'oubliez pas de le polyfill (Polyfill disponible en utilisant https://qa.polyfill.io/ ).

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

maintenant vous avez la partie requête dans queryString

Le premier remplacement supprimera tous les espaces blancs, le second remplacera toute la partie '&' par "," et enfin le troisième remplacement mettra ":" à la place des signes '='.

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

Supposons donc que vous ayez une requête comme abc = 123 & efg = 456 . Maintenant, avant l'analyse, votre requête est convertie en quelque chose comme {"abc": "123", "efg": "456"}. Maintenant, lorsque vous analyserez cela, cela vous donnera votre requête en objet json.

Convertissez-le en tableau puis divisez-le avec '?'

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;

Essaye celui-là

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

Supposons que votre URL soit http: //example.com&this=chicken&that=sandwich . Vous voulez obtenir la valeur de ceci, cela et un autre.

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

Si vous souhaitez utiliser une URL autre que celle de la fenêtre, vous pouvez en transmettre une comme second argument.

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

Référence

Je pense qu'il est beaucoup plus sûr de s'appuyer sur le navigateur que sur n'importe quelle regex ingénieuse:

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 )