मैं एक क्वेरी स्ट्रिंग पैरामीटर कैसे जोड़ या अपडेट कर सकता हूं?

Question

जावास्क्रिप्ट के साथ मैं url में क्वेरी स्ट्रिंग पैरामीटर कैसे जोड़ सकता हूं यदि वह मौजूद नहीं है या यदि वह मौजूद है, तो वर्तमान मूल्य को अपडेट करें? मैं अपने ग्राहक पक्ष के विकास के लिए jquery का उपयोग कर रहा हूं।

Comments

ऐसा लगता है जैसे मैंने अपने करियर के बारे में 100 बार जावास्क्रिप्ट में "parseQueryString" फ़ंक्शन लिखा है। यह मुश्किल नहीं है। मुख्य बिंदु, String#splitअधिकतम विभाजन के लिए दूसरा पैरामीटर लेता है। jQuery का mapभी मददगार होगा।

— jpsimons

इस SO पोस्ट के कई समाधान हैं stackoverflow.com/questions/1090948/…

— दिलीप राजकुमार

कुछ लोग इस प्रश्न को "एड्रेस बार में URL कैसे बदलें" और अन्य "किसी भी URL चर को कैसे बदलें" का अर्थ ले रहे हैं

— PANDWood

stackoverflow.com/questions/486896/… के

— उपयोगकर्ता

Answer 1

मैंने निम्नलिखित फ़ंक्शन लिखा है जो यह हासिल करता है कि मैं क्या हासिल करना चाहता हूं:

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}

Comments

URI में कोई हैश होने पर यह उत्तर काम नहीं करता है - क्वेरी स्ट्रिंग्स को हैश से पहले रखा जाना चाहिए, अन्यथा वे सर्वर पर नहीं भेजे जाते हैं। jsfiddle.net/4yXzR

— ग्रेग

[?|&]होना चाहिए[?&]

— soju

varविभाजक घोषणा से ठीक पहले जोड़कर विभाजक चर को स्थानीय फ़ंक्शन तक सीमित करें ।

— एंड्रिया सालिसीटी

मुझे लगता है, आपको value = encodeURIComponent(value);पहली पंक्ति में जोड़ना चाहिए , अन्यथा लाइन ब्रेक सही ढंग से बच नहीं रहे हैं।

— फेलिक्स

यह हैश का भी ध्यान रखेगा

— Niyaz

Answer 2

मैंने समाधान का विस्तार किया है और इसे दूसरे के साथ जोड़ दिया है जो मुझे उपयोगकर्ताओं के इनपुट के आधार पर क्वेरिस्ट्रिंग मापदंडों को बदलने / अपडेट करने / हटाने के लिए मिला और urls एंकर को ध्यान में रखते हुए।

मान की आपूर्ति नहीं करने से पैरामीटर को हटा दिया जाएगा, आपूर्ति करने से पैरामीटर जोड़ / अपडेट हो जाएगा। यदि कोई URL नहीं दिया गया है, तो इसे window.location से पकड़ा जाएगा

function UpdateQueryString(key, value, url) {
    if (!url) url = window.location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
        hash;

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null) {
            return url.replace(re, '$1' + key + "=" + value + '$2$3');
        } 
        else {
            hash = url.split('#');
            url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
                url += '#' + hash[1];
            }
            return url;
        }
    }
    else {
        if (typeof value !== 'undefined' && value !== null) {
            var separator = url.indexOf('?') !== -1 ? '&' : '?';
            hash = url.split('#');
            url = hash[0] + separator + key + '=' + value;
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
                url += '#' + hash[1];
            }
            return url;
        }
        else {
            return url;
        }
    }
}

अपडेट करें

क्वेरिस्ट्रिंग में पहले पैरामीटर को हटाते समय एक बग था, मैंने एक फिक्स को शामिल करने के लिए रेगेक्स और परीक्षण को फिर से काम किया है।

दूसरा अपडेट

जैसा कि @ JarónBarends द्वारा सुझाव दिया गया है - 0 मान सेट करने की अनुमति देने के लिए अपरिभाषित और अशक्त के खिलाफ जांच करने के लिए टीक मान की जाँच करें

तीसरा अपडेट

एक बग था जहां हैशटैग से पहले सीधे एक querystring वैरिएबल को हटाने से हैशटैग प्रतीक खो जाता है जिसे ठीक कर दिया गया है

चौथा अपडेट

पहले RegExp ऑब्जेक्ट में regex ऑप्टिमाइज़ेशन इंगित करने के लिए @rooby धन्यवाद। (@?; &) के साथ इश्यू के कारण प्रारंभिक रेगेक्स (@? | &) पर सेट करें

पाँचवाँ अपडेट

If / और कथन में hash var घोषित करने को हटाना

Comments

बस की 'truthiness' की जाँच के valueइस क्वेरी स्ट्रिंग से चर दूर करने के लिए कारण होगा जब आप उनके मूल्य को 0 पर इतना बजाय सेट if (value) {}का उपयोग करना चाहिएif (typeOf value !== 'undefined' && value !== null) {}

— Jaron barends

RegExp में ([? | &]) वास्तव में होना चाहिए ([??])

— rooby

मजेदार है कि मूल समाधान से कैसे ले जाया गया - का उपयोग भी कर सकते हैं (\? | &)

— ellemayo

क्रोम संस्करण में regex निर्माण पर "अवैध नियमित अपवाद / अमान्य समूह" अपवाद प्राप्त करना, 31.0.1650.63, शुरुआत में वापस आने के द्वारा हल किया गया "([??]]"

— Yonatan Karni

ऐसा नहीं है कि के लिए मुझे ओसीडी किया जा रहा है, लेकिन चर को छोड़कर इस मामले को hashदो बार घोषित किया जाता है;)

— wlingke

Answer 3

URLSearchParams उपयोगिता के साथ संयोजन में इस के लिए उपयोगी हो सकता है window.location.search। उदाहरण के लिए:

if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search);
    searchParams.set("foo", "bar");
    window.location.search = searchParams.toString();
}

अब इस fooबात पर barध्यान दिए बिना कि यह पहले से मौजूद है या नहीं।

हालाँकि, उपरोक्त असाइनमेंट से window.location.searchपेज लोड होगा, इसलिए यदि यह वांछनीय नहीं है तो इतिहास एपीआई का उपयोग इस प्रकार करें:

if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search)
    searchParams.set("foo", "bar");
    var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
    history.pushState(null, '', newRelativePathQuery);
}

अब आपको क्वेरी स्ट्रिंग्स के संभावित अस्तित्व को संभालने के लिए अपने स्वयं के रेगेक्स या तर्क को लिखने की आवश्यकता नहीं है।

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

अपडेट: मेरे मूल उत्तर के बाद से ब्राउज़र समर्थन में सुधार हुआ है।

Comments

पोली फिल, अच्छा नहीं है, Unable to set property '__URLSearchParams__:0.8503766759030615' of undefined or null reference यानी 11 पर आपको वह त्रुटि मिलती है। यदि यह एक गिरावट के रूप में काम नहीं करता है तो यह एक पॉलीफ़िल नहीं है।

— वैल

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

— Flion

सही उत्तर, हालाँकि यह हैशटैग को हैंडल नहीं करता है जब हैशटैग url में मौजूद होता है। हैश के सरल newRelativePathQueryvar newRelativePathQuery = window.location.pathname + '?' + searchParams.toString() + window.location.hash;

— उपांग

Answer 4

@ शौकिया जवाब (और अब @j_walker_dev टिप्पणी से फिक्स को शामिल करना) के आधार पर, लेकिन यूआरएल में हैश टैग के बारे में टिप्पणी को ध्यान में रखते हुए मैं निम्नलिखित का उपयोग करता हूं:

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  } else {
    var hash =  '';
    if( uri.indexOf('#') !== -1 ){
        hash = uri.replace(/.*#/, '#');
        uri = uri.replace(/#.*/, '');
    }
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";    
    return uri + separator + key + "=" + value + hash;
  }
}

[?|&]Regex में ठीक करने के लिए संपादित जो निश्चित [?&]रूप से टिप्पणियों में बताया जाना चाहिए

संपादित करें: वैकल्पिक संस्करण URL params को हटाने का समर्थन करने के लिए। मैंने value === undefinedहटाने का संकेत देने के तरीके के रूप में उपयोग किया है । उपयोग कर सकते हैं value === falseया एक अलग इनपुट परम के रूप में भी चाहता था।

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
  if( value === undefined ) {
    if (uri.match(re)) {
        return uri.replace(re, '$1$2');
    } else {
        return uri;
    }
  } else {
    if (uri.match(re)) {
        return uri.replace(re, '$1' + key + "=" + value + '$2');
    } else {
    var hash =  '';
    if( uri.indexOf('#') !== -1 ){
        hash = uri.replace(/.*#/, '#');
        uri = uri.replace(/#.*/, '');
    }
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";    
    return uri + separator + key + "=" + value + hash;
  }
  }  
}

इसे https://jsfiddle.net/bp3tmuxh/1/ पर एक्शन में देखें

Comments

बहुत क्लीनर। कोणीय यूआई-राउटर उपयोगकर्ताओं के लिए FYI जो "हो सकता है?" हैश में भी। बढ़ते var separatorके साथ "/ एप्लिकेशन # / शांत? मज़ा = सच" एक बग वापसी फिक्स ऊपर सही करने के लिए लाइन। यह विभाजक के रूप में "&" का चयन करेगा भले ही अभी तक कोई वास्तविक क्वेरी स्ट्रिंग परम नहीं हैं। केवल ग्राहक हैं।

— j_walker_dev

जैसा कि अन्य उत्तरों पर टिप्पणियों में बताया गया है, [?|&]बस होना चाहिए [?&](अन्यथा मिलान होगा |)।

— बोंगर

हाँ, "([?|&])"अच्छा नहीं है। कृपया इसे var re = new RegExp("(?|&)" + key + "=.*?(&|#|$)", "i");या तो ठीक करें var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");( या अन्य तरीकों से एक अच्छा विस्तार!)

— याकूब

ठीक है, माफ करना, var re = new RegExp("(?|&)" + key + "=.*?(&|#|$)", "i");काम नहीं करता है, दूसरा एक करता है

— याकॉव

ऐसा लगता है कि मान छोड़ने से यह संस्करण क्वेरी स्ट्रिंग पैरामीटर को हटाने का समर्थन नहीं करता है। क्या मैं सही हू?

— jkupczak

Answer 5

यहाँ ऐसा करने के लिए मेरी लाइब्रेरी है: https://github.com/Mikhus/jsurl

var u = new Url;
u.query.param='value'; // adds or replaces the param
alert(u)

Answer 6

window.location.search पढ़ा / लिखा जाता है।

हालाँकि - क्वेरी स्ट्रिंग को संशोधित करने से आप जिस पृष्ठ पर हैं उसे पुनः निर्देशित करेंगे और सर्वर से रिफ्रेश का कारण बनेंगे।

यदि आप जो करने का प्रयास कर रहे हैं, वह क्लाइंट साइड स्थिति बनाए रखता है (और संभवतः इसे बुकमार्क-सक्षम बनाता है), तो आप क्वेरी स्ट्रिंग के बजाय URL हैश को संशोधित करना चाहेंगे, जो आपको एक ही पृष्ठ (window.location) पर बनाए रखता है। हैश पढ़ा / लिखा है)। यह है कि twitter.com जैसी वेब साइटें ऐसा कैसे करती हैं।

आपको काम करने के लिए बैक बटन भी चाहिए, आपको जावास्क्रिप्ट इवेंट्स को हैश चेंज इवेंट में बांधना होगा, इसके लिए एक अच्छा प्लगइन है http://benalman.com/projects/jquery-hashchange-plugin/

Comments

Twitter अब हैश को संशोधित नहीं करता है! हैश मर गया, इतिहास एपीआई का स्वागत करें !

— अल्बा मेंडेज़

यह मृत से बहुत दूर है। मुझे लगता है कि आप एक जादुई सपनों की भूमि में रह रहे हैं जहां विरासत ब्राउज़र संगतता का कोई सरोकार नहीं है। यह आपके लिए मामला हो सकता है, लेकिन यह निश्चित रूप से हम में से बाकी (या वास्तव में हम में से अधिकांश) के लिए मामला नहीं है। शायद मरना ज्यादा उचित है ...

— एरोनहस

एक साल बाद, यह एकमात्र अर्ध-हाल के ब्राउज़र की तरह दिखता है जो इसका समर्थन नहीं करता है IE 9

— डगलस.सेसर

Answer 7

यदि यह सेट नहीं है या आप उपयोग कर सकते हैं एक नए मूल्य के साथ अद्यतन करना चाहते हैं:

window.location.search = 'param=value'; // or param=new_value

यह सरल जावास्क्रिप्ट में है, वैसे।

संपादित करें

आप jquery क्वेरी-ऑब्जेक्ट प्लगइन का उपयोग करके प्रयास करना चाह सकते हैं

window.location.search = jQuery.query.set ("परम", 5);

Comments

हालांकि यह url पर किसी अन्य क्वेरी स्ट्रिंग पैरामीटर को बनाए नहीं रखेगा।

— शौकिया

आप सही हैं, मैं माफी माँगता हूँ .. एक अद्यतन के रूप में, मैंने अपने जवाब में एक और विकल्प जोड़ा :) :)

— tradyblix

यह काम नहीं कर रहा है, क्योंकि यह एक मूल्य को रीसेट नहीं करता है। "जोड़ें या अपडेट करें"

— पाओलो फलोमो

Answer 8

मुझे एहसास है कि यह सवाल पुराना है और मौत के लिए उत्तर दिया गया है, लेकिन यहाँ पर मेरा छुरा है। मैं यहां पहिया को फिर से मजबूत करने की कोशिश कर रहा हूं, क्योंकि मैं वर्तमान में स्वीकृत उत्तर का उपयोग कर रहा था और हाल ही में मुझे एक परियोजना में यूआरएल टुकड़े के mishandling।

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

अद्यतन: मैं URL को पार्स करने के लिए DOM का उपयोग करने के लिए एक शांत फ़ंक्शन में आया था , इसलिए मैंने उस तकनीक को यहां शामिल किया। यह फ़ंक्शन को छोटा और अधिक विश्वसनीय बनाता है। उस फ़ंक्शन के लेखक को सहारा।

/**
 * Add or update a query string parameter. If no URI is given, we use the current
 * window.location.href value for the URI.
 * 
 * Based on the DOM URL parser described here:
 * http://james.padolsey.com/javascript/parsing-urls-with-the-dom/
 *
 * @param   (string)    uri     Optional: The URI to add or update a parameter in
 * @param   (string)    key     The key to add or update
 * @param   (string)    value   The new value to set for key
 *
 * Tested on Chrome 34, Firefox 29, IE 7 and 11
 */
function update_query_string( uri, key, value ) {

    // Use window URL if no query string is provided
    if ( ! uri ) { uri = window.location.href; }

    // Create a dummy element to parse the URI with
    var a = document.createElement( 'a' ), 

        // match the key, optional square brackets, an equals sign or end of string, the optional value
        reg_ex = new RegExp( key + '((?:\\[[^\\]]*\\])?)(=|$)(.*)' ),

        // Setup some additional variables
        qs,
        qs_len,
        key_found = false;

    // Use the JS API to parse the URI 
    a.href = uri;

    // If the URI doesn't have a query string, add it and return
    if ( ! a.search ) {

        a.search = '?' + key + '=' + value;

        return a.href;
    }

    // Split the query string by ampersands
    qs = a.search.replace( /^\?/, '' ).split( /&(?:amp;)?/ );
    qs_len = qs.length; 

    // Loop through each query string part
    while ( qs_len > 0 ) {

        qs_len--;

        // Remove empty elements to prevent double ampersands
        if ( ! qs[qs_len] ) { qs.splice(qs_len, 1); continue; }

        // Check if the current part matches our key
        if ( reg_ex.test( qs[qs_len] ) ) {

            // Replace the current value
            qs[qs_len] = qs[qs_len].replace( reg_ex, key + '$1' ) + '=' + value;

            key_found = true;
        }
    }   

    // If we haven't replaced any occurrences above, add the new parameter and value
    if ( ! key_found ) { qs.push( key + '=' + value ); }

    // Set the new query string
    a.search = '?' + qs.join( '&' );

    return a.href;
}

Comments

यह वास्तव में अच्छा है, ठोस परीक्षण के मामले + डोम का उपयोग URL पार्सर के रूप में करता है। हालांकि मुझे दो मामले मिले: example.com/?param=val& => example.com/?param=val&&new=key --double & example.com/team => example.com/team?new=key अपेक्षित: टीम /? नया = कुंजी कुछ पुनर्निर्देशित / टीम? नया = कुंजी / टीम / और प्रश्न खो गए हैं।

— तिमार इवो बतिस

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

— डोमिनिक पी

मैंने कुछ परीक्षण मामलों को जोड़ा, जिनमें मैं भाग गया और काम कर रहा था। मैंने जितना हो सके डोम का इस्तेमाल करने की कोशिश की। मुख्य रूप से मुझे इसकी आवश्यकता थी कि एक ही डोमेन में रिश्तेदार लिंक के लिए भी काम करें। jsfiddle.net/Timar/7sjrhbm3

— टिमर इवो बैटिस

@ बीबर मुझे अप्रोच पसंद है क्योंकि यह ब्राउजर को हैवी लिफ्टिंग छोड़ देता है। जैसा कि आप यहां बहुत सारे उत्तरों से देखते हैं, यह समस्या इतनी सरल नहीं है जितनी कि यह लगता है। ए मामलों के बहुत सारे मामले हैं जिन्हें हल करने की आवश्यकता है। जब आप DOM का लाभ उठाते हैं, तो उनमें से अधिकांश मुफ्त में कवर किए जाते हैं।

— डोमिनिक पी

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

— डोमिनिक पी

Answer 9

यहाँ मेरा दृष्टिकोण है: location.params()फ़ंक्शन (नीचे दिखाया गया है) का उपयोग एक गेटर या सेटर के रूप में किया जा सकता है। उदाहरण:

URL दिया गया है http://example.com/?foo=bar&baz#some-hash,

1. location.params()सभी क्वेरी मापदंडों के साथ एक वस्तु वापस करेंगे {foo: 'bar', baz: true}:।
2. location.params('foo')वापस आ जाएगा 'bar'।
3. location.params({foo: undefined, hello: 'world', test: true})करने के लिए यूआरएल बदल जाएगा http://example.com/?baz&hello=world&test#some-hash।

यहां params()फ़ंक्शन है, जिसे वैकल्पिक रूप से window.locationऑब्जेक्ट को सौंपा जा सकता है ।

location.params = function(params) {
  var obj = {}, i, parts, len, key, value;

  if (typeof params === 'string') {
    value = location.search.match(new RegExp('[?&]' + params + '=?([^&]*)[&#$]?'));
    return value ? value[1] : undefined;
  }

  var _params = location.search.substr(1).split('&');

  for (i = 0, len = _params.length; i < len; i++) {
    parts = _params[i].split('=');
    if (! parts[0]) {continue;}
    obj[parts[0]] = parts[1] || true;
  }

  if (typeof params !== 'object') {return obj;}

  for (key in params) {
    value = params[key];
    if (typeof value === 'undefined') {
      delete obj[key];
    } else {
      obj[key] = value;
    }
  }

  parts = [];
  for (key in obj) {
    parts.push(key + (obj[key] === true ? '' : '=' + obj[key]));
  }

  location.search = parts.join('&');
};

Answer 10

यह मेरी प्राथमिकता है, और यह उन मामलों को शामिल करता है जिनके बारे में मैं सोच सकता हूं। क्या कोई इसे एकल प्रतिस्थापन के लिए कम करने का तरीका सोच सकता है?

function setParam(uri, key, val) {
    return uri
        .replace(RegExp("([?&]"+key+"(?=[=&#]|$)[^#&]*|(?=#|$))"), "&"+key+"="+encodeURIComponent(val))
        .replace(/^([^?&]+)&/, "$1?");
}

Comments

डोमिनिक पी stackoverflow.com/a/23529943/8385841

— टिमर इवो बैटिस

Answer 11

मुझे पता है कि यह काफी पुराना है, लेकिन मैं अपने काम के संस्करण को यहां लाना चाहता हूं ।

function addOrUpdateUrlParam(uri, paramKey, paramVal) {
  var re = new RegExp("([?&])" + paramKey + "=[^&#]*", "i");
  if (re.test(uri)) {
    uri = uri.replace(re, '$1' + paramKey + "=" + paramVal);
  } else {
    var separator = /\?/.test(uri) ? "&" : "?";
    uri = uri + separator + paramKey + "=" + paramVal;
  }
  return uri;
}

jQuery(document).ready(function($) {
  $('#paramKey,#paramValue').on('change', function() {
    if ($('#paramKey').val() != "" && $('#paramValue').val() != "") {
      $('#uri').val(addOrUpdateUrlParam($('#uri').val(), $('#paramKey').val(), $('#paramValue').val()));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="width:100%" type="text" id="uri" value="http://www.example.com/text.php">
<label style="display:block;">paramKey
  <input type="text" id="paramKey">
</label>
<label style="display:block;">paramValue
  <input type="text" id="paramValue">
</label>

नोट यह @elreimundo का एक संशोधित संस्करण है

Comments

डोमिनिक पी से jsFiddle के साथ परीक्षण किया: विफल :: example.com ? :: example.com/?¶m=new अपेक्षित: example.com/?param=new विफल :: example.com/?param :: example.com/?param¶m=new अपेक्षित: example.com/?param=new विफल :: example.com/?param=&param2 :: example.com/?param=new&param2 अपेक्षित: example.com/?param=new¶m2 असफल :: example.com/?param2=val¶m[]=val : : example.com/?param2=val¶m=dish=val¶m=new अपेक्षित: उदाहरण.

— com/

Answer 12

मेरा यहां से लेना ("सख्त उपयोग करें" के साथ संगत है; वास्तव में jQuery का उपयोग नहीं करता है):

function decodeURIParams(query) {
  if (query == null)
    query = window.location.search;
  if (query[0] == '?')
    query = query.substring(1);

  var params = query.split('&');
  var result = {};
  for (var i = 0; i < params.length; i++) {
    var param = params[i];
    var pos = param.indexOf('=');
    if (pos >= 0) {
        var key = decodeURIComponent(param.substring(0, pos));
        var val = decodeURIComponent(param.substring(pos + 1));
        result[key] = val;
    } else {
        var key = decodeURIComponent(param);
        result[key] = true;
    }
  }
  return result;
}

function encodeURIParams(params, addQuestionMark) {
  var pairs = [];
  for (var key in params) if (params.hasOwnProperty(key)) {
    var value = params[key];
    if (value != null) /* matches null and undefined */ {
      pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))
    }
  }
  if (pairs.length == 0)
    return '';
  return (addQuestionMark ? '?' : '') + pairs.join('&');
}

//// alternative to $.extend if not using jQuery:
// function mergeObjects(destination, source) {
//   for (var key in source) if (source.hasOwnProperty(key)) {
//     destination[key] = source[key];
//   }
//   return destination;
// }

function navigateWithURIParams(newParams) {
  window.location.search = encodeURIParams($.extend(decodeURIParams(), newParams), true);
}

उदाहरण उपयोग:

// add/update parameters
navigateWithURIParams({ foo: 'bar', boz: 42 });

// remove parameter
navigateWithURIParams({ foo: null });

// submit the given form by adding/replacing URI parameters (with jQuery)
$('.filter-form').submit(function(e) {
  e.preventDefault();
  navigateWithURIParams(decodeURIParams($(this).serialize()));
});

Answer 13

@Ellemayo ने जो उत्तर दिया, उसके आधार पर, मैं निम्नलिखित समाधान के साथ आया, जो यदि वांछित हो तो हैश टैग को अक्षम करने की अनुमति देता है:

function updateQueryString(key, value, options) {
    if (!options) options = {};

    var url = options.url || location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"), hash;

    hash = url.split('#');
    url = hash[0];
    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null) {
            url = url.replace(re, '$1' + key + "=" + value + '$2$3');
        } else {
            url = url.replace(re, '$1$3').replace(/(&|\?)$/, '');
        }
    } else if (typeof value !== 'undefined' && value !== null) {
        var separator = url.indexOf('?') !== -1 ? '&' : '?';
        url = url + separator + key + '=' + value;
    }

    if ((typeof options.hash === 'undefined' || options.hash) &&
        typeof hash[1] !== 'undefined' && hash[1] !== null)
        url += '#' + hash[1];
    return url;
}

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

updateQueryString('foo', 'bar', {
    url: 'http://my.example.com#hash',
    hash: false
});

का परिणाम:

http://my.example.com?foo=bar

Comments

शैलीगत वक्रोक्ति: typeof value !== 'undefined' && value !== nullअधिक स्पष्ट है, लेकिन value != nullएक ही बात का मतलब है और अधिक संक्षिप्त है।

— एप्सिलॉन

Answer 14

यहाँ एक छोटा संस्करण है जो ध्यान रखता है

• किसी दिए गए पैरामीटर के साथ या उसके बिना क्वेरी
• कई पैरामीटर मानों के साथ क्वेरी
• हैश युक्त क्वेरी

कोड:

var setQueryParameter = function(uri, key, value) {
  var re = new RegExp("([?&])("+ key + "=)[^&#]*", "g");
  if (uri.match(re)) 
    return uri.replace(re, '$1$2' + value);

  // need to add parameter to URI
  var paramString = (uri.indexOf('?') < 0 ? "?" : "&") + key + "=" + value;
  var hashIndex = uri.indexOf('#');
  if (hashIndex < 0)
    return uri + paramString;
  else
    return uri.substring(0, hashIndex) + paramString + uri.substring(hashIndex);
}

Regex विवरण पाया जा सकता है यहाँ ।

नोट : यह समाधान @ साहित्यकार जवाब पर आधारित है, लेकिन कई सुधारों के साथ।

Answer 15

वह कोड जो ES6 और jQuery का उपयोग करके मौजूदा url में मापदंडों की एक सूची देता है:

class UrlBuilder {
    static appendParametersToUrl(baseUrl, listOfParams) {

        if (jQuery.isEmptyObject(listOfParams)) {
            return baseUrl;
        }

        const newParams = jQuery.param(listOfParams);

        let partsWithHash = baseUrl.split('#');
        let partsWithParams = partsWithHash[0].split('?');

        let previousParams = '?' + ((partsWithParams.length === 2) ? partsWithParams[1] + '&' : '');
        let previousHash = (partsWithHash.length === 2) ? '#' + partsWithHash[1] : '';

        return partsWithParams[0] + previousParams + newParams + previousHash;
    }
}

जहां listOfParams पसंद है

const listOfParams = {
    'name_1': 'value_1',
    'name_2': 'value_2',
    'name_N': 'value_N',
};

उपयोग का उदाहरण:

    UrlBuilder.appendParametersToUrl(urlBase, listOfParams);

तेजी से परीक्षण:

    url = 'http://hello.world';
    console.log('=> ', UrlParameters.appendParametersToUrl(url, null));
    // Output:  http://hello.world

    url = 'http://hello.world#h1';
    console.log('=> ', UrlParameters.appendParametersToUrl(url, null));
    // Output:  http://hello.world#h1

    url = 'http://hello.world';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
    // Output: http://hello.world?p1=v1&p2=v2

    url = 'http://hello.world?p0=v0';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
    // Output: http://hello.world?p0=v0&p1=v1&p2=v2

    url = 'http://hello.world#h1';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
   // Output: http://hello.world?p1=v1&p2=v2#h1

    url = 'http://hello.world?p0=v0#h1';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
    // Output: http://hello.world?p0=v0&p1=v1&p2=v2#h1

Answer 16

नियमित अभिव्यक्तियों का उपयोग किए बिना एक अलग दृष्टिकोण । Url के अंत में 'हैश' एंकर का समर्थन करता है और साथ ही कई प्रश्न चिह्न चार्जर्स (?) भी लगाता है। नियमित अभिव्यक्ति दृष्टिकोण से थोड़ा तेज होना चाहिए।

function setUrlParameter(url, key, value) {
  var parts = url.split("#", 2), anchor = parts.length > 1 ? "#" + parts[1] : '';
  var query = (url = parts[0]).split("?", 2);
  if (query.length === 1) 
    return url + "?" + key + "=" + value + anchor;

  for (var params = query[query.length - 1].split("&"), i = 0; i < params.length; i++)
    if (params[i].toLowerCase().startsWith(key.toLowerCase() + "="))
      return params[i] = key + "=" + value, query[query.length - 1] = params.join("&"), query.join("?") + anchor;

  return url + "&" + key + "=" + value + anchor
}

Answer 17

Jquery के आधार पर URL से क्वेरी स्ट्रिंग पैरामीटर को जोड़ने, हटाने और संशोधित करने के लिए इस फ़ंक्शन का उपयोग करें

/**
@param String url
@param object param {key: value} query parameter
*/
function modifyURLQuery(url, param){
    var value = {};

    var query = String(url).split('?');

    if (query[1]) {
        var part = query[1].split('&');

        for (i = 0; i < part.length; i++) {
            var data = part[i].split('=');

            if (data[0] && data[1]) {
                value[data[0]] = data[1];
            }
        }
    }

    value = $.extend(value, param);

    // Remove empty value
    for (i in value){
        if(!value[i]){
            delete value[i];
        }
    }

    // Return url with modified parameter
    if(value){
        return query[0] + '?' + $.param(value);
    } else {
        return query[0];
    }
}

नया जोड़ें और url में मौजूदा पैरामीटर को संशोधित करें

var new_url = modifyURLQuery("http://google.com?foo=34", {foo: 50, bar: 45});
// Result: http://google.com?foo=50&bar=45

मौजूदा निकालें

var new_url = modifyURLQuery("http://google.com?foo=50&bar=45", {bar: null});
// Result: http://google.com?foo=50

Answer 18

जिसका उपयोग करके jQueryहम नीचे की तरह कर सकते हैं

var query_object = $.query_string;
query_object["KEY"] = "VALUE";
var new_url = window.location.pathname + '?'+$.param(query_object)

चर में new_urlहमारे पास नए क्वेरी पैरामीटर होंगे।

संदर्भ: http://api.jquery.com/jquery.param/

Answer 19

window.location.searchगैल और ट्रैडीब्लिक्स द्वारा सुझाए गए संशोधन के लिए एक कोड उदाहरण देने के लिए :

var qs = window.location.search || "?";
var param = key + "=" + value; // remember to URI encode your parameters
if (qs.length > 1) {
    // more than just the question mark, so append with ampersand
    qs = qs + "&";
}
qs = qs + param;
window.location.search = qs;

Answer 20

जावा स्क्रिप्ट कोड एक विशिष्ट क्वेरी स्ट्रिंग खोजने और उसके मान को बदलने के लिए *

('input.letter').click(function () {
                //0- prepare values
                var qsTargeted = 'letter=' + this.value; //"letter=A";
                var windowUrl = '';
                var qskey = qsTargeted.split('=')[0];
                var qsvalue = qsTargeted.split('=')[1];
                //1- get row url
                var originalURL = window.location.href;
                //2- get query string part, and url
                if (originalURL.split('?').length > 1) //qs is exists
                {
                    windowUrl = originalURL.split('?')[0];
                    var qs = originalURL.split('?')[1];
                    //3- get list of query strings
                    var qsArray = qs.split('&');
                    var flag = false;
                    //4- try to find query string key
                    for (var i = 0; i < qsArray.length; i++) {
                        if (qsArray[i].split('=').length > 0) {
                            if (qskey == qsArray[i].split('=')[0]) {
                                //exists key
                                qsArray[i] = qskey + '=' + qsvalue;
                                flag = true;
                                break;
                            }
                        }
                    }
                    if (!flag)//   //5- if exists modify,else add
                    {
                        qsArray.push(qsTargeted);
                    }
                    var finalQs = qsArray.join('&');
                    //6- prepare final url
                    window.location = windowUrl + '?' + finalQs;
                }
                else {
                    //6- prepare final url
                    //add query string
                    window.location = originalURL + '?' + qsTargeted;
                }
            })
        });

Answer 21

हाँ, मेरे पास एक मुद्दा था जहाँ मेरी झंझट ओवरफ्लो और डुप्लिकेट होगी, लेकिन यह मेरी अपनी सुस्ती के कारण था। इसलिए मैंने थोड़ा सा खेला और कुछ js jquery (वास्तविक सीज़ल) और C # मैजिक पर काम किया।

इसलिए मैंने अभी महसूस किया कि सर्वर द्वारा पारित मूल्यों के साथ किए जाने के बाद, मान अब और मायने नहीं रखते हैं, कोई पुन: उपयोग नहीं होता है, अगर ग्राहक एक ही काम करना चाहता था तो यह हमेशा एक नया अनुरोध होगा, भले ही इसका समान पैरामीटर पारित किए जा रहे हैं। और सभी क्लाइंटसाइड्स, इसलिए कुछ कैशिंग / कुकीज़ आदि उस संबंध में शांत हो सकते हैं।

जे एस:

$(document).ready(function () {
            $('#ser').click(function () {
                SerializeIT();
            });
            function SerializeIT() {
                var baseUrl = "";
                baseUrl = getBaseUrlFromBrowserUrl(window.location.toString());
                var myQueryString = "";
                funkyMethodChangingStuff(); //whatever else before serializing and creating the querystring
                myQueryString = $('#fr2').serialize();
                window.location.replace(baseUrl + "?" + myQueryString);
            }
            function getBaseUrlFromBrowserUrl(szurl) {
                return szurl.split("?")[0];
            } 
            function funkyMethodChangingStuff(){
               //do stuff to whatever is in fr2
            }
        });

HTML:

<div id="fr2">
   <input type="text" name="qURL" value="http://somewhere.com" />
   <input type="text" name="qSPart" value="someSearchPattern" />
</div>
<button id="ser">Serialize! and go play with the server.</button>

सी#:

    using System.Web;
    using System.Text;
    using System.Collections.Specialized;

    public partial class SomeCoolWebApp : System.Web.UI.Page
    {
        string weburl = string.Empty;
        string partName = string.Empty;

        protected void Page_Load(object sender, EventArgs e)
        {
            string loadurl = HttpContext.Current.Request.RawUrl;
            string querySZ = null;
            int isQuery = loadurl.IndexOf('?');
            if (isQuery == -1) { 
                //If There Was no Query
            }
            else if (isQuery >= 1) {
                querySZ = (isQuery < loadurl.Length - 1) ? loadurl.Substring(isQuery + 1) : string.Empty;
                string[] getSingleQuery = querySZ.Split('?');
                querySZ = getSingleQuery[0];

                NameValueCollection qs = null;
                qs = HttpUtility.ParseQueryString(querySZ);

                weburl = qs["qURL"];
                partName = qs["qSPart"];
                //call some great method thisPageRocks(weburl,partName); or whatever.
          }
      }
  }

ठीक है आलोचना का स्वागत है (यह एक रात का मनमुटाव था इसलिए समायोजन पर ध्यान दें)। अगर यह सब मदद, यह अंगूठे, हैप्पी कोडिंग।

कोई डुप्लिकेट नहीं है, प्रत्येक अनुरोध जितना कि आपने इसे संशोधित किया है, और यह कैसे संरचित है, इस कारण से डोम पर wthin से अधिक प्रश्नों को गतिशील रूप से जोड़ना आसान है।

Answer 22

एंकर HTML तत्व के इनबिल्ट गुणों का उपयोग करके यहां एक वैकल्पिक विधि दी गई है:

• बहु-मूल्यवान मापदंडों को संभालता है।
• # टुकड़ा, या क्वेरी स्ट्रिंग के अलावा कुछ भी संशोधित करने का कोई जोखिम नहीं है।
• पढ़ना थोड़ा आसान हो सकता है? लेकिन यह लंबा है।

    var a = document.createElement('a'),

	getHrefWithUpdatedQueryString = function(param, value) {
	    return updatedQueryString(window.location.href, param, value);
	},

	updatedQueryString = function(url, param, value) {
	    /*
	     A function which modifies the query string 
             by setting one parameter to a single value.

	     Any other instances of parameter will be removed/replaced.
	     */
	    var fragment = encodeURIComponent(param) + 
                           '=' + encodeURIComponent(value);

	    a.href = url;

	    if (a.search.length === 0) {
		a.search = '?' + fragment;
	    } else {
		var didReplace = false,
		    // Remove leading '?'
		    parts = a.search.substring(1)
		// Break into pieces
			.split('&'),

		    reassemble = [],
		    len = parts.length;

		for (var i = 0; i < len; i++) {
		    
		    var pieces = parts[i].split('=');
		    if (pieces[0] === param) {
			if (!didReplace) {
			    reassemble.push('&' + fragment);
			    didReplace = true;
			}
		    } else {
			reassemble.push(parts[i]);
		    }
		}

		if (!didReplace) {
		    reassemble.push('&' + fragment);
		}

		a.search = reassemble.join('&');
	    }

	    return a.href;
	};

Answer 23

यदि आप एक साथ कई पैरामीटर सेट करना चाहते हैं:

function updateQueryStringParameters(uri, params) {
    for(key in params){
      var value = params[key],
          re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"),
          separator = uri.indexOf('?') !== -1 ? "&" : "?";
      if (uri.match(re)) {
        uri = uri.replace(re, '$1' + key + "=" + value + '$2');
      }
      else {
        uri = uri + separator + key + "=" + value;
      }
    }
    return uri;
}

@ शौकिया के रूप में एक ही कार्य

अगर jslint आपको एक त्रुटि देता है, तो लूप के बाद इसे जोड़ें

if(params.hasOwnProperty(key))

Comments

हैश या हैंडल नहीं करता है, या पैरामीटर को कोई मान नहीं सौंपा गया है ( http://abc.def/?a&b&c)

— एडम लेगट

Answer 24

इस पृष्ठ पर बहुत सारे अजीब और अनावश्यक रूप से जटिल उत्तर हैं। उच्चतम रेटेड एक, @ शौकिया, काफी अच्छा है, हालांकि इसमें रेजस्टेप में अनावश्यक फुलाना है। यहाँ क्लीनर RegExp और एक क्लीनर replaceकॉल के साथ थोड़ा अधिक इष्टतम समाधान है :

function updateQueryStringParamsNoHash(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=[^&]*", "i");
  return re.test(uri)
       ? uri.replace(re, '$1' + key + "=" + value)
       : uri + separator + key + "=" + value
  ;
}

एक अतिरिक्त बोनस के रूप में, यदि uriकोई स्ट्रिंग नहीं है, तो आपको कॉल करने की कोशिश करने matchया replaceउन चीजों को लागू करने के लिए त्रुटियां नहीं मिलेंगी जो उन तरीकों को लागू नहीं कर सकती हैं।

और यदि आप हैश के मामले को संभालना चाहते हैं (और आपने पहले से ही ठीक से फॉर्मेट किए गए HTML के लिए एक जांच की है), तो आप एक ही तर्क वाले नए फ़ंक्शन को लिखने के बजाय मौजूदा फ़ंक्शन का लाभ उठा सकते हैं:

function updateQueryStringParams(url, key, value) {
    var splitURL = url.split('#');
    var hash = splitURL[1];
    var uri = updateQueryStringParamsNoHash(splitURL[0]);
    return hash == null ? uri : uri + '#' + hash;
}

या आप @ एडम के अन्यथा उत्कृष्ट उत्तर के लिए कुछ मामूली बदलाव कर सकते हैं:

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=[^&#]*", "i");
  if (re.test(uri)) {
    return uri.replace(re, '$1' + key + "=" + value);
  } else {
    var matchData = uri.match(/^([^#]*)(#.*)?$/);
    var separator = /\?/.test(uri) ? "&" : "?";    
    return matchData[0] + separator + key + "=" + value + (matchData[1] || '');
  }
}

Comments

यह अंतिम फ़ंक्शन में एक लापता ब्रैकेट है: var matchData = uri.match (/ ^( / / ^##des*)(#.*)

— जैमर

separatorमें परिभाषित नहीं है updateQueryStringParamsNoHash। में updateQueryStringParameter, यदि पैरामीटर बदल रहे हैं एक मूल्य (जैसे निर्दिष्ट नहीं की गई नीचे सब कुछ टूट जाता है http://abc.def/?a&b&c)।

— एडम लेगट

Answer 25

इस उद्देश्य की पूर्ति करनी चाहिए:

function updateQueryString(url, key, value) {
    var arr =  url.split("#");
    var url = arr[0];
    var fragmentId = arr[1];
    var updatedQS = "";
    if (url.indexOf("?") == -1) {
        updatedQS = encodeURIComponent(key) + "=" + encodeURIComponent(value);
    }
    else {
        updatedQS = addOrModifyQS(url.substring(url.indexOf("?") + 1), key, value); 
    }
    url = url.substring(0, url.indexOf("?")) + "?" + updatedQS;
    if (typeof fragmentId !== 'undefined') {
        url = url + "#" + fragmentId;
    }
    return url;
}

function addOrModifyQS(queryStrings, key, value) {
    var oldQueryStrings = queryStrings.split("&");
    var newQueryStrings = new Array();
    var isNewKey = true;
    for (var i in oldQueryStrings) {
        var currItem = oldQueryStrings[i];
        var searchKey = key + "=";
        if (currItem.indexOf(searchKey) != -1) {
            currItem = encodeURIComponent(key) + "=" + encodeURIComponent(value);
            isNewKey = false;
        }
        newQueryStrings.push(currItem);
    }
    if (isNewKey) {
        newQueryStrings.push(encodeURIComponent(key) + "=" + encodeURIComponent(value));
    }
    return newQueryStrings.join("&");
}