GET मापदंडों से मूल्य कैसे प्राप्त करें?


1326

मेरे पास कुछ GET मापदंडों के साथ एक URL है:

www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 

मुझे इसका पूरा मूल्य मिलना चाहिए c। मैंने URL पढ़ने की कोशिश की, लेकिन मुझे केवल मिल गया m2। मैं जावास्क्रिप्ट का उपयोग कैसे करूं?


नया उत्तर पोस्ट करने से पहले, विचार करें कि इस प्रश्न के लिए पहले से ही 50+ उत्तर हैं। कृपया, सुनिश्चित करें कि आपका उत्तर उन सूचनाओं का योगदान करता है जो मौजूदा उत्तरों में नहीं हैं।
12

जवाबों:


1996

जावास्क्रिप्ट में ही क्वेरी स्ट्रिंग मापदंडों को संभालने के लिए कुछ भी नहीं बनाया गया है।

एक (आधुनिक) ब्राउज़र में चल रहा कोड आप URLऑब्जेक्ट का उपयोग कर सकते हैं (जो कि JS द्वारा ब्राउज़रों को दिए गए API का हिस्सा है):

var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("c");
console.log(c);


पुराने ब्राउज़रों (इंटरनेट एक्सप्लोरर सहित) के लिए, आप इस उत्तर के मूल संस्करण से इस पॉलीफ़िल या कोड का उपयोग कर सकते हैं जो पूर्वनिर्धारित करता है URL:

आप पहुँच सकते हैं location.search, जो आपको ?URL के अंत में वर्ण से या फ़्रेगमेंट आइडेंटिफ़ायर (#foo) की शुरुआत, जो भी पहले आता है।

तो आप इसे इस के साथ पार्स कर सकते हैं:

function parse_query_string(query) {
  var vars = query.split("&");
  var query_string = {};
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    var key = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair[1]);
    // If first entry with this name
    if (typeof query_string[key] === "undefined") {
      query_string[key] = decodeURIComponent(value);
      // If second entry with this name
    } else if (typeof query_string[key] === "string") {
      var arr = [query_string[key], decodeURIComponent(value)];
      query_string[key] = arr;
      // If third or later entry with this name
    } else {
      query_string[key].push(decodeURIComponent(value));
    }
  }
  return query_string;
}

var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);

आप वर्तमान पृष्ठ के URL से क्वेरी स्ट्रिंग प्राप्त कर सकते हैं:

var query = window.location.search.substring(1);
var qs = parse_query_string(query);

पुराने ब्राउज़रों के लिए, आपको एक पॉलीफ़िल कीURL आवश्यकता हो सकती है, इसके लिए एक के अलावा URLSearchParams। या आप var c = url.searchParams.get("c");ऊपर दिए गए उत्तर में लाइन को बदलकर इस मुद्दे को चकमा दे सकते हैं var c = new URLSearchParams(window.location.search).get("c");
evanrmurphy

parse_query_string उन मानों के लिए विफल हो जाएगा, जिनमें '=' ​​सम्‍मिलित है, जैसे मान के रूप में base64 एन्कोडेड मान पास करते समय। नीचे दिए गए नियमित एक्सप्रेशन का उपयोग करने वाला संस्करण बेहतर काम करता है।
क्लोस

7
@ जैमलैंड - बिल्कुल ऐसा नहीं है। यह चीजों को तोड़ देगा। यहाँ एक लाइव डेमो की new URL() उम्मीद है कि इसके तर्क के रूप में एक ठीक से एन्कोडेड URL प्राप्त किया जा सकता है। एक URL का decodeURIComponentएक घटक पारित होने की उम्मीद है , न कि एक संपूर्ण URL।
क्वेंटिन

@ क्वेंटिन मैंने विभिन्न विशेष वर्णों की जाँच की है और मुझे लगता है कि आप सही हैं। decodeURIComponentइस मामले में इस्तेमाल नहीं किया जाना चाहिए
Jamland

1
parse_query_stringसमारोह के एक डबल डिकोड करता है value=@ManelClos ने उल्लेख जारी एक दूसरा पैरामीटर जोड़कर संबोधित किया जा सकता 2( limit) के लिए vars[i].split()
जेक

242

अधिकांश कार्यान्वयन जिन्हें मैंने देखा है URL-नाम और मानों को डिकोड करना।

यहां एक सामान्य उपयोगिता फ़ंक्शन है जो उचित URL-डिकोडिंग भी करता है:

function getQueryParams(qs) {
    qs = qs.split('+').join(' ');

    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }

    return params;
}

//var query = getQueryParams(document.location.search);
//alert(query.foo);

3
यह कोड काम नहीं करता है। यह एक अनंत लूप बनाता है क्योंकि रेगेक्स को लूप परिभाषा में संकलित किया जाता है जो वर्तमान सूचकांक को रीसेट करता है। यदि आप लूप के बाहर चर में रेगेक्स डालते हैं तो यह ठीक से काम करता है।
मैक्सहॉकिन्स

2
@maxhawkins: यह कुछ ब्राउज़रों में काम करता है जबकि यह दूसरों में एक अनंत लूप में जाएगा। आप उस संबंध में आधे-अधूरे हैं। मैं क्रॉस-ब्राउज़र होने के लिए कोड ठीक कर दूंगा। यह बात बताने के लिए धन्यवाद!
एटलेस गोरल

3
@ZiTAL इस फ़ंक्शन का उपयोग URL के क्वेरी भाग के साथ किया जाना है, न कि पूरे URL पर। नीचे टिप्पणी उदाहरण देखें।
एतेस गोरल

1
@ हाईवे केस असंवेदनशीलता क्वेरी मापदंडों की चिंता नहीं है। यह एक एप्लिकेशन-विशिष्ट चीज़ की तरह लगता है जिसे क्वेरी पैरामीटर निष्कर्षण के साथ या उसके ऊपर लागू किया जाना चाहिए।
एट्स गोराल

7
क्यों qs.split('+').join(' ');और क्या नहीं qs.replace(/\+/g, ' ');?
फ्लेमस्टॉर्म

234

स्रोत

function gup( name, url ) {
    if (!url) url = location.href;
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( url );
    return results == null ? null : results[1];
}
gup('q', 'hxxp://example.com/?q=abc')

8
मुझे यह विकल्प सबसे अच्छा लगता है, लेकिन अशक्त या परिणाम वापस करना पसंद करते हैं, लेकिन एक खाली स्ट्रिंग नहीं।
जेसन थ्रैशर

1
ऐसा लगता है कि आपके पास कुछ अतिरिक्त भागने के निशान हैं। "\\[" होना चाहिए "\["। चूंकि वे नियमित रूप से तार हैं, [और] को भागने की जरूरत नहीं है।
एरिकपी

यह असंवेदनशील नहीं है। इस मामले को असंवेदनशील बनाने के लिए मैं "i" कहां जोड़ूंगा?
जेटा

चेतावनी (gup ('UserID', window.location.href));
अरुण प्रसाद ES

6
@mottie मृत लिंक
आमंत्रित करें

202

यह सिर्फ एक पैरामीटर की जांच करने का एक आसान तरीका है:

उदाहरण URL:

    http://myserver/action?myParam=2

उदाहरण जावास्क्रिप्ट:

    var myParam = location.search.split('myParam=')[1]

यदि URL में "myParam" मौजूद है ... चर myParam में "2" शामिल होगा, अन्यथा यह अपरिभाषित होगा।

हो सकता है कि आप उस मामले में एक डिफ़ॉल्ट मूल्य चाहते हैं:

    var myParam = location.search.split('myParam=')[1] ? location.search.split('myParam=')[1] : 'myDefaultValue';

अद्यतन: यह बेहतर काम करता है:

    var url = "http://www.example.com/index.php?myParam=384&login=admin"; // or window.location.href for current url
    var captured = /myParam=([^&]+)/.exec(url)[1]; // Value is in [1] ('384' in our case)
    var result = captured ? captured : 'myDefaultValue';

और यह तब भी सही काम करता है जब URL मापदंडों से भरा हो।


36
यह केवल तभी काम करता है जब आप जिस पैरामीटर को हथिया रहे हैं वह URL में अंतिम है, जिस पर आपको निर्भर नहीं होना चाहिए (भले ही आप केवल एक पैरामीटर की अपेक्षा कर रहे हों)। उदा http://myserver/action?myParam=2&anotherParam=3नहीं "2"बल्कि उपज होगी "2&anotherParam=3"
21:39

39
(location.search.split('myParam=')[1]||'').split('&')[0]- कई पाराम या गुमशुदा के साथ उपयोग करने के लिए myParam
गैबरे इमर सिप

याlocation.search.split('myParam=').splice(1).join('').split('&')[0]
जेविट

1
आप अधिक सटीकता प्राप्त कर सकते हैं और साथ [?|&]में प्रस्तुत करने के द्वारा मापदंडों के किसी भी क्रम की अनुमति दे सकते हैं[?|&]myParam=([^&]+)
१.२१ गीगावाट

1
आपको मान को डीकोड करने की आवश्यकता हो सकती हैresult = decodeURIComponent(result);
1.21 गीगावाट

126

ब्राउज़र विक्रेताओं ने URL और URLSearchParams के माध्यम से ऐसा करने के लिए एक देशी तरीका लागू किया है।

let url = new URL('http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5');
let searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('c'));  // outputs "m2-m3-m4-m5"

वर्तमान में फ़ायरफ़ॉक्स, ओपेरा, सफारी, क्रोम और एज में समर्थित है। ब्राउज़र समर्थन की सूची के लिए यहां देखें

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

https://url.spec.whatwg.org/

एरिक Bidelman, गूगल में एक इंजीनियर, की सिफारिश की गई इस का उपयोग करते हुए polyfill असमर्थित ब्राउज़र के लिए।


एमडीएन लिंक (एस) के अनुसार सफारी सपोर्ट यूआरएल लेकिन URLSearchParams नहीं।
मार्क थॉमसन

3
@ मार्कोव पॉलीफिल का ध्यान नहीं रखते हैं? BTW, सफारी आधुनिक दिन 'IE6
Csaba Toth

मेरे लिए क्यों new URLSearchParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5").get('a')लौट nullरहा है? (क्रोम स्थिर पर)। bऔर cअच्छी तरह से काम करने लगते हैं।
ripper234

अद्यतन उत्तर। मेरा मूल उत्तर URLSearchParams का ठीक से उपयोग नहीं कर रहा था, क्योंकि यह केवल URL के querystring भाग के साथ काम करने के लिए डिज़ाइन किया गया है।
cgatian

1
url.searchParamsइसके बजाय उपयोग करें new URLSearchParams(url.search)
Caio Tarifa

86

मैंने यह युग पहले पाया, बहुत आसान है:

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,    
    function(m,key,value) {
      vars[key] = value;
    });
    return vars;
  }

फिर इसे इस तरह से कॉल करें:

var fType = getUrlVars()["type"];

7
+1 महान समाधान - सुरुचिपूर्ण, कुशल और बुद्धिमान उपयोग की शर्तें हैं। मेरे उद्देश्यों के लिए अन्य स्वीकृत समाधान से बेहतर है
एलिमेंटल

लघु + सरल + शक्तिशाली = महान
mzy

1
बहुत अच्छा है, यह window.location.href
Fabio C.

1
@pdxbmw यह बेकार है और इसे हटाया जाना चाहिए। पहली नज़र में कोड चालाक लग सकता है, लेकिन बहुत अच्छी तरह से सोचा नहीं गया है। सुधार: decodeURIComponent()मूल्य पर उपयोग , क्योंकि यही आप आमतौर पर साथ काम करना चाहते हैं; window.location.searchइसके बजाय का उपयोग करें window.location.href, क्योंकि आप केवल मापदंडों में रुचि रखते हैं, संपूर्ण यूआरएल नहीं।
लीफ

2
@ लाइफ़ सुझाव ने बहुत काम किया। मुझे एक आईडी # 142 में मिल रही थी क्योंकि URL के अंत में एक बटन क्लिक पर # उत्पन्न होता था। इस तरह के समारोह को छोड़var vars = {}; window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars;
एंड्रेस रामोस

77

आप क्वेरी स्ट्रिंग प्राप्त कर सकते हैं location.search, फिर आप प्रश्न चिह्न के बाद सब कुछ विभाजित कर सकते हैं:

var params = {};

if (location.search) {
    var parts = location.search.substring(1).split('&');

    for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split('=');
        if (!nv[0]) continue;
        params[nv[0]] = nv[1] || true;
    }
}

// Now you can get the parameters you want like so:
var abc = params.abc;

3
पैरामीटर के नाम और मूल्यों को डीकोड करने के बारे में क्या?
एतेस गोरल

यह दृष्टिकोण सरणियों को संभालता नहीं है। जैसे ?array[]=1&array[]=2उत्पादन {"array[]": "2"}, जो स्पष्ट रूप से गलत है।
काफोसो

@ काफ़ोसो यहाँ कोई स्पष्ट या गलत नहीं है। सबसे पहले, समान नाम वाले दोहराए गए फ़ील्ड में कोई निर्दिष्ट मानक व्यवहार नहीं है, और हैंडल करने के लिए पार्सर तक है। इसके अतिरिक्त, []पैटर्न का केवल कुछ मामलों (जैसे, PHP) में एक अर्थ है, लेकिन अन्य नहीं। तो "स्पष्ट रूप से गलत नहीं" - बस एक गैर-मानक मामले को संभालने के लिए लागू नहीं किया गया है जिसे आपको संभालने की आवश्यकता हो सकती है या नहीं।
ब्लिक्स

38

मैंने अधिक सरल और सुरुचिपूर्ण समाधान लिखा।

var arr = document.URL.match(/room=([0-9]+)/)
var room = arr[1];

उस पर गौर करें, दो पंक्तियाँ, टिन पर जो कहती हैं, वैसा ही करती है - और नहीं तोड़ेगी अगर कोई कमजोरियों की जांच करने की कोशिश कर रहा है और इन समाधानों के एक जोड़े के विपरीत अतिरिक्त वर्णों और प्रश्नों का एक गुच्छा जोड़ता है। चियर्स चप!
डेविड जी

यह काम को सही और केवल 2 लाइनों में करता है। बहुत बढ़िया जवाब!
एंड्रेस रामोस

मुझे लगता है कि यह शून्य के लिए अन्य जांच के लिए उपयोगी होगा। यदि नहीं, तो एक उदाहरण यहां है: stackoverflow.com/a/36076822/1945948 (मेरे पास एक संपादित प्रयास अस्वीकृत था)।
ATW

समझ में नहीं आता ... यह कैसे प्रश्न का उत्तर देता है, जो एक विशिष्ट स्ट्रिंग से परमेस प्राप्त करने के बारे में है, 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5'?
माइक कृंतक

यह जवाब पसंद आया, + 1'द। बस एक सुझाव है, आप के [0-9] लिए जगह ले सकते हैं\d
gmanjon

31

URLSearchParams का उपयोग करके एक सुपर सरल तरीका ।

function getParam(param){
  return new URLSearchParams(window.location.search).get(param);
}

यह वर्तमान में Chrome, Firefox, Safari, Edge और अन्य में समर्थित है ।


त्रुटि प्राप्त करें: 'SCRIPT5009:' URLSearchParams 'को परिभाषित नहीं किया गया है जब' एज में चल रहा हो।
एंड्रियास प्रेस्टेमर

@AndreasPresthammer किनारे का क्या संस्करण?
स्पेंसर.स्मिन

@ स्पेन्सर-एससी माइक्रोसॉफ्ट एज 41.16299.820.0
एंड्रियास प्रेस्टेमर

पहले से तय URL पैरामीटर के साथ काम नहीं करता है
ii iml0sto1

@ iiiml0sto1 "पूर्वनिर्धारित URL पैरामीटर" क्या हैं?
spencer.sm

30

यहां एक पुनरावर्ती समाधान है जिसमें कोई रेगेक्स नहीं है, और न्यूनतम उत्परिवर्तन है (केवल परम ऑब्जेक्ट को उत्परिवर्तित किया गया है, जो मुझे लगता है कि जेएस में अपरिहार्य है)।

यह भयानक है क्योंकि यह है:

  • पुनरावर्ती है
  • एक ही नाम के कई मापदंडों को संभालता है
  • विकृत पैरामीटर स्ट्रिंग्स (लापता मान, इत्यादि) के साथ अच्छी तरह से व्यवहार करता है
  • अगर '=' मान में नहीं है तो नहीं टूटेगा
  • URL डिकोडिंग करता है
  • और अंत में, यह भयानक है क्योंकि यह ... argh !!!

कोड:

var get_params = function(search_string) {

  var parse = function(params, pairs) {
    var pair = pairs[0];
    var parts = pair.split('=');
    var key = decodeURIComponent(parts[0]);
    var value = decodeURIComponent(parts.slice(1).join('='));

    // Handle multiple parameters of the same name
    if (typeof params[key] === "undefined") {
      params[key] = value;
    } else {
      params[key] = [].concat(params[key], value);
    }

    return pairs.length == 1 ? params : parse(params, pairs.slice(1))
  }

  // Get rid of leading ?
  return search_string.length == 0 ? {} : parse({}, search_string.substr(1).split('&'));
}

var params = get_params(location.search);

// Finally, to get the param you want
params['c'];

31
आप ... आपने दो बार पुनरावर्ती कहा।
डिसिडेंट रेज

यह अगले url में पहला परम नहीं पा सकता: www.mysite.com?first=1&second=2
मारियो रेडोमनाना

हाय मारियो, यहाँ एक JSField दिखाया गया है जो उस URL के साथ काम कर रहा है: jsfiddle.net/q6xfJ - अगर आपको कोई त्रुटि मिली है, तो क्या यह शायद ब्राउज़र विशिष्ट है? परीक्षण करते समय, कृपया ध्यान दें कि मैंने जो उत्तर दिया है वह स्थान। Search का उपयोग करता है, जो URL का 'पहला = 1 & दूसरा = 2' भाग है। चीयर्स :)
जय

45
मैं नहीं देखता कि क्यों कुछ अच्छा है क्योंकि यह पुनरावर्ती है।
एडम अरोल्ड

6
एर्म, मुझे लगता है कि तुम वहाँ एडम को याद करने में चूक गए। हालांकि अब हर कोई इसे याद करेगा क्योंकि edi9999 ने दूसरा "इस् रिकर्सिव" हटा दिया है।
जय

27

मैंने एक फंक्शन बनाया जो ऐसा करता है:

var getUrlParams = function (url) {
  var params = {};
  (url + '?').split('?')[1].split('&').forEach(function (pair) {
    pair = (pair + '=').split('=').map(decodeURIComponent);
    if (pair[0].length) {
      params[pair[0]] = pair[1];
    }
  });
  return params;
};

5/26/2017 अपडेट करें, यहां एक ES7 कार्यान्वयन है (बबेल प्रीसेट चरण 0, 1, 2 या 3 के साथ चलता है):

const getUrlParams = url => `${url}?`.split('?')[1]
  .split('&').reduce((params, pair) =>
    ((key, val) => key ? {...params, [key]: val} : params)
    (...`${pair}=`.split('=').map(decodeURIComponent)), {});

कुछ परीक्षण:

console.log(getUrlParams('https://google.com/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('https://google.com/')); // Will log {}
console.log(getUrlParams('a=1&b=2&c')); // Will log {}

अद्यतन 3/26/2018, यहाँ एक टाइपस्क्रिप्ट कार्यान्वयन है:

const getUrlParams = (search: string) => `${search}?`
  .split('?')[1]
  .split('&')
  .reduce(
    (params: object, pair: string) => {
      const [key, value] = `${pair}=`
        .split('=')
        .map(decodeURIComponent)

      return key.length > 0 ? { ...params, [key]: value } : params
    },
    {}
  )

2/13/2019 अपडेट करें, यहां एक अद्यतन टाइपस्क्रिप्ट कार्यान्वयन है जो टाइपस्क्रिप्ट 3 के साथ काम करता है।

interface IParams { [key: string]: string }

const paramReducer = (params: IParams, pair: string): IParams => {
  const [key, value] = `${pair}=`.split('=').map(decodeURIComponent)

  return key.length > 0 ? { ...params, [key]: value } : params
}

const getUrlParams = (search: string): IParams =>
  `${search}?`.split('?')[1].split('&').reduce<IParams>(paramReducer, {})

क्वेरी पैरामीटर के बिना URL पर यह वापस आ जाएगीObject {"": ""}
Ilya Semenov

2
मेरे लिए काफी साफ दिखता है। बाकी उत्तर पर्याप्त स्पष्टीकरण के बिना बस बहुत अधिक "जादू" हैं।
लेवी रॉबर्ट्स

यह एक कमाल का जवाब है!
स्पेंसर बिगुम

धन्यवाद @SpencerBigum!
नैट फेरेरो

24

यह देखो

function getURLParameters(paramName)
{
    var sURL = window.document.URL.toString();
    if (sURL.indexOf("?") > 0)
    {
        var arrParams = sURL.split("?");
        var arrURLParams = arrParams[1].split("&");
        var arrParamNames = new Array(arrURLParams.length);
        var arrParamValues = new Array(arrURLParams.length);

        var i = 0;
        for (i = 0; i<arrURLParams.length; i++)
        {
            var sParam =  arrURLParams[i].split("=");
            arrParamNames[i] = sParam[0];
            if (sParam[1] != "")
                arrParamValues[i] = unescape(sParam[1]);
            else
                arrParamValues[i] = "No Value";
        }

        for (i=0; i<arrURLParams.length; i++)
        {
            if (arrParamNames[i] == paramName)
            {
                //alert("Parameter:" + arrParamValues[i]);
                return arrParamValues[i];
            }
        }
        return "No Parameters Found";
    }
}

1
धन्यवाद। मैं jscript में नया हूँ और यह काफी मददगार होगा।
ब्रायन बी।

20

ECMAScript 6 समाधान:

var params = window.location.search
  .substring(1)
  .split("&")
  .map(v => v.split("="))
  .reduce((map, [key, value]) => map.set(key, decodeURIComponent(value)), new Map())

अच्छा लगा। FYI करें, क्योंकि यह एक मानचित्र है, उपयोग params.get ("कुंजी") है;
17

मुझे यह पसंद है लेकिन शायद इसे पहला परम नहीं मिलेगा। मैंने आपके उदाहरण के आधार पर एक समारोह बनाया function urlParams(url) { const [, searchParams = ''] = url.split('?') return searchParams.split('&') .map(v => v.split('=')) .reduce((map, [key = '', value]) => key.length ? map.set(key, decodeURIComponent(value)) : map, new Map()) }
mah.cr

11

मैं उपयोग करता हूं

function getVal(str) {
    var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)'));
    return v ? v[1] : null;
}

कृपया कुछ स्पष्टीकरण जोड़ें। आपके उत्तर को वर्तमान में "निम्न गुणवत्ता" के रूप में चिह्नित किया गया है और अंततः इसे बिना हटा दिया जा सकता है।
जोहान्स जेंडर

मैंने पाया कि यदि url के अंत में '#id' जैसा कोई स्ट्रिंग है, और अंतिम पैरामीटर मान जैसे 'somevalue # id'
Ayano

@Ayano window.location.searchहैश की तरह शामिल नहीं होगा #id
फैंसीजॉन्ग

@Fancyoung हाँ, आप सही हैं, मैंने एक गलती की है जो location.hrefपरिणाम के बजाय मिलान करने के लिए उपयोग करता है location.search। धन्यवाद।
अयानो

11

मैं parseUri लाइब्रेरी का उपयोग करता हूं । यह आपको वही करने की अनुमति देता है जो आप पूछ रहे हैं:

var uri = 'www.test.com/t.html&a=1&b=3&c=m2-m3-m4-m5';
var c = uri.queryKey['c'];
// c = 'm2-m3-m4-m5'

9

यहाँ मेरा समाधान है। जैसा कि एंडी ई द्वारा इस प्रश्न का उत्तर देते समय सलाह दी गई है , यह आपकी स्क्रिप्ट के प्रदर्शन के लिए अच्छा नहीं है यदि यह बार-बार विभिन्न रेजेन्स स्ट्रिंग्स का निर्माण कर रहा है, केवल एक मूल्य प्राप्त करने के लिए लूप आदि चला रहा है। इसलिए, मैं एक सरल स्क्रिप्ट के साथ आया हूं जो एक ही ऑब्जेक्ट में सभी GET पैरामीटर देता है। आपको इसे बस एक बार कॉल करना चाहिए, परिणाम को एक चर पर असाइन करना चाहिए और फिर, भविष्य में किसी भी बिंदु पर, उपयुक्त कुंजी का उपयोग करके उस चर से कोई भी मूल्य प्राप्त करना होगा। ध्यान दें कि यह URI डिकोडिंग का भी ध्यान रखता है (अर्थात% 20 जैसी चीजें) और एक स्थान के साथ + बदलता है:

 function getUrlQueryParams(url) {
  var queryString = url.split("?")[1];
  var keyValuePairs = queryString.split("&");
  var keyValue = [];
  var queryParams = {};
  keyValuePairs.forEach(function(pair) {
    keyValue = pair.split("=");
    queryParams[keyValue[0]] = decodeURIComponent(keyValue[1]).replace(/\+/g, " ");
});
  return queryParams;
}

तो, यहाँ आप को देखने के लिए स्क्रिप्ट के कुछ परीक्षण हैं:

// Query parameters with strings only, no special characters.
var currentParams = getUrlQueryParams("example.com/foo?number=zero");
alert(currentParams["number"]); // Gives "zero".

// For the URL you stated above...
var someParams = getUrlQueryParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ");
alert(someParams["c"]); // Gives "m2-m3-m4-m5".

// For a query params with URI encoding...
var someParams = getUrlQueryParams("www.example.com/t.html?phrase=a%20long%20shot&location=Silicon+Valley%2C+USA");
alert(someParams["phrase"]); // Gives "a long shot".
alert(someParams["location"]); // Gives "Silicon Valley, USA".

.replace ("+", "") केवल पहली घटना को प्रतिस्थापित करेगा जिसे आपको उपयोग करने की आवश्यकता है .replace (/ \ + / g, "");
टोनी

8

या यदि आप यूआरआई पार्सिंग व्हील यूआरआई.जेएस का उपयोग नहीं करना चाहते हैं

फू नामक एक पैरामीटर का मान प्राप्त करने के लिए:

new URI((''+document.location)).search(true).foo

जो करता है

  1. Document.location को एक स्ट्रिंग में बदलें (यह एक ऑब्जेक्ट है)
  2. उस स्ट्रिंग को URI.js के URI वर्ग के अवरोधक को खिलाएं
  3. Url के खोज (क्वेरी) भाग को खोजने के लिए खोज () फ़ंक्शन को शामिल करें
    (यह सच है कि यह किसी वस्तु को आउटपुट करने के लिए कहता है)
  4. मूल्य प्राप्त करने के लिए परिणामी वस्तु पर फू संपत्ति तक पहुंचें

यहाँ इसके लिए एक पहेली है .... http://jsfiddle.net/m6tett01/12/


8

के लिये इस index.html की तरह एकल पैरामीटर मान के ? Msg = 1 कोड का उपयोग करें,

$(window).load(function(){
    queryString();
});

function queryString()
{
    var queryString = window.location.search.substring(1);
    var varArray = queryString.split("="); //eg. index.html?msg=1

    var param1 = varArray[0];
    var param2 = varArray[1];

}

के लिए सभी पैरामीटर मूल्य उपयोग निम्नलिखित कोड,

$(window).load(function(){
    queryString();
});

function queryString()
{
    var queryString = window.location.search;
    var varArray = queryString.split("&");
    for (var i=0;i<varArray.length;i++) {
      var param = varArray[i].split("=");
        //parameter-value pair
    }
} 

1
मुझे यह समाधान पसंद है!
alemur

8

यहां मैं एक उदाहरण पोस्ट कर रहा हूं। लेकिन यह jQuery में है। आशा है कि यह दूसरों की मदद करेगा:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>

<!-- URL:  www.example.com/correct/?message=done&year=1990-->

<script type="text/javascript">
$(function(){
    $.url.attr('protocol')  // --> Protocol: "http"
    $.url.attr('path')          // --> host: "www.example.com"
    $.url.attr('query')         // --> path: "/correct/"
    $.url.attr('message')   // --> query: "done"
    $.url.attr('year')      // --> query: "1990"
});
</script>

1
आपके अन्य पोस्ट से कॉपी किया गया: "url plugin की आवश्यकता है: plugins.jquery.com/url"
zeta

8

सबसे छोटा तरीका:

new URL(location.href).searchParams.get("my_key");

2
मैं किसी भी URL के पहले क्वेरी पैरामीटर को प्राप्त करने के बाद से बाद में विफल हो जाएगा, new URL(location.href).searchParams.get("my_key")पर उपयोग करने का पक्ष URLSearchParamsलूंगा।
ट्रैविस क्लार्क

1
दोनों वेरिएंट का परीक्षण किया। मैं आपसे सहमत हुँ। उत्तर को संपादित किया।
ज़ोन

7

इस सवाल के बहुत सारे उत्तर हैं, इसलिए मैं एक और जोड़ रहा हूं।

/**
 * parses and returns URI query parameters 
 * 
 * @param {string} param parm
 * @param {bool?} asArray if true, returns an array instead of a scalar 
 * @returns {Object|Array} 
 */
function getURIParameter(param, asArray) {
    return document.location.search.substring(1).split('&').reduce(function(p,c) {
        var parts = c.split('=', 2).map(function(param) { return decodeURIComponent(param); });
        if(parts.length == 0 || parts[0] != param) return (p instanceof Array) && !asArray ? null : p;
        return asArray ? p.concat(parts.concat(true)[1]) : parts.concat(true)[1];
    }, []);
}

उपयोग:

getURIParameter("id")  // returns the last id or null if not present
getURIParameter("id", true) // returns an array of all ids

यह खाली मापदंडों (उन चाबियों के बिना मौजूद "=value"), एक स्केलर और सरणी-आधारित मूल्य पुनर्प्राप्ति एपीआई, साथ ही उचित यूआरआई घटक डिकोडिंग दोनों के संपर्क में आता है।


7

replace()विधि का उपयोग करने का सबसे आसान तरीका :

से urlStrस्ट्रिंग:

paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');

या वर्तमान URL से :

paramVal = document.URL.replace(/.*param_name=([^&]*).*|(.*)/, '$1');

स्पष्टीकरण:

  • document.URL - इंटरफ़ेस एक स्ट्रिंग के रूप में दस्तावेज़ स्थान (पेज url) लौटाता है।
  • replace()- विधि एक प्रतिस्थापन द्वारा प्रतिस्थापित पैटर्न के कुछ या सभी मैचों के साथ एक नया स्ट्रिंग लौटाती है ।
  • /.*param_name=([^&]*).*/- स्लैश के बीच संलग्न नियमित अभिव्यक्ति पैटर्न जिसका अर्थ है:
    • .* - किसी भी वर्ण का शून्य या उससे अधिक,
    • param_name= - परम का नाम
    • () - नियमित अभिव्यक्ति में समूह,
    • [^&]*- एक या एक से अधिक पात्रों को छोड़कर &,
    • | - प्रत्यावर्तन,
    • $1 - नियमित अभिव्यक्ति में पहले समूह का संदर्भ।

var urlStr = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
var c = urlStr.replace(/.*c=([^&]*).*|(.*)/, '$1');
var notExisted = urlStr.replace(/.*not_existed=([^&]*).*|(.*)/, '$1');
console.log(`c === '${c}'`);
console.log(`notExisted === '${notExisted}'`);


1
अच्छा समाधान है, लेकिन अगर पैरामीटर नहीं मिला है, तो पूरी स्ट्रिंग वापस आ जाती है। मैं इस मामले में "अपरिभाषित" की उम्मीद करूंगा।
पेन्सन

1
हाय @pensan, आपकी शानदार टिप्पणी के लिए धन्यवाद। मैं केवल उस स्थिति से निपटने के लिए नियमित अभिव्यक्ति में जोड़ता हूं जब पैरामीटर URL में प्रकट नहीं होता है। इस मामले में हमें एम्टी स्ट्रिंग (संपूर्ण स्ट्रिंग नहीं) मिलती है।
सिमहुमेलेको

6

फिर भी एक और सुझाव।

कुछ अच्छे उत्तर पहले से ही हैं, लेकिन मैंने उन्हें अनावश्यक रूप से जटिल और समझने में कठिन पाया। यह छोटा, सरल है, और URL में टोकन नामों से संबंधित प्रमुख नामों के साथ एक साधारण साहचर्य सरणी देता है।

मैंने उन लोगों के लिए नीचे टिप्पणी के साथ एक संस्करण जोड़ा जो सीखना चाहते हैं।

ध्यान दें कि यह लूप के लिए jQuery ($ .each) पर निर्भर करता है, जिसे मैं फॉरच के बजाय सुझाता हूं। जो भी नए फ़ंक्शन पुराने ब्राउज़र में समर्थित नहीं हैं, उनका समर्थन करने के लिए अलग-अलग फ़िक्सेस में प्लगिंग के बजाय बोर्ड पर jQuery का उपयोग करके क्रॉस-ब्राउज़र संगतता सुनिश्चित करना मुझे सरल लगता है।

संपादित करें: मैंने इसे लिखने के बाद एरिक इलियट के उत्तर पर ध्यान दिया, जो लगभग एक ही है, हालांकि यह forEach का उपयोग करता है, जबकि मैं आम तौर पर (ऊपर बताए गए कारणों के खिलाफ) हूं।

function getTokens(){
    var tokens = [];
    var query = location.search;
    query = query.slice(1);
    query = query.split('&');
    $.each(query, function(i,value){    
        var token = value.split('=');   
        var key = decodeURIComponent(token[0]);     
        var data = decodeURIComponent(token[1]);
        tokens[key] = data;
    });
    return tokens;
}

टिप्पणी संस्करण:

function getTokens(){
    var tokens = [];            // new array to hold result
    var query = location.search; // everything from the '?' onward 
    query = query.slice(1);     // remove the first character, which will be the '?' 
    query = query.split('&');   // split via each '&', leaving us an array of something=something strings

    // iterate through each something=something string
    $.each(query, function(i,value){    

        // split the something=something string via '=', creating an array containing the token name and data
        var token = value.split('=');   

        // assign the first array element (the token name) to the 'key' variable
        var key = decodeURIComponent(token[0]);     

        // assign the second array element (the token data) to the 'data' variable
        var data = decodeURIComponent(token[1]);

        tokens[key] = data;     // add an associative key/data pair to our result array, with key names being the URI token names
    });

    return tokens;  // return the array
}

नीचे दिए गए उदाहरणों के लिए हम इस पते को मानेंगे:

http://www.example.com/page.htm?id=4&name=murray

आप अपने स्वयं के चर को URL टोकन असाइन कर सकते हैं:

var tokens = getTokens();

फिर प्रत्येक URL टोकन को इस तरह नाम से देखें:

document.write( tokens['id'] );

यह "4" प्रिंट करेगा।

तुम भी सीधे समारोह से एक टोकन नाम का उल्लेख कर सकते हैं:

document.write( getTokens()['name'] );

... जो "मूर्रे" छपता।


6
// Read a page's GET URL variables and return them as an associative array.
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;
}

// Usage for URL: http://my.site.com/location?locationId=53cc272c0364aefcb78756cd&shared=false
var id = getUrlVars()["locationId"];

यहाँ से प्राप्त करें: http://jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html


6

सरल तरीका

function getParams(url){
        var regex = /[?&]([^=#]+)=([^&#]*)/g,
            params = {},
            match;
        while(match = regex.exec(url)) {
            params[match[1]] = match[2];
        }
        return params;
    }

तो इसे getParams (url) की तरह कहें


5

मुझे URL GET चर पढ़ने और url पैरामीटर के आधार पर एक क्रिया को पूरा करने की आवश्यकता थी। मैंने एक समाधान के लिए उच्च और निम्न खोज की और इस छोटे से कोड में आया। यह मूल रूप से वर्तमान पृष्ठ url को पढ़ता है, URL पर कुछ नियमित अभिव्यक्ति करता है फिर url मापदंडों को एक सहयोगी सरणी में बचाता है, जिसे हम आसानी से एक्सेस कर सकते हैं।

एक उदाहरण के रूप में अगर हमारे पास निम्न जगह पर जावास्क्रिप्ट के साथ निम्नलिखित यूआरएल था।

http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July

मापदंडों और आईडी को प्राप्त करने के लिए हमें बस यही करना होगा:

कोड होगा:

<script type="text/javascript">
var first = getUrlVars()["year"];
var second = getUrlVars()["Month"];

alert(first);
alert(second);
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>

मेरे लिए काम किया धन्यवाद
OJB1

5
// http:localhost:8080/path?param_1=a&param_2=b
var getParamsMap = function () {
    var params = window.location.search.split("&");
    var paramsMap = {};
    params.forEach(function (p) {
        var v = p.split("=");
        paramsMap[v[0]]=decodeURIComponent(v[1]);
    });
    return paramsMap;
};

// -----------------------

console.log(getParamsMap()["param_1"]);  // should log "a"     

यह 'के साथ पहला पैरामीटर देता है?'
पीनी चेइनी

5

एल्डन मैकगिनैनेस द्वारा यह जिश अब तक देखी गई एक जावास्क्रिप्ट क्वेरी स्ट्रिंग पार्सर का सबसे पूर्ण कार्यान्वयन है।

दुर्भाग्य से, यह एक jQuery प्लगइन के रूप में लिखा गया है।

मैंने इसे वेनिला JS में लिखा और कुछ सुधार किए:

function parseQuery(str) {
  var qso = {};
  var qs = (str || document.location.search);
  // Check for an empty querystring
  if (qs == "") {
    return qso;
  }
  // Normalize the querystring
  qs = qs.replace(/(^\?)/, '').replace(/;/g, '&');
  while (qs.indexOf("&&") != -1) {
    qs = qs.replace(/&&/g, '&');
  }
  qs = qs.replace(/([\&]+$)/, '');
  // Break the querystring into parts
  qs = qs.split("&");
  // Build the querystring object
  for (var i = 0; i < qs.length; i++) {
    var qi = qs[i].split("=");
    qi = qi.map(function(n) {
      return decodeURIComponent(n)
    });
    if (typeof qi[1] === "undefined") {
      qi[1] = null;
    }
    if (typeof qso[qi[0]] !== "undefined") {

      // If a key already exists then make this an object
      if (typeof (qso[qi[0]]) == "string") {
        var temp = qso[qi[0]];
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]] = [];
        qso[qi[0]].push(temp);
        qso[qi[0]].push(qi[1]);

      } else if (typeof (qso[qi[0]]) == "object") {
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]].push(qi[1]);
      }
    } else {
      // If no key exists just set it as a string
      if (qi[1] == "") {
        qi[1] = null;
      }
      qso[qi[0]] = qi[1];
    }
  }
  return qso;
}

// DEMO
console.log(parseQuery("?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab"));

इस फिडल को भी देखें ।


मुझे जावास्क्रिप्ट के बारे में समझ में नहीं आ रहा है कि उन्होंने भाषा में या कम से कम एक मानक पुस्तकालय में url पार्सिंग कार्य क्यों नहीं किए हैं? निम्न स्तर के सामान पर यह अधिक से अधिक नहीं लगाया जाना चाहिए, और न ही डेवलपर्स के लिए छोड़ दिया जाता है जो भी एंट्रिप्टली वैरिएंट समाधानों का उपयोग करने के लिए उन्हें कोड़ा मार देगा। यदि यह ठोस है, तो मानक पुस्तकालय में कुछ इस तरह बनाया जाना चाहिए। यह जावास्क्रिप्ट में उस चीज़ के प्रकार का एक उदाहरण है जो मुझे भाषा से दूर कर देता है।
एहनबीकैड

5

सुरुचिपूर्ण, कार्यात्मक शैली समाधान

चलिए URL param नामों की एक ऑब्जेक्ट बनाते हैं जो कि की है, फिर हम आसानी से इसके नाम से पैरामीटर निकाल सकते हैं:

// URL: https://example.com/?test=true&orderId=9381  

// Build an object containing key-value pairs
export const queryStringParams = window.location.search
  .split('?')[1]
  .split('&')
  .map(keyValue => keyValue.split('='))
  .reduce<QueryStringParams>((params, [key, value]) => {
    params[key] = value;
    return params;
  }, {});

type QueryStringParams = {
  [key: string]: string;
};


// Return URL parameter called "orderId"
return queryStringParams.orderId;

इसे प्यार करो, लेकिन मेरे लिए कम फ़ंक्शन में संचायक को वापस करने के लिए सुनिश्चित किए बिना काम नहीं किया
एला

@ यह एक टाइपो था, कोई ऐसा तरीका नहीं है जिसके बिना काम return

अब बेहतर लग रहा है, चलो आशा करते हैं कि आप इसे पहले पृष्ठ पर लाएँगे!
एला

4

ये है जो मैं करता हूं:

var uriParams = getSearchParameters();
alert(uriParams.c);


// background functions:

// Get object/associative array of URL parameters
function getSearchParameters () {
  var prmstr = window.location.search.substr(1);
  return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}

// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
  var params = {},
      prmarr = prmstr.split("&");

  for (var i = 0; i < prmarr.length; i++) {
    var tmparr = prmarr[i].split("=");
    params[tmparr[0]] = tmparr[1];
  }
  return params;
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.