JQuery / जावास्क्रिप्ट के साथ क्वेरी स्ट्रिंग पैरामीटर url मान प्राप्त करें (querystring)

Question

किसी को भी क्वेरी स्ट्रिंग मापदंडों को संभालने के लिए एक jQuery विस्तार लिखने के लिए एक अच्छा तरीका पता है? मैं मूल रूप से jQuery के मैजिक ($)फंक्शन को आगे बढ़ाना चाहता हूं ताकि मैं कुछ ऐसा कर सकूं:

$('?search').val(); 

जो मुझे निम्नलिखित URL में "परीक्षण" का मूल्य देगा http://www.example.com/index.php?search=test:।

मैंने बहुत सारे कार्य देखे हैं जो jQuery और जावास्क्रिप्ट में ऐसा कर सकते हैं, लेकिन मैं वास्तव में काम करने के लिए jQuery का विस्तार करना चाहता हूं जैसा कि ऊपर दिखाया गया है। मैं jQuery प्लगइन की तलाश नहीं कर रहा हूँ, मैं jQuery पद्धति के विस्तार की तलाश कर रहा हूँ।

Comments

पूछा और जवाब दिया: stackoverflow.com/questions/901115/…

— निको वेस्टरडेल

@NicoWesterdale - मैं उस लिंक के माध्यम से गया था, लेकिन इस विशेष प्रश्न को हल करने वाले किसी भी उत्तर को नहीं देखा। उन्होंने कहा कि वह ऊपर जैसा चाहते हैं।

— म्रतश्रीमण

मुझे नहीं लगता कि आप ऐसा कर सकते हैं, एक तार पार हो जाता है, जिसे सीज़लर द्वारा पार्स किया जाता है, फिर डोम ऑब्जेक्ट्स की एक सरणी के लिए हल किया जाता है। आप कस्टम फ़िल्टर प्रदान करने के लिए मिलान का विस्तार कर सकते हैं, लेकिन आपके पास स्ट्रिंग के आधार पर jquery वस्तु नहीं हो सकती है।

— एंड्रयू

$अतिभारित नहीं है?

— क्वेंटिन

@mrtsherman मेरे द्वारा दिए गए लिंक में getParameterByName () फ़ंक्शन को देखें। नहीं, आप इसे सीधे $ प्रॉम के भीतर से नहीं कर सकते हैं, लेकिन यही नहीं jQuery के चयनकर्ता हैं। वह केवल एक URL स्ट्रिंग के भाग का चयन कर रहा है, जो कि $ () क्या करता है DOM के भाग तक पहुंचने की कोशिश नहीं कर रहा है। यह बिलकुल अलग बात है। यदि आप वास्तव में jQuery का उपयोग करना चाहते हैं, तो आप एक ऐसा प्लगइन लिख सकते हैं जो इस वाक्यविन्यास का उपयोग करता है: $ .getParameterByName (param), उस पृष्ठ पर आगे एक उदाहरण नीचे दिया गया है जो मैं उससे जुड़ा था जो ठीक उसी से जुड़ा है। Kinda हालांकि निरर्थक।

— निको वेस्टरडेल

Answer 1

बदसूरत स्ट्रिंग पार्सिंग के वर्षों के बाद, एक बेहतर तरीका है: URLSearchParams आइए हम इस नए एपीआई का उपयोग कैसे कर सकते हैं कि हम स्थान से मान प्राप्त कर सकें!

// "मान लें? पोस्ट = 1234 और कार्रवाई = संपादित करें"

var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?

post=1234&action=edit&active=1"

अद्यतन: IE समर्थित नहीं है

URLSearchParams के बजाय नीचे दिए गए उत्तर से इस फ़ंक्शन का उपयोग करें

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                      .exec(window.location.search);

    return (results !== null) ? results[1] || 0 : false;
}

console.log($.urlParam('action')); //edit

Comments

क्या URLSearchParams सभी ब्राउज़रों द्वारा समर्थित है?

— दिव्य

ऊप्स! ओह यार, IE समर्थित नहीं है !! मैंने अभी इस पर परीक्षण किया है। जबकि क्रोम, एफएफ, सफारी में कोई समस्या नहीं है।

— सौरिन

@divine - यहां URLSearchParams के लिए एक पॉलीफ़िल है: github.com/WebReflection/url-search-params

— रॉबर्टो

यदि आप असमर्थित ब्राउज़रों के लिए एक पॉलीफ़िल जोड़ते हैं तो यह URLSearchParams समाधान अच्छी तरह से काम करता है। github.com/ungap/url-search-params

— लुइसवड

Answer 2

JQuery का विस्तार क्यों? सिर्फ एक वैश्विक समारोह होने से jQuery का विस्तार करने से क्या लाभ होगा?

function qs(key) {
    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
    var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
    return match && decodeURIComponent(match[1].replace(/\+/g, " "));
}

http://jsfiddle.net/gilly3/sgxcL/

एक वैकल्पिक दृष्टिकोण पूरे क्वेरी स्ट्रिंग को पार्स करना और बाद में उपयोग के लिए किसी ऑब्जेक्ट में मूल्यों को संग्रहीत करना होगा। इस दृष्टिकोण को एक नियमित अभिव्यक्ति की आवश्यकता नहीं होती है और यह window.locationवस्तु का विस्तार करता है (लेकिन, आसानी से एक वैश्विक चर का उपयोग कर सकता है):

location.queryString = {};
location.search.substr(1).split("&").forEach(function (pair) {
    if (pair === "") return;
    var parts = pair.split("=");
    location.queryString[parts[0]] = parts[1] &&
        decodeURIComponent(parts[1].replace(/\+/g, " "));
});

http://jsfiddle.net/gilly3/YnCeu/

यह संस्करण भी उपयोग करता है Array.forEach(), जो IE7 और IE8 में मूल रूप से अनुपलब्ध है। इसे MDN पर कार्यान्वयन का उपयोग करके जोड़ा जा सकता है , या आप jQuery के $.each()बजाय उपयोग कर सकते हैं ।

Comments

यह सामान्य नहीं है, लेकिन क्वेरी मापदंडों में एम्परसेंड्स के बजाय अर्ध-कॉलनों का उपयोग करने के लिए मान्य है।

— मुहम्मद

@Muhd - जब तक आपका कोड इसे समझता है, तब तक आप किसी भी सीमांकक में किसी भी परिसीमन का उपयोग करने के लिए "मान्य" हैं। लेकिन, जब कोई फॉर्म सबमिट किया जाता है, तो फॉर्म फील्ड्स को name=valueजोड़े के रूप में सबमिट किया जाता है , द्वारा अलग किया जाता है &। यदि आपका कोड एक कस्टम क्वेरिस्ट्रिंग प्रारूप का उपयोग कर रहा है, तो जाहिर है, आपको जहां भी सर्वर या क्लाइंट पर क्वेरिस्ट्रिंग का उपभोग किया जाता है, वहां आपको कस्टम क्वेरिस्ट्रिंग पार्सर लिखना होगा।

— 183 में gilly3

@ नाइक - दिलचस्प। लेकिन अर्ध-कॉलन के रूप में इलाज करने के लिए HTTP सर्वर के लिए उनका सुझाव एम्परसेंड केवल एक फॉर्म सबमिशन की नकल करने के लिए लिंक का उपयोग करते समय HTML प्रीटियर बनाने का कार्य करता है। यह सिर्फ एक सुझाव है और गैर-मानक है। एक मानक फॉर्म GETसबमिशन को एन्कोड किया गया है application/x-www-form-urlencoded, जैसे मूल्यों को अलग किया गया है &। मेरा कोड उस मानक को संभालता है। कस्टम url संरचनाएं जैसे कि आपके द्वारा लिंक की गई एक कस्टम पार्सर सर्वर-साइड और क्लाइंट-साइड की आवश्यकता होगी। इसके बावजूद, ऊपर मेरे कोड में ऐसी क्षमता जोड़ना तुच्छ होगा।

— gilly3

@ गिल्ली वास्तव में - यदि आप पोर्टेबल कोड चाहते हैं तो आपको दोनों का समर्थन करने की आवश्यकता है

— निक

RegExp () में "i" जोड़ें, इसलिए कुंजी असंवेदनशील हो सकती है: नया RegExp ("[??]" + कुंजी + "= ([^ &] +) ((| $ $)", "i");

— योवव

Answer 3

JQuery के jQuery-URL-Parser प्लगइन एक ही काम करते हैं, उदाहरण के लिए खोज क्वेरी स्ट्रिंग परम के मूल्य को पुनः प्राप्त करने के लिए , आप उपयोग कर सकते हैं

$.url().param('search');

यह पुस्तकालय सक्रिय रूप से बनाए नहीं रखा गया है। जैसा कि एक ही प्लगइन के लेखक द्वारा सुझाया गया है, आप URI.js का उपयोग कर सकते हैं ।

या आप इसके बजाय js-url का उपयोग कर सकते हैं । यह काफी नीचे के समान है।

तो आप क्वेरी परम की तरह उपयोग कर सकते हैं $.url('?search')

Comments

अच्छा लगा। और कोड सार्वजनिक डोमेन में है इसलिए आपको टिप्पणियों को शामिल करने की आवश्यकता नहीं है।

— मुहम्मद

यदि आप फ़ाइल के माध्यम से परीक्षण करते हैं, तो अच्छा समाधान लेकिन काम नहीं करेगा: //

— kampj 20

Whats जिसे @kampsj

— RameshVel के

हाय @kampsj, file://प्रोटोकॉल के साथ परीक्षण काम नहीं करने के लिए एक बहुत अधिक सामान का कारण होगा। आप नोड के साथ एक बहुत तेज और आसान स्टेटिक HTML सर्वर बना सकते हैं। js. stackoverflow.com/questions/16333790/…

— जेस

यह प्लगइन अब नहीं रखा गया है और लेखक स्वयं इसके बजाय अन्य प्लगइन्स का उपयोग करने का सुझाव दे रहा है।

— JanErikGunnar

Answer 4

साइटप्वाइंट पर हमारे दोस्तों से यह रत्न मिला। https://www.sitepoint.com/url-parameters-jquery/ ।

PURE jQuery का उपयोग करना। मैंने बस इसका इस्तेमाल किया और यह काम कर गया। उदाहरण के लिए इसे थोड़ा बदल दिया।

//URL is http://www.example.com/mypage?ref=registration&email=[e-mail]

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                      .exec(window.location.search);

    return (results !== null) ? results[1] || 0 : false;
}

console.log($.urlParam('ref')); //registration
console.log($.urlParam('email')); //[e-mail]

जैसा चाहोगे वैसा उपयोग करोगे।

Comments

महान। धन्यवाद! मुझे नहीं लगता कि आपको अंतिम समापन ब्रेस टैग की आवश्यकता है।

— १०:१६ को

आह हाँ, आप सही हैं। पद का संपादन किया। यदि मेरे कोड में कुछ को छोड़ दिया गया था। धन्यवाद।

— क्लोसडिजाइन

आपको .href के बजाय window.location.search का उपयोग करना चाहिए - अन्यथा, अच्छा।

— 1

इसके बजाय results[1] || 0, आपको करना होगा यदि (परिणाम) {वापसी परिणाम [1]} वापसी 0; bcoz क्वेरी पैरामीटर बिल्कुल मौजूद नहीं हो सकते हैं। और संशोधन सभी सामान्य मामलों को संभाल लेगा।

— myDoggyWritesCode

अगर आपको कुछ पसंद है तो आप क्या करते हैं https://example.com/?c=Order+ID? इस फ़ंक्शन पर वह धन चिह्न अभी भी बना हुआ है।

— वोलोमाइक

Answer 5

यह मेरा कोड नमूना नहीं है, लेकिन मैंने इसे अतीत में उपयोग किया है।

//First Add this to extend jQuery

    $.extend({
      getUrlVars: function(){
        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;
      },
      getUrlVar: function(name){
        return $.getUrlVars()[name];
      }
    });

    //Second call with this:
    // Get object of URL parameters
    var allVars = $.getUrlVars();

    // Getting URL var by its name
    var byName = $.getUrlVar('name');

Comments

आपको '=' पर विभाजित नहीं करना चाहिए, किसी भी कुंजी / मान युग्म के मूल्य में एक दूसरे के बराबर चिह्न होना तकनीकी रूप से ठीक है। - केवल पहली बराबरी पर हस्ताक्षर करने से आपका सामना होता है (प्रति कुंजी / मूल्य जोड़ी) एक सीमांकक के रूप में माना जाना चाहिए। (इसके अलावा, बराबर चिह्न की सख्त आवश्यकता नहीं है; यह बिना किसी मूल्य के एक कुंजी के साथ संभव है।)

— BrainSlugs83

साफ समाधान। मेरे मामले में पूरी तरह से काम किया।

— जेएफ गगनोन

$ .extend ({getUrlVars: function () {var vars = [], hash; var hashes = window.location.href.slice (window.location.href.indexOf (') + 1) .plit (' & ') '), (var i = 0; i <hashes.length; i ++) {hash = hashes [i] .plplit (' = '); var k = hash.shift (); vars.push (k); vars [k] = hash.join ("");} वापसी var;}, getUrlVar: फ़ंक्शन (नाम) {वापसी $ .getUrlVars () [नाम];}}};

— मोपिन

Answer 6

मैंने एक छोटा सा फ़ंक्शन लिखा है जहाँ आपको केवल क्वेरी पैरामीटर के नाम को पार्स करना है। इसलिए यदि आपके पास: प्रोजेक्ट = 12 और मोड = 200 और दिनांक = 2013-05-27 और आप 'मोड' पैरामीटर चाहते हैं, तो आपको केवल फ़ंक्शन में 'मोड' नाम को पार्स करना होगा:

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

// example caller:
var result =  getParameterByName('Mode');

Comments

यदि आपके नाम में कोई जंक नहीं है, तो आप पहले रेगेक्स को छोड़ सकते हैं और यह स्थान से शुरू करने के लिए अधिक समझ में आता है। खोज

— mplungjan

Answer 7

ऊपर @Rob नील के उत्तर पर निर्माण, यहाँ एक शुद्ध जेएस अनुकूलन है जो डीकोड किए गए क्वेरी स्ट्रिंग पैरम (कोई% 20, आदि) की एक साधारण वस्तु लौटाता है।

function parseQueryString () {
  var parsedParameters = {},
    uriParameters = location.search.substr(1).split('&');

  for (var i = 0; i < uriParameters.length; i++) {
    var parameter = uriParameters[i].split('=');
    parsedParameters[parameter[0]] = decodeURIComponent(parameter[1]);
  }

  return parsedParameters;
}

Comments

मैंने इस कोड का उपयोग करते हुए कोई ग़लती नहीं देखी है। आप कौन सा ब्राउज़र उपयोग कर रहे हैं? मैंने इसे वर्तमान फ़ायरफ़ॉक्स, क्रोम और सफारी के खिलाफ परीक्षण किया है।

हाँ क्षमा करें मैंने इसे गलत पढ़ा। मैंने सोचा कि मैंने इसे एक ऐसी चीज पर कॉल करने के लिए देखा जो अपरिभाषित थी। तो वास्तव में यह सिर्फ एक बार चल रहा है जब यह करने के लिए नहीं है। जब खोज है ""। और आपको {"": "अपरिभाषित"} मिलता है

— जेरिनॉ

हाँ। यह शायद कुछ शोधन का उपयोग कर सकता है।

Answer 8

वेनिला जावास्क्रिप्ट में लिखा है

     //Get URL
     var loc = window.location.href;
     console.log(loc);
     var index = loc.indexOf("?");
     console.log(loc.substr(index+1));
     var splitted = loc.substr(index+1).split('&');
     console.log(splitted);
     var paramObj = [];
     for(var i=0;i<splitted.length;i++){
         var params = splitted[i].split('=');
         var key = params[0];
         var value = params[1];
         var obj = {
             [key] : value
         };
         paramObj.push(obj);
         }
    console.log(paramObj);
    //Loop through paramObj to get all the params in query string.

Answer 9

function parseQueryString(queryString) {
    if (!queryString) {
        return false;
    }

    let queries = queryString.split("&"), params = {}, temp;

    for (let i = 0, l = queries.length; i < l; i++) {
        temp = queries[i].split('=');
        if (temp[1] !== '') {
            params[temp[0]] = temp[1];
        }
    }
    return params;
}

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