जावास्क्रिप्ट के साथ URL में एक पैरामीटर जोड़ना

Question

AJAX कॉल का उपयोग करने वाले वेब एप्लिकेशन में, मुझे एक अनुरोध सबमिट करना होगा लेकिन URL के अंत में एक पैरामीटर जोड़ना होगा, उदाहरण के लिए:

मूल URL:

http: //server/myapp.php आईडी = 10

परिणामी URL:

http: //server/myapp.php? id = 10 और सक्षम = सत्य

एक जावास्क्रिप्ट फ़ंक्शन की तलाश है जो प्रत्येक पैरामीटर को देखने वाले URL को पार्स करता है, फिर नया पैरामीटर जोड़ता है या यदि पहले से मौजूद है, तो मान को अपडेट करता है।

Comments

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

— सीएसएल

मेरे पास एक बार ऐसा ही दृश्य था और मुझे पीटर ब्रोमबर्ग का यह लेख बहुत मददगार लगा:

— सेरेब्रस

window.history.pushState ('पेज 2', 'टाइटल', डॉक्यूमेंट.लोकेशन + '/ पेज 2.php); लोड हो रहा है पेज के बिना अपने काम करेंगे

— Rutunj sheladiya

इस सवाल के बेहतर जवाब हैं यहां stackoverflow.com/questions/6953944/…

— rkb

अविश्वसनीय यह इस गरीब भाषा में मूल निवासी नहीं है कि जेएस है ....

— बोह्र

Answer 1

एक बुनियादी कार्यान्वयन जिसे आपको अनुकूलित करने की आवश्यकता होगी वह कुछ इस तरह दिखाई देगा:

function insertParam(key, value) {
    key = encodeURIComponent(key);
    value = encodeURIComponent(value);

    // kvp looks like ['key1=value1', 'key2=value2', ...]
    var kvp = document.location.search.substr(1).split('&');
    let i=0;

    for(; i<kvp.length; i++){
        if (kvp[i].startsWith(key + '=')) {
            let pair = kvp[i].split('=');
            pair[1] = value;
            kvp[i] = pair.join('=');
            break;
        }
    }

    if(i >= kvp.length){
        kvp[kvp.length] = [key,value].join('=');
    }

    // can return this or...
    let params = kvp.join('&');

    // reload page with new params
    document.location.search = params;
}

यह रेगेक्स या खोज आधारित समाधान के रूप में लगभग दोगुना है, लेकिन यह पूरी तरह से क्वेरिस्ट्रिंग की लंबाई और किसी भी मैच के सूचकांक पर निर्भर करता है

---

धीमी रेगेक्स विधि जिसे मैंने पूर्णता के लिए बेंचमार्क किया (लगभग + 150% धीमा)

function insertParam2(key,value)
{
    key = encodeURIComponent(key); value = encodeURIComponent(value);

    var s = document.location.search;
    var kvp = key+"="+value;

    var r = new RegExp("(&|\\?)"+key+"=[^\&]*");

    s = s.replace(r,"$1"+kvp);

    if(!RegExp.$1) {s += (s.length>0 ? '&' : '?') + kvp;};

    //again, do what you will here
    document.location.search = s;
}

Comments

एक बार फिर धन्यवाद। देख lessanvaezi.com/wp-content/uploads/2009/01/test.html तरीकों की एक बुनियादी तुलना के लिए

— Lessan वैज़ी

URL पैरामीटर से बचने के लिए भागने () का उपयोग करना गलत है। यह उनमें "+" के साथ मूल्यों के लिए टूट जाता है। आपको इसके बजाय encodeURIComponent का उपयोग करना चाहिए। पूरी चर्चा: xkr.us/articles/javascript/encode-compare

— एंटोनिन हिल्डेब्रांड

मैं इस फ़ंक्शन को कॉल कर रहा हूं और पेज अनंत लूप में फिर से लोड हो रहा है। कृपया सहायता कीजिए!

— सुमित

जब कोई पैरामीटर पहले से ही url में नहीं हैं, तो आपको? & param = value

— Roy Toledo

आप के encodeURIComponentबजाय का उपयोग नहीं किया जाना चाहिए encodeURI? अन्यथा आपके नाम या मूल्य में कोई भी वर्ण =, &URI को दूषित कर देगा।

— एड्रियन प्रैंक

Answer 2

आप इनमें से किसी एक का उपयोग कर सकते हैं:

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

उदाहरण:

var url = new URL("http://foo.bar/?x=1&y=2");

// If your expected result is "http://foo.bar/?x=1&y=2&x=42"
url.searchParams.append('x', 42);

// If your expected result is "http://foo.bar/?x=42&y=2"
url.searchParams.set('x', 42);

Comments

मैं एक मूल्य के बिना एक क्वेरी पैरामीटर जोड़ने के लिए, जोड़ने जैसे चाहें XMLकरने के लिए http://foo.bar/?x=1&y=2इतना है कि अंतिम परिणाम है http://foo.bar/?x=1&y=2&XML। क्या यह संभव है? मैंने कोशिश की url.searchParams.set('XML');, url.searchParams.set('XML', null);और url.searchParams.set('XML', undefined);- और लेकिन क्रोम 63 में किसी ने काम नहीं किया ।

— अब्दुल

धन्यवाद! बहुत बुरा यह iOS द्वारा समर्थित नहीं है, फिर भी। developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

— कांजी

बहुत बुरा IE यह समर्थन नहीं करता है।

— स्प्रेड

iOS अब URLSearchParams (@ कांजी की टिप्पणी के 9 दिन बाद से) का समर्थन करता है

— MJeffryes

खुशखबरी @MJeffryes! अभी भी IE और नेटस्केप द्वारा समर्थित नहीं है।

— वियनी बजार्ट

Answer 3

आप सभी के योगदान के लिए धन्यवाद। मैंने एनाकाटा कोड का उपयोग किया और संशोधित करने के लिए उस मामले को भी शामिल किया जहां यूआरएल में कोई क्वेरी स्ट्रिंग नहीं है। आशा है कि यह मदद करेगा।

function insertParam(key, value) {
        key = escape(key); value = escape(value);

        var kvp = document.location.search.substr(1).split('&');
        if (kvp == '') {
            document.location.search = '?' + key + '=' + value;
        }
        else {

            var i = kvp.length; var x; while (i--) {
                x = kvp[i].split('=');

                if (x[0] == key) {
                    x[1] = value;
                    kvp[i] = x.join('=');
                    break;
                }
            }

            if (i < 0) { kvp[kvp.length] = [key, value].join('='); }

            //this will reload the page, it's likely better to store this until finished
            document.location.search = kvp.join('&');
        }
    }

Comments

यह से परिवर्तन करने के लिए बेहतर होगा escape(key)और escape(value)करने के लिए encodeURIComponentकार्य करते हैं।

— kolobok

यह वास्तव में जाँच करनी चाहिए if (kvp.length==1 && kvp[0]="")?

— चार्ल्स एल।

@CharlesL। बेहतर हैif (document.location.search)

— हासिमोव रोमन

Answer 4

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

function addParameterToURL(param){
    _url = location.href;
    _url += (_url.split('?')[1] ? '&':'?') + param;
    return _url;
}

Comments

आपको url में "#" का भी हिसाब रखना चाहिए। यहाँ कुछ कोड स्लोप है:url = (url.indexOf("?") != -1 ? url.split("?")[0]+"?"+part+"&"+url.split("?")[1] : (url.indexOf("#") != -1 ? url.split("#")[0]+"?"+part+"#"+ url.split("#")[1] : url+'?'+part));

— kanzure

@kanzure यह बात नरक के रूप में बुराई लगती है, लेकिन यह वही है जो मैं चाहता था। धन्यवाद।

— चाड वॉन नौ

एकल वर्ण के अस्तित्व की जाँच करने के लिए url को क्यों विभाजित करें? भी सांकेतिक शब्दों में बदलना करने के लिए मत भूलना ... कुछ और पसंदfunction appendQs(url, key, value) { return url + (url.indexOf('?') >= 0 ? "&" : '?') + encodeURIComponent(key) + "=" + encodeURIComponent(value); };

— drzaus

इसे ठीक करो। यह फ़ंक्शन यह जांच नहीं करता है कि क्या पैरामीटर पहले से ही आपूर्ति है। मैंने यह परीक्षण किया और मिला https://localhost/preview/inventory.html?sortci=priceASC&sortci=priceASC&sortci=stitle।

— Jay

@ जय, इसे ठीक करने की आवश्यकता क्यों है? अपनी मान्यताओं की जाँच करें। डुप्लिकेट क्वेरी स्ट्रिंग पैरामीटर कानूनी हैं, डुप्लिकेट फ़ॉर्म फ़ील्ड के समान। यह है कि चेकबॉक्स सूचियों को कैसे लागू किया जाता है। HTML और ये फॉर्म विधि = प्राप्त होने पर क्वेरी स्ट्रिंग से गुजरेंगे।

— स्टीफन

Answer 5

यहाँ एक बहुत ही सरल संस्करण है, जो सुक्ष्म-अनुकूलित प्रदर्शन के बजाय सुगम्यता और कोड की कम पंक्तियों के लिए ट्रेडऑफ़ बनाता है (और हम कुछ मील के अंतर के बारे में बात कर रहे हैं, वास्तविक रूप से ... इस की प्रकृति के कारण (वर्तमान दस्तावेज़ के स्थान पर संचालन) ), यह एक पृष्ठ पर एक बार चलने की संभावना होगी)।

/**
* Add a URL parameter (or changing it if it already exists)
* @param {search} string  this is typically document.location.search
* @param {key}    string  the key to set
* @param {val}    string  value 
*/
var addUrlParam = function(search, key, val){
  var newParam = key + '=' + val,
      params = '?' + newParam;

  // If the "search" string exists, then build params from it
  if (search) {
    // Try to replace an existance instance
    params = search.replace(new RegExp('([?&])' + key + '[^&]*'), '$1' + newParam);

    // If nothing was replaced, then add the new param to the end
    if (params === search) {
      params += '&' + newParam;
    }
  }

  return params;
};

आप तब इस तरह का उपयोग करेंगे:

document.location.pathname + addUrlParam(document.location.search, 'foo', 'bar');

Comments

+1 मुझे पसंद है कि आप दस्तावेज़ से कुछ और कैसे निर्दिष्ट कर सकते हैं।

— उत्थान। खोज

+1 बहुत बढ़िया, मैं इस बात से सहमत हूं कि इस मामले में सुक्ष्मता से अनुकूलन की क्षमता अधिक महत्वपूर्ण है और मुझे खुशी है कि कोई व्यक्ति उस दृष्टिकोण को लेगा। @Muhd शायद जेएस इंजन में एक बग था जब आपने वह टिप्पणी लिखी थी, लेकिन मैंने इस संदर्भ में '$ 1' का परीक्षण किया और यह ठीक काम करता है।

— JMTyler

समाधान के लिए बहुत बहुत धन्यवाद, हालांकि मैं भी अटक जाता हूं अगर मैं एक मूल्य को बदलना चाहता हूं और वहां पहले से ही एक पैरामीटर है। इसके बजाय एक और यह $ 1 लिखता है

— कोडब्रीओ

गैरेट: क्या आप अपना उत्तर ठीक कर सकते हैं ताकि यह मौजूदा मापदंडों को सही ढंग से बदल दे? यह जगह की बस एक बात है [\?&]के साथ ([\?&])रेगुलर एक्सप्रेशन में (मैं सिर्फ यह संपादित करनी होगी अपने आप को लेकिन मुझे यकीन है कि अगर समुदाय नीति जवाब में बगों की अनुमति देता है नहीं कर रहा हूँ)।

— opyh

यह url के साथ काम नहीं कर रहा है जैसे " domain.tld " इसके ऐड "और" के बजाय "?"

— user706420

Answer 6

/**
* Add a URL parameter 
* @param {string} url 
* @param {string} param the key to set
* @param {string} value 
*/
var addParam = function(url, param, value) {
   param = encodeURIComponent(param);
   var a = document.createElement('a');
   param += (value ? "=" + encodeURIComponent(value) : ""); 
   a.href = url;
   a.search += (a.search ? "&" : "") + param;
   return a.href;
}

/**
* Add a URL parameter (or modify if already exists)
* @param {string} url 
* @param {string} param the key to set
* @param {string} value 
*/
var addOrReplaceParam = function(url, param, value) {
   param = encodeURIComponent(param);
   var r = "([&?]|&)" + param + "\\b(?:=(?:[^&#]*))*";
   var a = document.createElement('a');
   var regex = new RegExp(r);
   var str = param + (value ? "=" + encodeURIComponent(value) : ""); 
   a.href = url;
   var q = a.search.replace(regex, "$1"+str);
   if (q === a.search) {
      a.search += (a.search ? "&" : "") + str;
   } else {
      a.search = q;
   }
   return a.href;
}

url = "http://www.example.com#hashme";
newurl = addParam(url, "ciao", "1");
alert(newurl);

और कृपया ध्यान दें कि क्वेरी स्ट्रिंग में जोड़े जाने से पहले पैरामीटर को एन्कोड किया जाना चाहिए।

http://jsfiddle.net/48z7z4kx/

Comments

स्मॉल मेमोरी लीक - आप एंकर तत्व को हटाना चाहेंगे जो कि लौटने से पहले दस्तावेज़ में जोड़ा गया था।

— भांग

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

— भांग

यह समाधान उन URL के लिए एक अनुगामी स्लैश जोड़ता है जिनके पास कोई पथ नहीं है और पैरामीटर पुन: पैरामीटर हैं, जो अनावश्यक और संभवतः अवांछनीय परिवर्तन हैं। यह मौजूदा मापदंडों को बदलने के बजाय भी लागू होता है जिनका कोई मूल्य नहीं है (जैसे http://abc.def/?a&b&b)।

— एडम लेगेट

@AdamLeggett बग को इंगित करने के लिए धन्यवाद जो तब होता है जब अनुरोध पैरामीटर का कोई मूल्य नहीं होता है, मैंने बस अपना उत्तर निर्धारित किया है। शेष अजीब व्यवहार जिनके बारे में आप बात कर रहे हैं, यदि आप सही हैं, तो HTML एंकर ऑब्जेक्ट द्वारा उत्पन्न होते हैं जो आमतौर पर एक मानक ब्राउज़र घटक है। मैं दो बार जांच करने का सुझाव देता हूं क्योंकि बहुत संभावना नहीं है कि ब्राउज़र अनावश्यक या अवांछनीय व्यवहार जोड़ता है।

— १६

AddParam फ़ंक्शन का उद्देश्य वास्तव में कई बार एक पैरामीटर जोड़ रहा है, और शायद आपको पता होना चाहिए कि आप कई बार एक ही मान के साथ एक ही पैरामीटर पास कर सकते हैं। stackoverflow.com/questions/24059773/…

— 9

Answer 7

मेरे पास एक 'वर्ग' है जो ऐसा करता है और यहाँ यह है:

function QS(){
    this.qs = {};
    var s = location.search.replace( /^\?|#.*$/g, '' );
    if( s ) {
        var qsParts = s.split('&');
        var i, nv;
        for (i = 0; i < qsParts.length; i++) {
            nv = qsParts[i].split('=');
            this.qs[nv[0]] = nv[1];
        }
    }
}

QS.prototype.add = function( name, value ) {
    if( arguments.length == 1 && arguments[0].constructor == Object ) {
        this.addMany( arguments[0] );
        return;
    }
    this.qs[name] = value;
}

QS.prototype.addMany = function( newValues ) {
    for( nv in newValues ) {
        this.qs[nv] = newValues[nv];
    }
}

QS.prototype.remove = function( name ) {
    if( arguments.length == 1 && arguments[0].constructor == Array ) {
        this.removeMany( arguments[0] );
        return;
    }
    delete this.qs[name];
}

QS.prototype.removeMany = function( deleteNames ) {
    var i;
    for( i = 0; i < deleteNames.length; i++ ) {
        delete this.qs[deleteNames[i]];
    }
}

QS.prototype.getQueryString = function() {
    var nv, q = [];
    for( nv in this.qs ) {
        q[q.length] = nv+'='+this.qs[nv];
    }
    return q.join( '&' );
}

QS.prototype.toString = QS.prototype.getQueryString;

//examples
//instantiation
var qs = new QS;
alert( qs );

//add a sinle name/value
qs.add( 'new', 'true' );
alert( qs );

//add multiple key/values
qs.add( { x: 'X', y: 'Y' } );
alert( qs );

//remove single key
qs.remove( 'new' )
alert( qs );

//remove multiple keys
qs.remove( ['x', 'bogus'] )
alert( qs );

मैंने toString पद्धति को ओवरराइड कर दिया है इसलिए QS :: getQueryString को कॉल करने की कोई आवश्यकता नहीं है, आप QS :: toString या का उपयोग कर सकते हैं, जैसा कि मैंने उदाहरणों में किया है कि किसी स्ट्रिंग में ले जाए जा रहे ऑब्जेक्ट पर भरोसा करें।

Answer 8

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

urlParams.set('order', 'date');

window.location.search = urlParams;

.set पहले एग्रेट की कुंजी है, दूसरा वाला मान है।

Comments

इस की सादगी से प्यार करें और यह देशी ब्राउज़र विधियों का उपयोग करता है

— जुआन सोलानो

यह सही उत्तर है और शीर्ष मतदान होना चाहिए। यह नया एपीआई URL प्रसंस्करण के लिए निश्चित है

— एंथनी

Answer 9

यदि आपके पास url के साथ एक स्ट्रिंग है जिसे आप एक परम के साथ सजाना चाहते हैं, तो आप यह कोशिश कर सकते हैं:

urlstring += ( urlstring.match( /[\?]/g ) ? '&' : '?' ) + 'param=value';

इसका मतलब है कि ? पैरामीटर का उपसर्ग होगा, लेकिन अगर आपके पास पहले से है ? में urlstring, से और उपसर्ग होगा।

मैं भी करने की सलाह दूंगा encodeURI( paramvariable )यदि आप हार्डकॉक्ड पैरामीटर नहीं तो दूंगा, लेकिन यह एक के अंदर है paramvariable; या यदि आपके पास इसमें अजीब अक्षर हैं।

फ़ंक्शन के उपयोग के लिए जावास्क्रिप्ट URL एन्कोडिंग देखें encodeURI।

Answer 10

यह क्वेरी पैरामीटर जोड़ने का एक सरल तरीका है:

const query = new URLSearchParams(window.location.search);
query.append("enabled", "true");

और यह यहाँ अधिक है ।

कृपया समर्थन ऐनक पर ध्यान दें ।

Comments

ऐसा लगता है कि यह इंटरनेट एक्सप्लोरर के किसी भी संस्करण में समर्थित नहीं है

— MAXE

मोबाइल के लिए आदर्श। जब इंटरनेट एक्सप्लोरर मेरे मोबाइल डिवाइस पर दिखाई देता है, तो मैं इसे फेंक दूंगा। :-)

— स्टिलमेटिमिनक्स

@MAXE आप सही हैं IE / EDGE ज्यादा समर्थन नहीं करता है। समर्थन में

— T04435

Answer 11

की जाँच करें https://github.com/derek-watson/jsUri

जावास्क्रिप्ट में उड़ी और क्वेरी स्ट्रिंग हेरफेर।

यह परियोजना स्टीवन लेविथान द्वारा उत्कृष्ट पारसियारी नियमित अभिव्यक्ति पुस्तकालय को शामिल करती है। आप सभी आकारों और आकारों के URL को सुरक्षित रूप से पार्स कर सकते हैं, हालांकि अमान्य या छिपा हुआ है।

Comments

404 - इस सर्वर पर अनुरोधित URL / p / jsuri / नहीं मिला। बस हमें यही पता है।

— अलीगमा

ऐसा लगता है कि इसे स्थानांतरित कर दिया गया है। मैंने url को अपडेट कर दिया है। शुभकामनाएँ!

— चार्ली लियांग युआन

कृपया अपने उत्तर में प्रासंगिक विवरण शामिल करें, न कि केवल एक लिंक।

— झपट्टार गोफंडम रिलेंसिंग

Answer 12

शायद ही कभी हम ?अंतिम URL पर देखते हैं , मुझे कुछ समाधान मिले जो परिणाम उत्पन्न करते हैं file.php?&foo=bar। मैं अपने स्वयं के समाधान के साथ पूरी तरह से काम करना चाहता हूँ!

location.origin + location.pathname + location.search + (location.search=='' ? '?' : '&') + 'lang=ar'

ध्यान दें: location.origin IE में काम नहीं करता है, यहाँ इसका फिक्स है ।

Answer 13

निम्नलिखित फ़ंक्शन आपको पैरामीटर को URL से जोड़ने, अद्यतन करने और हटाने में मदद करेंगे।

// example1and

var myURL = '/search';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search

// example2

var myURL = '/search?category=mobile';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?category=mobile&location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?category=mobile&location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search?category=mobile

// Example3

var myURL = '/search?location=texas';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search

// Example4

var myURL = '/search?category=mobile&location=texas';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?category=mobile&location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?category=mobile&location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search?category=mobile

// example5

var myURL = 'https://example.com/search?location=texas#fragment';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california#fragment

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york#fragment

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search#fragment

यहाँ समारोह है।

function updateUrl(url,key,value){
      if(value!==undefined){
        value = encodeURI(value);
      }
      var hashIndex = url.indexOf("#")|0;
      if (hashIndex === -1) hashIndex = url.length|0;
      var urls = url.substring(0, hashIndex).split('?');
      var baseUrl = urls[0];
      var parameters = '';
      var outPara = {};
      if(urls.length>1){
          parameters = urls[1];
      }
      if(parameters!==''){
        parameters = parameters.split('&');
        for(k in parameters){
          var keyVal = parameters[k];
          keyVal = keyVal.split('=');
          var ekey = keyVal[0];
          var evalue = '';
          if(keyVal.length>1){
              evalue = keyVal[1];
          }
          outPara[ekey] = evalue;
        }
      }

      if(value!==undefined){
        outPara[key] = value;
      }else{
        delete outPara[key];
      }
      parameters = [];
      for(var k in outPara){
        parameters.push(k + '=' + outPara[k]);
      }

      var finalUrl = baseUrl;

      if(parameters.length>0){
        finalUrl += '?' + parameters.join('&'); 
      }

      return finalUrl + url.substring(hashIndex); 
  }

Answer 14

यह मेरा स्वयं का प्रयास था, लेकिन मैं एनाकाटा द्वारा उत्तर का उपयोग करूंगा क्योंकि यह बहुत साफ लगता है:

function AddUrlParameter(sourceUrl, parameterName, parameterValue, replaceDuplicates)
{
    if ((sourceUrl == null) || (sourceUrl.length == 0)) sourceUrl = document.location.href;
    var urlParts = sourceUrl.split("?");
    var newQueryString = "";
    if (urlParts.length > 1)
    {
        var parameters = urlParts[1].split("&");
        for (var i=0; (i < parameters.length); i++)
        {
            var parameterParts = parameters[i].split("=");
            if (!(replaceDuplicates && parameterParts[0] == parameterName))
            {
                if (newQueryString == "")
                    newQueryString = "?";
                else
                    newQueryString += "&";
                newQueryString += parameterParts[0] + "=" + parameterParts[1];
            }
        }
    }
    if (newQueryString == "")
        newQueryString = "?";
    else
        newQueryString += "&";
    newQueryString += parameterName + "=" + parameterValue;

    return urlParts[0] + newQueryString;
}

इसके अलावा, मुझे स्टैकओवरफ्लो पर एक और पोस्ट से यह jQuery प्लगइन मिला, और यदि आपको अधिक लचीलेपन की आवश्यकता है तो आप इसका उपयोग कर सकते हैं: http://plugins.jquery.com/project/query-object

मुझे लगता है कि कोड होगा (परीक्षण नहीं किया गया है):

return $.query.parse(sourceUrl).set(parameterName, parameterValue).toString();

Comments

अपना कोड साझा करने के लिए धन्यवाद, पाठ। मैं इस का उपयोग कर रहा हूँ और यह बहुत काम किया है! मैंने अपने स्वयं के संस्करण का एक जिस्ट अपलोड किया है, जिसे थोड़ा अधिक सक्सेफाइड किया गया है और जेएसहिंट सत्यापन पास किया गया है। gist.github.com/jonathanconway/02a183920506acd9890a

— जोनाथन

Answer 15

@ Vianney के जवाब में जोड़ना https://stackoverflow.com/a/44160941/6609678 पर

हम नोड में अंतर्निहित URL मॉड्यूल को निम्नानुसार आयात कर सकते हैं

const { URL } = require('url');

उदाहरण:

Terminal $ node
> const { URL } = require('url');
undefined
> let url = new URL('', 'http://localhost:1989/v3/orders');
undefined
> url.href
'http://localhost:1989/v3/orders'
> let fetchAll=true, timePeriod = 30, b2b=false;
undefined
> url.href
'http://localhost:1989/v3/orders'
>  url.searchParams.append('fetchAll', fetchAll);
undefined
>  url.searchParams.append('timePeriod', timePeriod);
undefined
>  url.searchParams.append('b2b', b2b);
undefined
> url.href
'http://localhost:1989/v3/orders?fetchAll=true&timePeriod=30&b2b=false'
> url.toString()
'http://localhost:1989/v3/orders?fetchAll=true&timePeriod=30&b2b=false'

उपयोगी कड़ियाँ:

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

Answer 16

इसे इस्तेमाल करे।

// uses the URL class
function setParam(key, value) {
            let url = new URL(window.document.location);
            let params = new URLSearchParams(url.search.slice(1));

            if (params.has(key)) {
                params.set(key, value);
            }else {
                params.append(key, value);
            }
        }

Comments

url.searchParamsउस URLऑब्जेक्ट के लिए पूर्व-आरंभिक पैरामीटर सूची है ।

— एम्फेटामैचिन

Answer 17

मुझे मेहमत फतह यिलदिज़ का जवाब पसंद है यहां तक ​​कि उन्होंने पूरे सवाल का जवाब नहीं दिया।

उनके उत्तर के रूप में एक ही पंक्ति में, मैं इस कोड का उपयोग करता हूं:

"इसका पैरामीटर अस्तित्व को नियंत्रित नहीं करता है, और यह मौजूदा मूल्य को नहीं बदलता है। यह आपके पैरामीटर को अंत तक जोड़ता है"

  /** add a parameter at the end of the URL. Manage '?'/'&', but not the existing parameters.
   *  does escape the value (but not the key)
   */
  function addParameterToURL(_url,_key,_value){
      var param = _key+'='+escape(_value);

      var sep = '&';
      if (_url.indexOf('?') < 0) {
        sep = '?';
      } else {
        var lastChar=_url.slice(-1);
        if (lastChar == '&') sep='';
        if (lastChar == '?') sep='';
      }
      _url += sep + param;

      return _url;
  }

और परीक्षक:

  /*
  function addParameterToURL_TESTER_sub(_url,key,value){
    //log(_url);
    log(addParameterToURL(_url,key,value));
  }

  function addParameterToURL_TESTER(){
    log('-------------------');
    var _url ='www.google.com';
    addParameterToURL_TESTER_sub(_url,'key','value');
    addParameterToURL_TESTER_sub(_url,'key','Text Value');
    _url ='www.google.com?';
    addParameterToURL_TESTER_sub(_url,'key','value');
    _url ='www.google.com?A=B';
    addParameterToURL_TESTER_sub(_url,'key','value');
    _url ='www.google.com?A=B&';
    addParameterToURL_TESTER_sub(_url,'key','value');
    _url ='www.google.com?A=1&B=2';
    addParameterToURL_TESTER_sub(_url,'key','value');

  }//*/

Answer 18

मैं के साथ जाना होगा इस js में url संभालने के लिए छोटी लेकिन पूरी लाइब्रेरी के :

https://github.com/Mikhus/jsurl

Comments

कृपया अपने उत्तर में प्रासंगिक विवरण शामिल करें, न कि केवल एक लिंक।

— झपट्टार गोफंडम रिलेंसिंग

Answer 19

इसका उपयोग मैं तब करता हूं जब यह कुछ मूल यूआरएल परम परिवर्धन या सर्वर-साइड पर अपडेट करता है जैसे Node.js.

CoffeScript:

###
    @method addUrlParam Adds parameter to a given url. If the parameter already exists in the url is being replaced.
    @param {string} url
    @param {string} key Parameter's key
    @param {string} value Parameter's value
    @returns {string} new url containing the parameter
###
addUrlParam = (url, key, value) ->
    newParam = key+"="+value
    result = url.replace(new RegExp('(&|\\?)' + key + '=[^\&|#]*'), '$1' + newParam)
    if result is url
        result = if url.indexOf('?') != -1 then url.split('?')[0] + '?' + newParam + '&' + url.split('?')[1]
    else if url.indexOf('#') != -1 then url.split('#')[0] + '?' + newParam + '#' + url.split('#')[1]
    else url + '?' + newParam
    return result

जावास्क्रिप्ट:

function addUrlParam(url, key, value) {
    var newParam = key+"="+value;
    var result = url.replace(new RegExp("(&|\\?)"+key+"=[^\&|#]*"), '$1' + newParam);
    if (result === url) { 
        result = (url.indexOf("?") != -1 ? url.split("?")[0]+"?"+newParam+"&"+url.split("?")[1] 
           : (url.indexOf("#") != -1 ? url.split("#")[0]+"?"+newParam+"#"+ url.split("#")[1] 
              : url+'?'+newParam));
    }
    return result;
}

var url = "http://www.example.com?foo=bar&ciao=3&doom=5#hashme";
result1.innerHTML = addUrlParam(url, "ciao", "1");

<p id="result1"></p>

Answer 20

सबसे आसान समाधान, काम करता है यदि आपके पास पहले से ही एक टैग है या नहीं, और इसे स्वचालित रूप से हटा देता है तो यह समान टैग जोड़ना नहीं होगा, मज़े करें

function changeURL(tag)
{
if(window.location.href.indexOf("?") > -1) {
    if(window.location.href.indexOf("&"+tag) > -1){

        var url = window.location.href.replace("&"+tag,"")+"&"+tag;
    }
    else
    {
        var url = window.location.href+"&"+tag;
    }
}else{
    if(window.location.href.indexOf("?"+tag) > -1){

        var url = window.location.href.replace("?"+tag,"")+"?"+tag;
    }
    else
    {
        var url = window.location.href+"?"+tag;
    }
}
  window.location = url;
}

फिर

changeURL("i=updated");

Answer 21

Vianney Bajart का उत्तर सही है; हालाँकि, URL तभी काम करेगा जब आपके पास पोर्ट, होस्ट, पाथ और क्वेरी वाला पूरा URL हो:

new URL('http://server/myapp.php?id=10&enabled=true')

और URLSearchParams केवल तभी काम करेगा जब आप केवल क्वेरी स्ट्रिंग पास करेंगे:

new URLSearchParams('?id=10&enabled=true')

यदि आपके पास एक अधूरा या सापेक्ष URL है और आधार URL की परवाह नहीं करते हैं, तो आप ?क्वेरी स्ट्रिंग प्राप्त करने और बाद में शामिल होने के लिए विभाजित कर सकते हैं जैसे:

function setUrlParams(url, key, value) {
  url = url.split('?');
  usp = new URLSearchParams(url[1]);
  usp.set(key, value);
  url[1] = usp.toString();
  return url.join('?');
}

let url = 'myapp.php?id=10';
url = setUrlParams(url, 'enabled', true);  // url = 'myapp.php?id=10&enabled=true'
url = setUrlParams(url, 'id', 11);         // url = 'myapp.php?id=11&enabled=true'

इंटरनेट एक्सप्लोरर के साथ संगत नहीं है।

Comments

यदि आप उपयोग var u = new URL(window.location), usp = u.searchParams;करते हैं तो आपको किसी फैंसी स्ट्रिंग-विभाजन का उपयोग करने की आवश्यकता नहीं है।

— एम्फ़ैटेमाचिन

जब आपका समाधान अधिकांश चीजों के लिए काम करेगा, तो यह URL को मान लेगा, यदि इसका पैरामीटर मान में एक प्रश्न चिह्न है:setUrlParams('https://example.com?foo=thing???&bar=baz', 'baz', 'qux') => "https://example.com?foo=thing&baz=qux???&bar=baz"

— एम्फ़ैटेमाचाइन

Answer 22

यदि आप लिंक में या कहीं और यूआरएल के साथ गड़बड़ कर रहे हैं, तो आपको हैश को भी ध्यान में रखना पड़ सकता है। यहाँ समाधान को समझने के लिए काफी सरल है। शायद नहीं FASTEST क्योंकि यह एक रेग्जिक्स का उपयोग करता है ... लेकिन 99.999% मामलों में, अंतर वास्तव में मायने नहीं रखता है!

function addQueryParam( url, key, val ){
    var parts = url.match(/([^?#]+)(\?[^#]*)?(\#.*)?/);
    var url = parts[1];
    var qs = parts[2] || '';
    var hash = parts[3] || '';

    if ( !qs ) {
        return url + '?' + key + '=' + encodeURIComponent( val ) + hash;
    } else {
        var qs_parts = qs.substr(1).split("&");
        var i;
        for (i=0;i<qs_parts.length;i++) {
            var qs_pair = qs_parts[i].split("=");
            if ( qs_pair[0] == key ){
                qs_parts[ i ] = key + '=' + encodeURIComponent( val );
                break;
            }
        }
        if ( i == qs_parts.length ){
            qs_parts.push( key + '=' + encodeURIComponent( val ) );
        }
        return url + '?' + qs_parts.join('&') + hash;
    }
}

Comments

यकीन नहीं हो रहा है कि किसी ने आपको क्यों अपमानित किया। यह अधिक विश्वसनीय समाधानों में से एक है, हालांकि यह आवश्यक से अधिक कोड है।

— एडम लेगेट

Answer 23

सबसे आसान समाधान मैं इस पद्धति के बारे में सोच सकता हूं, जो संशोधित यूआरआई लौटाएगा। मुझे लगता है कि आप में से अधिकांश बहुत कठिन तरीके से काम कर रहे हैं।

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

Answer 24

ठीक है यहाँ मैं दो कार्यों की तुलना करता हूँ, एक अपने आप से (regExp) और दूसरा एक (अनुकृति) द्वारा बनाया गया।

विभाजन सरणी:

function insertParam(key, value)
{
    key = escape(key); value = escape(value);

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

    var i=kvp.length; var x; while(i--) 
    {
        x = kvp[i].split('=');

        if (x[0]==key)
        {
                x[1] = value;
                kvp[i] = x.join('=');
                break;
        }
    }

    if(i<0) {kvp[kvp.length] = [key,value].join('=');}

    //this will reload the page, it's likely better to store this until finished
    return "&"+kvp.join('&'); 
}

Regexp विधि:

function addParameter(param, value)
{
    var regexp = new RegExp("(\\?|\\&)" + param + "\\=([^\\&]*)(\\&|$)");
    if (regexp.test(document.location.search)) 
        return (document.location.search.toString().replace(regexp, function(a, b, c, d)
        {
                return (b + param + "=" + value + d);
        }));
    else 
        return document.location.search+ param + "=" + value;
}

परीक्षण का मामला:

time1=(new Date).getTime();
for (var i=0;i<10000;i++)
{
addParameter("test","test");
}
time2=(new Date).getTime();
for (var i=0;i<10000;i++)
{
insertParam("test","test");
}

time3=(new Date).getTime();

console.log((time2-time1)+" "+(time3-time2));

ऐसा लगता है कि सबसे सरल समाधान के साथ भी (जब regexp केवल परीक्षण का उपयोग करते हैं और प्रवेश नहीं करते हैं .replace फ़ंक्शन) यह अभी भी विभाजन की तुलना में धीमा है ... खैर। Regexp थोड़े धीमे है लेकिन ... उह ...

Comments

जैसा कि मैंने उल्लेख किया है, यह वास्तव में तुलनात्मक रूप से धीमा है - और fwiw, document.location.search स्पष्ट है

— annakata

Answer 25

ये है जो मैं करता हूं। मेरे EditParams () फ़ंक्शन का उपयोग करके, आप किसी भी पैरामीटर को जोड़ सकते हैं, हटा सकते हैं या बदल सकते हैं, फिर URL को अपडेट करने के लिए बिल्ट इन रिप्लेसमेंट () फ़ंक्शन का उपयोग कर सकते हैं:

window.history.replaceState('object or string', 'Title', 'page.html' + editParams('enable', 'true'));


// background functions below:

// add/change/remove URL parameter
// use a value of false to remove parameter
// returns a url-style string
function editParams (key, value) {
  key = encodeURI(key);

  var params = getSearchParameters();

  if (Object.keys(params).length === 0) {
    if (value !== false)
      return '?' + key + '=' + encodeURI(value);
    else
      return '';
  }

  if (value !== false)
    params[key] = encodeURI(value);
  else
    delete params[key];

  if (Object.keys(params).length === 0)
    return '';

  return '?' + $.map(params, function (value, key) {
    return key + '=' + value;
  }).join('&');
}

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

Answer 26

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

http://example.com?sizes[]=a&sizes[]=b

निम्नलिखित फ़ंक्शन वह है जिसे मैंने अपडेट करने के लिए लिखा था document.location.search। यह एक तर्क के रूप में कुंजी / मान युग्म सारणियों की एक सरणी लेता है और यह उत्तरार्द्ध का एक संशोधित संस्करण लौटाएगा जिसे आप जो चाहें कर सकते हैं। मैं इसे इस तरह उपयोग कर रहा हूं:

var newParams = [
    ['test','123'],
    ['best','456'],
    ['sizes[]','XXL']
];
var newUrl = document.location.pathname + insertParams(newParams);
history.replaceState('', '', newUrl);

यदि वर्तमान url था:

http://example.com/index.php?test=replaceme&sizes[]=XL

यह आपको मिलेगा

http://example.com/index.php?test=123&sizes[]=XL&sizes[]=XXL&best=456

समारोह

function insertParams(params) {
    var result;
    var ii = params.length;
    var queryString = document.location.search.substr(1);
    var kvps = queryString ? queryString.split('&') : [];
    var kvp;
    var skipParams = [];
    var i = kvps.length;
    while (i--) {
        kvp = kvps[i].split('=');
        if (kvp[0].slice(-2) != '[]') {
            var ii = params.length;
            while (ii--) {
                if (params[ii][0] == kvp[0]) {
                    kvp[1] = params[ii][1];
                    kvps[i] = kvp.join('=');
                    skipParams.push(ii);
                }
            }
        }
    }
    var ii = params.length;
    while (ii--) {
        if (skipParams.indexOf(ii) === -1) {
            kvps.push(params[ii].join('='));
        }
    }
    result = kvps.length ? '?' + kvps.join('&') : '';
    return result;
}

Answer 27

नियमित रूप से प्रयास करें , इस तरह धीमी गति से:

var SetParamUrl = function(_k, _v) {// replace and add new parameters

    let arrParams = window.location.search !== '' ? decodeURIComponent(window.location.search.substr(1)).split('&').map(_v => _v.split('=')) : Array();
    let index = arrParams.findIndex((_v) => _v[0] === _k); 
    index = index !== -1 ? index : arrParams.length;
    _v === null ? arrParams = arrParams.filter((_v, _i) => _i != index) : arrParams[index] = [_k, _v];
    let _search = encodeURIComponent(arrParams.map(_v => _v.join('=')).join('&'));

    let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + (arrParams.length > 0 ? '?' +  _search : ''); 

    // window.location = newurl; //reload 

    if (history.pushState) { // without reload  
        window.history.pushState({path:newurl}, null, newurl);
    }

};

var GetParamUrl = function(_k) {// get parameter by key

    let sPageURL = decodeURIComponent(window.location.search.substr(1)),
        sURLVariables = sPageURL.split('&').map(_v => _v.split('='));
    let _result = sURLVariables.find(_v => _v[0] === _k);
    return _result[1];

};

उदाहरण:

        // https://some.com/some_path
        GetParamUrl('cat');//undefined
        SetParamUrl('cat', "strData");// https://some.com/some_path?cat=strData
        GetParamUrl('cat');//strData
        SetParamUrl('sotr', "strDataSort");// https://some.com/some_path?cat=strData&sotr=strDataSort
        GetParamUrl('sotr');//strDataSort
        SetParamUrl('cat', "strDataTwo");// https://some.com/some_path?cat=strDataTwo&sotr=strDataSort
        GetParamUrl('cat');//strDataTwo
        //remove param
        SetParamUrl('cat', null);// https://some.com/some_path?sotr=strDataSort

Answer 28

जेएस में नई उपलब्धियों के साथ यहां बताया गया है कि कोई कैसे URL में क्वेरी परम जोड़ सकता है:

var protocol = window.location.protocol,
    host = '//' + window.location.host,
    path = window.location.pathname,
    query = window.location.search;

var newUrl = protocol + host + path + query + (query ? '&' : '?') + 'param=1';

window.history.pushState({path:newUrl}, '' , newUrl);

इस संभावना को भी देखें Moziila URLSearchParams.append ()

Answer 29

यह सभी आधुनिक ब्राउज़रों में काम करेगा।

function insertParam(key,value) {
      if (history.pushState) {
          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' +key+'='+value;
          window.history.pushState({path:newurl},'',newurl);
      }
    }

Answer 30

सभी क्वेरी स्ट्रिंग रीसेट करें

var params = { params1:"val1", params2:"val2" };
let str = jQuery.param(params);

let uri = window.location.href.toString();
if (uri.indexOf("?") > 0)
   uri = uri.substring(0, uri.indexOf("?"));

console.log(uri+"?"+str);
//window.location.href = uri+"?"+str;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>