web-dev-qa-db-fra.com

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

J'ai une URL comme ceci:

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 ProjectID=462. Comment puis-je obtenir cela en utilisant JavaScript?

Ce que j'ai fait jusqu'à présent, c'est ceci:

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

Je ne sais pas quoi faire ensuite.

javascriptquery-string
87
AbdulAziz

Jetez un coup d'œil au article de MDN à propos de window.location.

QueryString est disponible dans window.location.search.

Solution fonctionnant également dans les anciens navigateurs

MDN fournit un exemple (qui n'est plus disponible dans l'article référencé ci-dessus) sur la méthode permettant d'obtenir la valeur d'une clé unique disponible dans 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 propriété searchParams de l'interface URL, qui renvoie un objet RLSearchParams . L'objet renvoyé 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 RLSearchParams 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 très utile, URLSearchParams.

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. Si vous devez prendre en charge les navigateurs existants, restez-en au premier exemple ou utilisez un polyfill . .

196
Christofer Eliasson

Utilisez window.location.search pour tout récupérer après ?y compris ?

Exemple:

var url = window.location.search;
url = url.replace("?", ''); // remove the ?
alert(url); //alerts ProjectID=462 is your case
51
Starx
decodeURI(window.location.search)
  .replace('?', '')
  .split('&')
  .map(param => param.split('='))
  .reduce((values, [ key, value ]) => {
    values[ key ] = value
    return values
  }, {})
10
Danny Fenstermaker

Cela ajoutera une fonction globale pour accéder aux variables queryString en tant que 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.

7
roydukkey

Vous pouvez utiliser cette fonction pour scinder une 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

4
Anupam Kansal
  window.location.href.slice(window.location.href.indexOf('?') + 1);
3
Vishal P Gothi

Si vous utilisez TypeScript et que vous avez dom dans votre lib de tsconfig.json, tu peux 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');
3
LeOn - Han Li
  var queryObj = {};
   if(url.split("?").length>0){
     var queryString = url.split("?")[1];
   }

vous avez maintenant la partie requête dans queryString

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

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

Alors disons que vous aviez 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 ceci, il vous donnera votre requête en objet json.

2
Muhammad Danial Iqbal

Vous devriez jeter un coup d’œil à l’API URL qui dispose de méthodes d’aide pour y parvenir sous la forme URLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/ URLSearchParams

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

2
Grsmto

Vous pouvez utiliser la propriété search de l'objet window.location 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 affecterait la façon dont vous avez l'intention de l'analyser.

2
Anthony Grist

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

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

url.split('?')[1];     //ProjectID=462
1
jsduniya
q={};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);q;
1
insign

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

Disons que votre URL est 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 en tant que second argument.

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

référence

0
Ajay Kumar