जावास्क्रिप्ट के साथ वर्तमान URL से क्वेरी स्ट्रिंग कैसे प्राप्त करें?

Question

मेरे पास इस तरह का URL है:

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

?साइन (क्वेरी स्ट्रिंग) के बाद विवरण प्राप्त करने के लिए मुझे क्या करना चाहिए - वह है ProjectID=462। मैं जावास्क्रिप्ट का उपयोग करके कैसे प्राप्त कर सकता हूं?

मैंने अब तक जो किया है वह यह है:

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

मुझे नहीं पता कि आगे क्या करना है।

Comments

इस चेक stackoverflow.com/questions/901115/...

— slash197

@Cupcake: यह सवाल मापदंडों को निकालने के बारे में है, यहाँ केवल प्राप्त करने के बारे में हैlocation.search

— बरगी

फिर से खोलने के लिए मतदान, चिह्नित डुप्लिकेट एक पुस्तकालय के लिए एक अनुरोध है, जबकि यह प्रश्न js कोड प्राप्त करने के बारे में है।

— 1615903

जीईटी मापदंडों से मूल्य प्राप्त करने के लिए कैसे

— दुर्गपाल सिंह

क्या इससे आपके सवाल का जवाब मिलता है? मैं जावास्क्रिप्ट में क्वेरी स्ट्रिंग मान कैसे प्राप्त कर सकता हूं?

— चमारा अबेसेकारा

Answer 1

के बारे में MDN लेख पर एक नज़र है window.location।

में QueryString उपलब्ध है window.location.search।

समाधान जो विरासत ब्राउज़र में भी काम करता है

एमडीएन एक उदाहरण प्रदान करता है (उपरोक्त संदर्भित लेख में अब उपलब्ध नहीं है) कि क्वैश्चर स्ट्रिंग में उपलब्ध एक कुंजी के मूल्य को कैसे प्राप्त करें। कुछ इस तरह:

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

आधुनिक ब्राउज़रों में

आधुनिक ब्राउज़रों में आपके पास searchParamsURL इंटरफ़ेस की संपत्ति है, जो URLSearchParams ऑब्जेक्ट लौटाता है । लौटी हुई वस्तु में कई सुविधाजनक तरीके हैं, जिसमें एक गेट-विधि भी शामिल है। तो उपरोक्त उदाहरण के बराबर होगा:

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

URLSearchParams इंटरफ़ेस भी एक क्वेरी स्ट्रिंग प्रारूप में पार्स तार करने के लिए इस्तेमाल किया जा सकता है, और उन्हें एक आसान URLSearchParams वस्तु में बदल जाते हैं।

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

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

ध्यान दें कि इस इंटरफ़ेस पर ब्राउज़र समर्थन अभी भी सीमित है, इसलिए यदि आपको विरासत ब्राउज़रों का समर्थन करने की आवश्यकता है, तो पहले उदाहरण के साथ रहें या पॉलीमिल का उपयोग करें ।

Comments

बस एक ध्यान दें: हमेशा encodeURIComponent/decodeURIComponentescape/unescape

— बजे के

यदि हम getQueryStringValueब्राउज़रों के ?foo=bar&foo1=bar1लिए मान प्राप्त करने का प्रयास करते हैं foo, तो यह रिटर्न के लिए विरासत ब्राउज़रों के लिए पहला कार्य नहीं है empty string।

— फरहान चौहान

पुराने ब्राउज़र (IE) URLSearchParams के लिए पॉलीफ़िल का

— प्रत्यूष

@Pratyush हाँ मैं इस बात का उल्लेख करता हूं कि उत्तर में, अधिक लोकप्रिय और अधिक बार अपडेट किए गए url-search-params-polyfill पैकेज के संदर्भ में ।

— क्रिस्टोफर एलियासन

Answer 2

सहितwindow.location.search सब कुछ प्राप्त करने के लिए उपयोग करें? ?

उदाहरण:

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

Comments

या इससे भी सरल:let querystring = window.location.search.substring(1);

— ओलिब्रे

Answer 3

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

Comments

प्रतिभाशाली! बहुत बहुत धन्यवाद।

— Ron16

अच्छी एप्रोच। धन्यवाद। एक लिट बिट इसे ठीक करें: पूरे चेक की जगह (!) स्ट्रिंग। हमें पहले चार को हटाने की जरूरत है। अनावश्यक छोरों को हटाना। परिणाम: window.location.search window.location.search.substr (1) .plplit ("&") .reduce ((acc, param) => {const [कुंजी, मूल्य] = param.plplit ("=") ; वापसी {... एसीसी, [कुंजी]: मूल्य};}, {})

— निकिता

Answer 4

यह एक वैश्विक फ़ंक्शन को मैप के रूप में क्वेरीस्ट्रिंग चर तक पहुंचने के लिए जोड़ देगा।

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

का आनंद लें।

Answer 5

आप उपयोग करना हुआ तो टाइपप्रति और डोम अपने में lib की tsconfig.jsonहै, तो आप कर सकते हैं:

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 6

आप इस फ़ंक्शन का उपयोग कर सकते हैं; आईडी = से विभाजित स्ट्रिंग के लिए

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

यहाँ बेला है

Answer 7

आप इसका उपयोग परम खोज नाम के माध्यम से प्रत्यक्ष खोज मूल्य के लिए कर सकते हैं।

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

Answer 8

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

Answer 9

आप URL के क्वेरी भाग को प्राप्त करने के लिए ऑब्जेक्ट की searchसंपत्ति का उपयोग कर सकते हैं window.location। ध्यान दें कि इसमें शुरुआत में प्रश्न चिह्न (?) शामिल है, बस उस स्थिति में जो आपको इसे पार्स करने के लिए कैसे प्रभावित करता है।

Answer 10

आपको URL API पर एक नज़र डालनी चाहिए, जिसमें इसे प्राप्त करने के लिए सहायक विधियाँ हैं URLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

यह वर्तमान में सभी आधुनिक ब्राउज़रों द्वारा समर्थित नहीं है, इसलिए इसे पॉलीफ़िल करना न भूलें ( https://fa.polyfill.io/ का उपयोग करके उपलब्ध पॉलीफ़िल )।

Answer 11

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

अब आपके पास queryString में क्वेरी भाग है

पहले प्रतिस्थापित सभी सफेद रिक्त स्थान को हटा देगा, दूसरा सभी 'और' भाग को "," के साथ बदल देगा और अंत में तीसरा स्थान "=" संकेतों के स्थान पर ":" डाल देगा।

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

तो मान लें कि आपके पास abc = 123 & efg = 456 जैसी क्वेरी है । अब पार्स करने से पहले, आपकी क्वेरी को {"abc": "123", "efg": "456"} जैसे कुछ में परिवर्तित किया जा रहा है। अब जब आप इसे पार्स करेंगे, तो यह आपको json ऑब्जेक्ट में आपकी क्वेरी देगा।

Comments

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, लेकिन समस्या को हल करने के तरीके के बारे में अतिरिक्त संदर्भ प्रदान करता है और यह समस्या को हल करता है ताकि उत्तर के दीर्घकालिक मूल्य में सुधार हो सके।

— बडाकाडबरा

Answer 12

इसे सरणी में बदलें फिर '?' के साथ विभाजित करें

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

url.split('?')[1];     //ProjectID=462

Answer 13

q={};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);q;

Answer 14

इसको आजमाओ

/**
 * 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 http: //example.com&this=chicken&that=sandwich है । आप इस, और दूसरे का मान प्राप्त करना चाहते हैं।

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

यदि आप विंडो में एक के अलावा किसी अन्य URL का उपयोग करना चाहते हैं, तो आप दूसरे तर्क के रूप में एक पास कर सकते हैं।

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

संदर्भ

Answer 15

मुझे लगता है कि यह किसी भी सरल 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 )