javascript - मैं जावास्क्रिप्ट में क्वेरी स्ट्रिंग मान कैसे प्राप्त कर सकता हूं?




url plugins query-string (25)

JQuery (या बिना) के माध्यम से क्वेरी स्ट्रिंग मानों को पुनर्प्राप्त करने का कोई प्लग-इन तरीका है?

यदि हां, तो कैसे? यदि नहीं, तो क्या कोई प्लगइन है जो ऐसा कर सकता है?


Answers

मुझे यह पसंद है (jquery-howto.blogspot.co.uk से लिया गया):

// get an array with all querystring values
// example: var valor = getUrlVars()["valor"];
function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

मेरे लिए बहुत अच्छा काम करता है।


ES2015 (ES6)

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

JQuery के बिना

var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=', 2);
        if (p.length == 1)
            b[p[0]] = "";
        else
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));

एक यूआरएल जैसे ?topic=123&name=query+string , निम्नलिखित वापस आ जाएगा:

qs["topic"];    // 123
qs["name"];     // query string
qs["nothere"];  // undefined (object)

Google विधि

Google के कोड को getUrlParameters हुए मुझे वह विधि मिली जो उन्होंने उपयोग की: getUrlParameters

function (b) {
    var c = typeof b === "undefined";
    if (a !== h && c) return a;
    for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) {
        var l = b[f][p]("=");
        if (l !== -1) {
            var q = b[f][I](0, l),
                l = b[f][I](l + 1),
                l = l[Ca](/\+/g, " ");
            try {
                d[q] = e(l)
            } catch (A) {}
        }
    }
    c && (a = d);
    return d
}

यह obfuscated है, लेकिन यह समझ में आता है। यह काम नहीं करता है क्योंकि कुछ चर अपरिभाषित हैं।

वे यूआरएल पर पैरामीटर देखने के लिए शुरू करते हैं ? और हैश # से भी। फिर प्रत्येक पैरामीटर के लिए वे बराबर चिह्न b[f][p]("=") में विभाजित होते हैं (जो indexOf की तरह दिखता है, वे कुंजी / मान प्राप्त करने के लिए चार की स्थिति का उपयोग करते हैं)। इसे विभाजित करने के बाद वे जांचते हैं कि पैरामीटर का मान है या नहीं, अगर उसके बाद वे d के मान को स्टोर करते हैं, अन्यथा वे अभी भी जारी रखते हैं।

अंत में ऑब्जेक्ट d वापस आ गया है, भागने और + चिह्न को संभालने। यह वस्तु मेरी तरह ही है, यह वही व्यवहार है।

एक jQuery प्लगइन के रूप में मेरी विधि

(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);

            if (param.length !== 2)
                continue;

            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }

        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

प्रयोग

//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"

//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }

//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object

//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

प्रदर्शन परीक्षण (रेगेक्स विधि के खिलाफ विभाजित विधि) ( jsPerf )

तैयारी कोड: विधियों की घोषणा

स्प्लिट टेस्ट कोड

var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];

Regex परीक्षण कोड

var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");

विंडोज सर्वर 2008 आर 2/7 x64 पर फ़ायरफ़ॉक्स 4.0 x86 में परीक्षण

  • विभाजन विधि : 144,780 ± 2.17% सबसे तेज़
  • रेगेक्स विधि : 13,8 9 1 ± 0.85% | 90% धीमी

http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash
  • नियमित कुंजी / मूल्य जोड़ी ( ?param=value)
  • कुंजी w / o मान ( ?param: कोई बराबर चिह्न या मान नहीं)
  • कुंजी w / खाली मान ( ?param=: बराबर चिह्न, लेकिन बराबर चिह्न के दाईं ओर कोई मान नहीं)
  • दोहराया कुंजी ( ?param=1&param=2)
  • रिक्त कुंजी हटाता है ( ?&&: कोई कुंजी या मान नहीं)

कोड:

  • var queryString = window.location.search || '';
    var keyValPairs = [];
    var params      = {};
    queryString     = queryString.substr(1);
    
    if (queryString.length)
    {
       keyValPairs = queryString.split('&');
       for (pairNum in keyValPairs)
       {
          var key = keyValPairs[pairNum].split('=')[0];
          if (!key.length) continue;
          if (typeof params[key] === 'undefined')
             params[key] = [];
          params[key].push(keyValPairs[pairNum].split('=')[1]);
       }
    }
    

कैसे कॉल करें:

  • params['key'];  // returns an array of values (1..n)
    

आउटपुट:

  • key            ["value"]
    keyemptyvalue  [""]
    keynovalue     [undefined, "nowhasvalue"]
    

मुझे रयान फ़ेलन का समाधान पसंद है । लेकिन मुझे इसके लिए jQuery को विस्तारित करने का कोई बिंदु नहीं दिख रहा है? JQuery कार्यक्षमता का कोई उपयोग नहीं है।

दूसरी ओर मुझे Google क्रोम में अंतर्निहित फ़ंक्शन पसंद है: window.location.get पैरामीटर।

तो इसका उपयोग क्यों नहीं करें? ठीक है, अन्य ब्राउज़रों के पास नहीं है। तो चलिए इस फ़ंक्शन को बनाते हैं यदि यह अस्तित्व में नहीं है:

if (!window.location.getParameter ) {
  window.location.getParameter = function(key) {
    function parseParams() {
        var params = {},
            e,
            a = /\+/g,  // Regex for replacing addition symbol with a space
            r = /([^&=]+)=?([^&]*)/g,
            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
            q = window.location.search.substring(1);

        while (e = r.exec(q))
            params[d(e[1])] = d(e[2]);

        return params;
    }

    if (!this.queryStringParams)
        this.queryStringParams = parseParams(); 

    return this.queryStringParams[key];
  };
}

यह फ़ंक्शन रयान फ़ेलन से कम या कम है, लेकिन यह अलग-अलग लपेटा गया है: स्पष्ट नाम और अन्य जावास्क्रिप्ट पुस्तकालयों की कोई निर्भरता नहीं है। मेरे ब्लॉग पर इस समारोह के बारे में अधिक जानकारी


PHP $_GET सरणी के समान ऑब्जेक्ट प्राप्त करने का एक तेज़ तरीका यहां दिया गया है:

function get_query(){
    var url = location.search;
    var qs = url.substring(url.indexOf('?') + 1).split('&');
    for(var i = 0, result = {}; i < qs.length; i++){
        qs[i] = qs[i].split('=');
        result[qs[i][0]] = decodeURIComponent(qs[i][1]);
    }
    return result;
}

उपयोग:

var $_GET = get_query();

क्वेरी स्ट्रिंग x=5&y&z=hello&x=6 यह ऑब्जेक्ट देता है:

{
  x: "6",
  y: undefined,
  z: "hello"
}

मुझे क्वेरी स्ट्रिंग से ऑब्जेक्ट चाहिए, और मुझे बहुत सारे कोड से नफरत है। यह ब्रह्मांड में सबसे मजबूत नहीं हो सकता है, लेकिन यह कोड की कुछ पंक्तियां हैं।

var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
    q[i.split('=')[0]]=i.split('=')[1];
});

एक यूआरएल this.htm?hello=world&foo=barबनाना होगा:

{hello:'world', foo:'bar'}

से MDN :

function loadPageVar (sVar) {
  return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

alert(loadPageVar("name"));

यदि आप jQuery का उपयोग कर रहे हैं, तो आप एक लाइब्रेरी का उपयोग कर सकते हैं, जैसे कि jQuery बीबीक्यू: बैक बटन और क्वेरी लाइब्रेरी

... jQuery बीबीक्यू एक हैश राज्य प्रबंधन, और खंड / क्वेरी स्ट्रिंग पार्स और उपयोगिता विधियों को मर्ज करने के साथ एक पूर्ण .deparam() विधि प्रदान करता है।

संपादित करें: Deparam जोड़ना उदाहरण:

 var DeparamExample = function() {
            var params = $.deparam.querystring();

            //nameofparam is the name of a param from url
            //code below will get param if ajax refresh with hash
            if (typeof params.nameofparam == 'undefined') {
                params = jQuery.deparam.fragment(window.location.href);
            }
            
            if (typeof params.nameofparam != 'undefined') {
                var paramValue = params.nameofparam.toString();
                  
            }
        };

यदि आप केवल सादा जावास्क्रिप्ट का उपयोग करना चाहते हैं, तो आप इसका उपयोग कर सकते हैं ...

var getParamValue = (function() {
    var params;
    var resetParams = function() {
            var query = window.location.search;
            var regex = /[?&;](.+?)=([^&;]+)/g;
            var match;

            params = {};

            if (query) {
                while (match = regex.exec(query)) {
                    params[match[1]] = decodeURIComponent(match[2]);
                }
            }    
        };

    window.addEventListener
    && window.addEventListener('popstate', resetParams);

    resetParams();

    return function(param) {
        return params.hasOwnProperty(param) ? params[param] : null;
    }

})();​

नए एचटीएमएल इतिहास एपीआई और विशेष रूप से history.pushState() और history.replaceState() , यूआरएल बदल सकता है जो पैरामीटर और उनके मूल्यों के कैश को अमान्य कर देगा।

जब भी इतिहास बदलता है तो यह संस्करण मापदंडों के आंतरिक कैश को अपडेट करेगा।


कोड गोल्फ:

var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&");
for (var i in a) {
    var s = a[i].split("=");
    a[i]  = a[unescape(s[0])] = unescape(s[1]);
}

इसे प्रदर्शित करें!

for (i in a) {
    document.write(i + ":" + a[i] + "<br/>");   
};

मेरे मैक पर: test.htm?i=can&has=cheezburgerप्रदर्शित करता है

0:can
1:cheezburger
i:can
has:cheezburger

tl; डॉ

एक त्वरित, पूर्ण समाधान , जो बहुविकल्पीय कुंजी और एन्कोडेड वर्णों को संभालता है।

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)})

//using ES6   (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})
मल्टी लाइन:
var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
    var s = item.split("="),
        k = s[0],
        v = s[1] && decodeURIComponent(s[1]); //  null-coalescing / short-circuit
    //(k in qd) ? qd[k].push(v) : qd[k] = [v]
    (qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit
})

यह सब कोड क्या है ...
"null-coalescing" , शॉर्ट-सर्किट मूल्यांकन
ES6 विनाशकारी कार्य , तीर कार्य , टेम्पलेट तार

उदाहरण:
"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> qd.a[1]    // "5"
> qd["a"][1] // "5"


और पढ़ें ... वेनिला जावास्क्रिप्ट समाधान के बारे में।

यूआरएल के विभिन्न हिस्सों का उपयोग करने के लिए location.(search|hash) उपयोग करें location.(search|hash)

सबसे आसान (डमी) समाधान

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
  • खाली कुंजी सही ढंग से संभालती है।
  • अंतिम मूल्य के साथ बहु-कुंजी ओवरराइड करता है।
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

बहु मूल्यवान कुंजी

सरल कुंजी जांच (item in dict) ? dict.item.push(val) : dict.item = [val] (item in dict) ? dict.item.push(val) : dict.item = [val]

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})
  • अब इसके बजाय सरणी देता है।
  • qd.key[index] या qd[key][index] द्वारा मानों तक qd.key[index]
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

एनकोडेड अक्षर?

दूसरे या दोनों विभाजन के लिए decodeURIComponent() प्रयोग करें।

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v]})
उदाहरण:
"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: ["undefined"]  // decodeURIComponent(undefined) returns "undefined" !!!*
e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]


टिप्पणियों से

* !!! कृपया ध्यान दें, कि decodeURIComponent(undefined) स्ट्रिंग "undefined" लौटाता है। समाधान && एक साधारण उपयोग में निहित है, जो सुनिश्चित करता है कि decodeURIComponent() को अपरिभाषित मानों पर नहीं कहा जाता है। (शीर्ष पर "पूर्ण समाधान" देखें।)

v = v && decodeURIComponent(v);


यदि क्वेरीस्ट्रिंग खाली है ( location.search == "" ), परिणाम कुछ हद तक भ्रामक है qd == {"": undefined} । पार्सिंग फ़ंक्शन पसंदो लॉन्च करने से पहले क्वेरीस्ट्रिंग की जांच करने का सुझाव दिया गया है:

if (location.search) location.search.substr(1).split("&").forEach(...)

URLSearchParams

फ़ायरफ़ॉक्स 44+, ओपेरा 36+, एज 17+, सफारी 10.3+ और क्रोम 49+ URLSearchParams API का समर्थन करते हैं:

IE के स्थिर संस्करणों के लिए Google द्वारा सुझाए गए URLSearchParams पॉलीफिल हैं

यह W3C द्वारा मानकीकृत नहीं है, लेकिन यह व्हाटव्यूजी द्वारा एक जीवित मानक है।

आप इसे स्थान पर उपयोग कर सकते हैं, लेकिन आपको इसे हटाने की जरूरत है ? प्रश्न चिह्न (उदाहरण के लिए, .slice(1) ):

let params = new URLSearchParams(location.search);

या

let params = (new URL(location)).searchParams;

या निश्चित रूप से किसी भी यूआरएल पर:

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);

आप यूआरएल ऑब्जेक्ट पर .searchParams प्रॉपर्टी का उपयोग करके भी .searchParams प्राप्त कर सकते हैं, जैसे:

let params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2" 

आप get(KEY) माध्यम से पैरामीटर को पढ़ / सेट करते get(KEY) , set(KEY, VALUE) , append(KEY, VALUE) API। आप सभी मानों पर भी पुनरावृत्त कर सकते हैं for (let p of params) {}

एक संदर्भ कार्यान्वयन और एक नमूना पृष्ठ लेखा परीक्षा और परीक्षण के लिए उपलब्ध हैं।


ये सभी महान जवाब हैं, लेकिन मुझे कुछ और मजबूत की जरूरत थी, और सोचा कि आप सभी जो मैंने बनाया है उसे पसंद करना चाहेंगे।

यह एक साधारण लाइब्रेरी विधि है जो यूआरएल पैरामीटर के विच्छेदन और हेरफेर करता है। स्थैतिक विधि में निम्नलिखित उप विधियां हैं जिन्हें विषय URL पर बुलाया जा सकता है:

  • getHost
  • getPath
  • getHash
  • setHash
  • getParams
  • getQuery
  • setParam
  • getParam
  • hasParam
  • removeParam

उदाहरण:

URLParser(url).getParam('myparam1')
var url = "http://www.test.com/folder/mypage.html?myparam1=1&myparam2=2#something";

function URLParser(u){
    var path="",query="",hash="",params;
    if(u.indexOf("#") > 0){
        hash = u.substr(u.indexOf("#") + 1);
        u = u.substr(0 , u.indexOf("#"));
    }
    if(u.indexOf("?") > 0){
        path = u.substr(0 , u.indexOf("?"));
        query = u.substr(u.indexOf("?") + 1);
        params= query.split('&');
    }else
        path = u;
    return {
        getHost: function(){
            var hostexp = /\/\/([\w.-]*)/;
            var match = hostexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getPath: function(){
            var pathexp = /\/\/[\w.-]*(?:\/([^?]*))/;
            var match = pathexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getHash: function(){
            return hash;
        },
        getParams: function(){
            return params
        },
        getQuery: function(){
            return query;
        },
        setHash: function(value){
            if(query.length > 0)
                query = "?" + query;
            if(value.length > 0)
                query = query + "#" + value;
            return path + query;
        },
        setParam: function(name, value){
            if(!params){
                params= new Array();
            }
            params.push(name + '=' + value);
            for (var i = 0; i < params.length; i++) {
                if(query.length > 0)
                    query += "&";
                query += params[i];
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
        getParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return decodeURIComponent(pair[1]);
                }
            }
            console.log('Query variable %s not found', name);
        },
        hasParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return true;
                }
            }
            console.log('Query variable %s not found', name);
        },
        removeParam: function(name){
            query = "";
            if(params){
                var newparams = new Array();
                for (var i = 0;i < params.length;i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) != name)
                          newparams .push(params[i]);
                }
                params = newparams;
                for (var i = 0; i < params.length; i++) {
                    if(query.length > 0)
                        query += "&";
                    query += params[i];
                }
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
    }
}


document.write("Host: " + URLParser(url).getHost() + '<br>');
document.write("Path: " + URLParser(url).getPath() + '<br>');
document.write("Query: " + URLParser(url).getQuery() + '<br>');
document.write("Hash: " + URLParser(url).getHash() + '<br>');
document.write("Params Array: " + URLParser(url).getParams() + '<br>');
document.write("Param: " + URLParser(url).getParam('myparam1') + '<br>');
document.write("Has Param: " + URLParser(url).hasParam('myparam1') + '<br>');

document.write(url + '<br>');

// Remove the first parameter
url = URLParser(url).removeParam('myparam1');
document.write(url + ' - Remove the first parameter<br>');

// Add a third parameter
url = URLParser(url).setParam('myparam3',3);
document.write(url + ' - Add a third parameter<br>');

// Remove the second parameter
url = URLParser(url).removeParam('myparam2');
document.write(url + ' - Remove the second parameter<br>');

// Add a hash
url = URLParser(url).setHash('newhash');
document.write(url + ' - Set Hash<br>');

// Remove the last parameter
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove the last parameter<br>');

// Remove a parameter that doesn't exist
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove a parameter that doesn\"t exist<br>');

अद्यतन: सितंबर 2018

आप URLSearchParams का उपयोग कर सकते हैं जो कि सरल है और इसका अच्छा ब्राउज़र समर्थन है

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

orignal

आपको उस उद्देश्य के लिए jQuery की आवश्यकता नहीं है। आप केवल कुछ शुद्ध जावास्क्रिप्ट का उपयोग कर सकते हैं:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

उपयोग:

// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)


नोट: यदि पैरामीटर कई बार मौजूद है ( ?foo=lorem&foo=ipsum ), तो आपको पहला मान ( lorem ) मिलेगा। इसके बारे में कोई मानक नहीं है और उपयोग अलग-अलग हैं, उदाहरण के लिए यह प्रश्न देखें: डुप्लिकेट HTTP की क्वेरी की स्थिति HTTP कुंजी प्राप्त करें
नोट: फ़ंक्शन केस-संवेदी है। यदि आप केस-असंवेदनशील पैरामीटर नाम पसंद करते हैं, तो RegExp में 'i' संशोधक जोड़ें

यह एक ही परिणाम प्राप्त करने के लिए नए URLSearchParams चश्मे के आधार पर एक अद्यतन है जो अधिक संक्षेप में प्राप्त करता है। नीचे " URLSearchParams " नाम का उत्तर देखें।


Roshambo jQuery विधि डीकोड यूआरएल का ख्याल नहीं रख रहा था

http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/

रिटर्न स्टेटमेंट में जोड़ने के दौरान बस उस क्षमता को भी जोड़ा गया

return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;

अब आप अद्यतन गिस्ट पा सकते हैं:

$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
}

यह एक ऐसा काम है जिसे मैंने थोड़ी देर पहले बनाया था और मैं काफी खुश हूं। यह मामला संवेदनशील नहीं है - जो आसान है। साथ ही, यदि अनुरोध किया गया क्यूएस मौजूद नहीं है, तो यह केवल खाली स्ट्रिंग देता है।

मैं इसका संकुचित संस्करण उपयोग करता हूं। मैं नौसिखियों के प्रकारों के लिए असंपीड़ित पोस्ट कर रहा हूं ताकि यह स्पष्ट हो सके कि क्या हो रहा है।

मुझे यकीन है कि इसे तेजी से काम करने के लिए अनुकूलित या अलग किया जा सकता है, लेकिन मुझे हमेशा जो चाहिए वह हमेशा अच्छा काम करता है।

का आनंद लें।

function getQSP(sName, sURL) {
    var theItmToRtn = "";
    var theSrchStrg = location.search;
    if (sURL) theSrchStrg = sURL;
    var sOrig = theSrchStrg;
    theSrchStrg = theSrchStrg.toUpperCase();
    sName = sName.toUpperCase();
    theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&";
    var theSrchToken = "&" + sName + "=";
    if (theSrchStrg.indexOf(theSrchToken) != -1) {
        var theSrchTokenLth = theSrchToken.length;
        var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth;
        var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart);
        theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign));
    }
    return unescape(theItmToRtn);
}

एंडी ई के पूर्ण समाधान वाले jQuery प्लगइन में उत्कृष्ट समाधान बनाने में मेरा स्टैब यहां दिया गया है:

;(function ($) {
    $.extend({      
        getQueryString: function (name) {           
            function parseParams() {
                var params = {},
                    e,
                    a = /\+/g,  // Regex for replacing addition symbol with a space
                    r = /([^&=]+)=?([^&]*)/g,
                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
                    q = window.location.search.substring(1);

                while (e = r.exec(q))
                    params[d(e[1])] = d(e[2]);

                return params;
            }

            if (!this.queryStringParams)
                this.queryStringParams = parseParams(); 

            return this.queryStringParams[name];
        }
    });
})(jQuery);

वाक्यविन्यास है:

var someVar = $.getQueryString('myParam');

दोनों ओर से लाभदायक!


उस प्रश्न के शीर्ष उत्तर के साथ समस्या यह है कि यह # के बाद रखा गया समर्थित पैरामीटर नहीं है, लेकिन कभी-कभी यह मान भी प्राप्त करने की आवश्यकता होती है।

मैंने जवाब को संशोधित करने के लिए एक हैश साइन के साथ एक पूर्ण क्वेरी स्ट्रिंग को भी पार्स करने के लिए:

var getQueryStringData = function(name) {
    var result = null;
    var regexS = "[\\?&#]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec('?' + window.location.href.split('?')[1]);
    if (results != null) {
        result = decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    return result;
};

बस एक और सिफारिश। प्लगइन Purl एंकर, मेजबान, आदि सहित यूआरएल के सभी हिस्सों को पुनः प्राप्त करने की अनुमति देता है।

इसका उपयोग jQuery के साथ या उसके बिना किया जा सकता है।

उपयोग बहुत सरल और ठंडा है:

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

हालांकि, 11 नवंबर, 2014 तक, Purl अब बनाए रखा नहीं है और लेखक इसके बजाय URI.js का उपयोग करने की सिफारिश करता है। JQuery प्लगइन अलग है कि यह तत्वों पर केंद्रित है - स्ट्रिंग के साथ उपयोग के लिए, बस URI उपयोग सीधे या बिना jQuery के करें। इसी प्रकार का कोड here , फुलर डॉक्स जैसा दिखता here :

var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'

function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');

    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}​

और इस तरह आप यूआरएल मानते हुए इस समारोह का उपयोग कर सकते हैं

http://dummy.com/?stringtext=jquery&stringword=jquerybyexample

var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');

Snipplr.com पर Roshambo jQuery के साथ यूआरएल पैरामीटर प्राप्त करने में वर्णित यह प्राप्त करने के लिए एक सरल लिपि है बेहतर अपनी लिपि के साथ आप बस अपने इच्छित पैरामीटर को आसानी से खींच सकते हैं।

यहां गिस्ट है:

$.urlParam = function(name, url) {
    if (!url) {
     url = window.location.href;
    }
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
    if (!results) { 
        return undefined;
    }
    return results[1] || undefined;
}

फिर बस क्वेरी पैरा स्ट्रिंग से अपने पैरामीटर प्राप्त करें।

तो अगर यूआरएल / क्वेरी स्ट्रिंग xyz.com/index.html?lang=de

बस var langval = $.urlParam('lang'); कॉल करें var langval = $.urlParam('lang'); , और आपको मिल गया है।

UZBEKJON पर भी एक महान ब्लॉग पोस्ट है, jQuery के साथ यूआरएल पैरामीटर और मूल्य प्राप्त करें


हमने अभी arg.js जारी किया है , एक परियोजना जिसका उद्देश्य एक बार और सभी के लिए इस समस्या को हल करना है। यह परंपरागत रूप से इतना कठिन रहा है लेकिन अब आप कर सकते हैं:

var name = Arg.get("name");

या पूरा पूरा हो रहा है:

var params = Arg.all();

और यदि आप के बीच के अंतर की परवाह करते हैं ?query=trueऔर #hash=trueफिर आप Arg.query()और Arg.hash()विधियों का उपयोग कर सकते हैं ।


यहां पोस्ट किए गए कुछ समाधान अक्षम हैं। जब भी स्क्रिप्ट को पैरामीटर तक पहुंचने की आवश्यकता होती है तो नियमित अभिव्यक्ति खोज को दोहराएं पूरी तरह से अनावश्यक है, पैरामीटर को एक एसोसिएटिव-सरणी शैली ऑब्जेक्ट में विभाजित करने के लिए एक एकल फ़ंक्शन पर्याप्त है। यदि आप एचटीएमएल 5 हिस्ट्री एपीआई के साथ काम नहीं कर रहे हैं, तो प्रति पेज लोड के बाद यह केवल आवश्यक है। यहां अन्य सुझाव भी URL को सही तरीके से डीकोड करने में विफल रहते हैं।

var urlParams;
(window.onpopstate = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);

    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

उदाहरण क्वेरीस्ट्रिंग:

?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty

परिणाम:

 urlParams = {
    enc: " Hello ",
    i: "main",
    mode: "front",
    sid: "de8d49b78a85a322c4155015fdce22c4",
    empty: ""
}

alert(urlParams["mode"]);
// -> "front"

alert("empty" in urlParams);
// -> true

सरणी शैली क्वेरी स्ट्रिंग को संभालने के लिए यह आसानी से सुधार किया जा सकता है। इसका एक उदाहरण here , लेकिन चूंकि सरणी-शैली मानकों को आरएफसी 3 9 86 में परिभाषित नहीं किया गया है, इसलिए मैं इस कोड को स्रोत कोड के साथ प्रदूषित नहीं करूंगा। "प्रदूषित" संस्करण में रुचि रखने वालों के लिए, नीचे कैंपबेल के उत्तर को देखें

साथ ही, टिप्पणियों में बताया गया है ; key=value जोड़े के लिए एक कानूनी डेलीमीटर है। इसे संभालने के लिए एक और जटिल regex की आवश्यकता होगी ; या, जो मुझे लगता है अनावश्यक है क्योंकि यह दुर्लभ है ; प्रयोग किया जाता है और मैं और भी असंभव कहूंगा कि दोनों का उपयोग किया जाएगा। अगर आपको समर्थन करने की ज़रूरत है ; इसके बजाय, बस उन्हें regex में स्वैप करें।

यदि आप सर्वर-साइड प्रीप्रोकैसिंग भाषा का उपयोग कर रहे हैं, तो आप अपने मूल JSON फ़ंक्शंस का उपयोग अपने लिए भारी उठाने के लिए कर सकते हैं। उदाहरण के लिए, PHP में आप लिख सकते हैं:

<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

बहुत आसान!


मैं नियमित अभिव्यक्तियों का बहुत उपयोग करता हूं, लेकिन इसके लिए नहीं।

यह मेरे आवेदन में एक बार क्वेरी स्ट्रिंग को पढ़ने के लिए आसान और अधिक कुशल लगता है, और सभी कुंजी / मूल्य जोड़े से ऑब्जेक्ट बनाएं:

var search = function() {
  var s = window.location.search.substr(1),
    p = s.split(/\&/), l = p.length, kv, r = {};
  if (l === 0) {return false;}
  while (l--) {
    kv = p[l].split(/\=/);
    r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
  }
  return r;
}();

एक यूआरएल के लिए की तरह http://domain.com?param1=val1&param2=val2आप के रूप में अपने कोड में बाद में उनके मूल्य प्राप्त कर सकते हैं search.param1और search.param2



आपका समाधान ठीक है।

=== का उपयोग करना इस मामले में मूर्खतापूर्ण होगा, क्योंकि फ़ील्ड का value हमेशा String





javascript url plugins query-string