JavaScript ile mevcut URL'den sorgu dizesi nasıl elde edilir?

Bunun gibi bir URL’im var:

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

Yapmam gereken şey, ?işaretten (sorgu dizesi) sonra ayrıntıları almaktır - yani ProjectID=462. Bunu JavaScript kullanarak nasıl edinebilirim?

Şimdiye kadar yaptığım şey şu:

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

Bundan sonra ne yapacağımı bilmiyorum.

Göz at MDN makalesinde hakkındawindow.location .

QueryString window.location.search,.

Eski tarayıcılarda da çalışan çözüm

MDN , QueryString'de bulunan tek bir anahtarın değerinin nasıl alınacağına dair bir örnek (yukarıda atıfta bulunulan makalede artık mevcut değildir) sağlar . Bunun gibi bir şey:

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

Modern tarayıcılarda

Modern tarayıcılarda searchParams, bir URLSearchParams nesnesi döndüren URL arabiriminin özelliğine sahipsiniz . Döndürülen nesnenin bir get-yöntemi dahil olmak üzere bir dizi kullanışlı yöntemi vardır. Yani yukarıdaki örneğin eşdeğeri şöyle olacaktır:

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

URLSearchParams arayüzü de bir sorgu dizesi biçiminde ayrıştırma dizeleri için kullanılır ve kullanışlı URLSearchParams nesnesine dönüştürülmesi edilebilir.

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

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

Tarayıcı desteğinin bu arayüzde hala sınırlı olduğuna dikkat edin, bu nedenle eski tarayıcıları desteklemeniz gerekiyorsa, ilk örneğe bağlı kalın veya bir polyfill kullanın .

Dahilwindow.location.search ettikten sonra her şeyi almak için kullanın? ?

Misal:

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

Bu, queryString değişkenlerine bir harita olarak erişmek için global bir işlev ekleyecektir.

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

Zevk almak.

Kullanmak olduysa typescript ve sahip dom sizin de lib arasında tsconfig.json, yapabileceğiniz:

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

Bu işlevi? İd = 'den dizeyi bölmek için kullanabilirsiniz.

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

işte keman

Bunu, params adı aracılığıyla doğrudan bulma değeri için kullanabilirsiniz.

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

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

URL'nin sorgu kısmını elde etmek için nesnenin searchözelliğini kullanabilirsiniz window.location. Nasıl ayrıştırmak istediğinizi etkileme ihtimaline karşı, başında soru işaretini (?) İçerdiğini unutmayın.

Bunu başarmak için yardımcı yöntemlere sahip URL API'sine şu adresten bakmalısınız URLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Bu, şu anda tüm modern tarayıcılar tarafından desteklenmemektedir, bu yüzden çoklu doldurmayı unutmayın (Polyfill, https://qa.polyfill.io/ kullanılarak kullanılabilir ).

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

artık queryString'de sorgu kısmına sahipsiniz

İlk değiştirme tüm beyaz boşlukları kaldıracak, ikincisi tüm '&' kısmını "," ile değiştirecek ve son olarak üçüncü değiştirme "=" işaretlerinin yerine ":" koyacaktır.

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

Diyelim ki abc = 123 & efg = 456 gibi bir sorgunuz var . Şimdi ayrıştırmadan önce, sorgunuz {"abc": "123", "efg": "456"} gibi bir şeye dönüştürülüyor. Şimdi bunu ayrıştırdığınızda, sorgunuzu json nesnesinde verecektir.

Bunu diziye dönüştürdükten sonra '?'

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;

Bunu dene

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

URL'nizin http: //example.com&this=chicken&that=sandwich olduğunu varsayalım . Bunun, bunun ve başka bir şeyin değerini almak istiyorsunuz.

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

Penceredeki dışında bir URL kullanmak istiyorsanız, birini ikinci bağımsız değişken olarak iletebilirsiniz.

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

Referans

Tarayıcıya güvenmenin, ustaca yapılan herhangi bir normal ifadeden çok daha güvenli olduğunu düşünüyorum:

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 )