Wie erhalte ich die Abfragezeichenfolge von der aktuellen URL mit JavaScript?

Ich habe eine URL wie diese:

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

Was ich tun muss, ist, die Details nach dem ?Zeichen (Abfragezeichenfolge) zu erhalten - das heißt ProjectID=462. Wie kann ich das mit JavaScript bekommen?

Was ich bisher gemacht habe ist folgendes:

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

Ich weiß nicht, was ich als nächstes tun soll.

Schauen Sie sich den MDN-Artikel über an window.location.

Der QueryString ist in verfügbar window.location.search.

Lösung, die auch in älteren Browsern funktioniert

MDN bietet ein Beispiel (im oben genannten Artikel nicht mehr verfügbar), wie der Wert eines einzelnen Schlüssels abgerufen wird, der im QueryString verfügbar ist. Etwas wie das:

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

In modernen Browsern

In modernen Browsern haben Sie die searchParamsEigenschaft der URL-Schnittstelle, die ein URLSearchParams- Objekt zurückgibt . Das zurückgegebene Objekt verfügt über eine Reihe praktischer Methoden, einschließlich einer get-Methode. Das Äquivalent des obigen Beispiels wäre also:

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

Die URLSearchParams- Oberfläche kann auch verwendet werden, um Zeichenfolgen in einem Querystring-Format zu analysieren und sie in ein praktisches URLSearchParams-Objekt umzuwandeln.

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

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

Beachten Sie, dass die Browserunterstützung für diese Benutzeroberfläche immer noch eingeschränkt ist. Wenn Sie also ältere Browser unterstützen müssen, bleiben Sie beim ersten Beispiel oder verwenden Sie eine Polyfüllung .

Verwenden Sie window.location.search, um alles nach dem ? Einschließen zu erhalten?

Beispiel:

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

Dadurch wird eine globale Funktion hinzugefügt, um als Map auf die queryString-Variablen zuzugreifen.

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

Genießen.

Wenn Sie zufällig verwenden Typoskript und haben dom in Ihrem den lib von tsconfig.json, können Sie tun:

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

Sie können diese Funktion für geteilte Zeichenfolgen von? Id = verwenden

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

Hier ist die Geige

Sie können dies für den direkten Suchwert über den Parameternamen verwenden.

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

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

Sie können die searchEigenschaft des window.locationObjekts verwenden, um den Abfrageteil der URL abzurufen. Beachten Sie, dass das Fragezeichen (?) Am Anfang enthalten ist, nur für den Fall, dass dies Auswirkungen darauf hat, wie Sie es analysieren möchten.

Sie sollten sich die URL-API ansehen, die Hilfsmethoden enthält, um dies zu erreichen URLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Dies wird derzeit nicht von allen modernen Browsern unterstützt. Vergessen Sie also nicht, es zu füllen (Polyfill ist über https://qa.polyfill.io/ verfügbar ).

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

Jetzt haben Sie den Abfrageteil in queryString

Das erste Ersetzen entfernt alle Leerzeichen, das zweite ersetzt den gesamten '&' Teil durch ", und schließlich setzt das dritte Ersetzen": "anstelle von '=' Zeichen.

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

Angenommen , Sie hatten eine Abfrage wie abc = 123 & efg = 456 . Vor dem Parsen wird Ihre Abfrage in etwas wie {"abc": "123", "efg": "456"} konvertiert. Wenn Sie dies jetzt analysieren, erhalten Sie Ihre Abfrage im JSON-Objekt.

Konvertiere das in ein Array und teile es mit '?'

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;

Probier diese

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

Angenommen, Ihre URL lautet http: //example.com&this=chicken&that=sandwich . Sie möchten den Wert von diesem, jenem und einem anderen erhalten.

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

Wenn Sie eine andere URL als die im Fenster verwenden möchten, können Sie eine als zweites Argument übergeben.

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

Referenz

Ich denke, es ist viel sicherer, sich auf den Browser zu verlassen als auf geniale Regex:

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 )