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

Question

J'ai une URL comme celle-ci :

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

Ce que j'ai besoin de faire, c'est de récupérer les détails après le ? (chaîne d'interrogation) - 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.

Answer 1

Jetez un coup d'œil à la Article de MDN à propos de window.location .

La QueryString est disponible dans window.location.search .

Si vous souhaitez une interface plus pratique pour travailler, vous pouvez utiliser la fonction searchParams de l'interface URL, qui renvoie un URLSearchParams objet. L'objet retourné possède un certain nombre de méthodes pratiques, dont une méthode d'obtention. Ainsi, l'équivalent de l'exemple ci-dessus serait :

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

Le site URLSearchParams peut également être utilisée pour analyser les chaînes de caractères dans un format de chaîne de recherche, 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

L'interface URLSearchParams est maintenant largement adoptée dans les navigateurs (95 %+ selon la Puis-je utiliser ), mais si vous avez besoin de prendre en charge les anciens navigateurs, vous pouvez utiliser une balise polyfill .

Answer 2

Utilisez window.location.search pour obtenir tout après ? y compris ?

Exemple :

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

Answer 3

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

Answer 4

Si vous avez utilisé Tapuscrit et ont dom dans votre lib de tsconfig.json que 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');

Answer 5

Cela ajoutera une fonction globale pour accéder aux variables queryString comme une 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);
    }
}

Profitez-en.