Bagaimana cara mendapatkan string kueri dari URL saat ini dengan JavaScript?

Saya memiliki URL seperti ini:

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

Yang perlu saya lakukan adalah mendapatkan detail setelah ?tanda (string kueri) - yaitu ProjectID=462. Bagaimana saya bisa mendapatkannya menggunakan JavaScript?

Apa yang telah saya lakukan sejauh ini adalah:

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

Saya tidak tahu apa yang harus saya lakukan selanjutnya.

Silakan lihat artikel MDN tentang window.location.

QueryString tersedia di window.location.search.

Solusi yang berfungsi di browser lama juga

MDN memberikan contoh (tidak lagi tersedia dalam artikel referensi di atas) tentang cara mendapatkan nilai kunci tunggal yang tersedia di QueryString. Sesuatu seperti ini:

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

Di browser modern

Di browser modern Anda memiliki searchParamsproperti antarmuka URL, yang mengembalikan objek URLSearchParams . Objek yang dikembalikan memiliki sejumlah metode yang mudah digunakan, termasuk metode get. Jadi padanan dari contoh di atas adalah:

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

The URLSearchParams antarmuka juga dapat digunakan untuk string parse dalam format querystring, dan mengubahnya menjadi objek URLSearchParams berguna.

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

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

Perhatikan bahwa dukungan browser masih terbatas pada antarmuka ini, jadi jika Anda perlu mendukung browser lama, tetap gunakan contoh pertama atau gunakan polyfill .

Gunakan window.location.searchuntuk mendapatkan semuanya setelah ? termasuk?

Contoh:

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

Ini akan menambahkan fungsi global untuk mengakses variabel queryString sebagai peta.

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

Nikmati.

Jika Anda kebetulan menggunakan Typecript dan memiliki dom di lib of tsconfig.jsonAnda, Anda dapat melakukan:

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

Anda dapat menggunakan fungsi ini, untuk memisahkan string dari? 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");

ini biolanya

Anda dapat menggunakan ini untuk nilai pencarian langsung melalui nama params.

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

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

Anda dapat menggunakan searchproperti window.locationobjek untuk mendapatkan bagian kueri dari URL. Perhatikan bahwa ini menyertakan tanda tanya (?) Di awal, untuk berjaga-jaga jika hal itu memengaruhi cara Anda ingin menguraikannya.

Anda harus melihat URL API yang memiliki metode pembantu untuk mencapai ini di dalamnya sebagai URLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Ini saat ini tidak didukung oleh semua browser modern, jadi jangan lupa untuk melakukan polyfill (Polyfill tersedia menggunakan https://qa.polyfill.io/ ).

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

sekarang Anda memiliki bagian kueri di queryString

Penggantian pertama akan menghapus semua spasi, yang kedua akan mengganti semua bagian '&' dengan "," dan terakhir penggantian ketiga akan menempatkan ":" di tempat tanda '='.

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

Jadi katakanlah Anda memiliki kueri seperti abc = 123 & efg = 456 . Sekarang sebelum mengurai, kueri Anda akan diubah menjadi sesuatu seperti {"abc": "123", "efg": "456"}. Sekarang ketika Anda akan mengurai ini, itu akan memberi Anda kueri Anda di objek json.

Ubah itu menjadi array lalu pisahkan dengan '?'

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;

Coba yang ini

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

Misalkan URL Anda adalah http: //example.com&this=chicken&that=sandwich . Anda ingin mendapatkan nilai ini, itu, dan lainnya.

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

Jika Anda ingin menggunakan URL selain yang ada di jendela, Anda bisa memasukkannya sebagai argumen kedua.

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

Referensi

Saya pikir jauh lebih aman untuk mengandalkan browser daripada regex yang cerdik:

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 )