URL पैरामीटर बदलें


189

मेरे पास यह URL है:

site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc

मुझे जो कुछ निर्दिष्ट करना है, उसके लिए 'पंक्तियों' यूआरएल परम मान को बदलने में सक्षम होने की आवश्यकता है, हम कहते हैं 10. और यदि 'पंक्तियाँ' मौजूद नहीं हैं, तो मुझे इसे यूआरएल के अंत में जोड़ने और जोड़ने की आवश्यकता है मान जो मैंने पहले ही निर्दिष्ट किया है (१०)।


2
एक हल्का, नो-प्लगइन जवाब: stackoverflow.com/a/10997390/11236
ripper234

11
मुझे विश्वास नहीं हो रहा है कि यह 2013 है और इसे करने का एक बेहतर तरीका नहीं है, जैसे कि कोर ब्राउज़र लाइब्रेरी में कुछ बनाया गया है।
टायलर कोलियर

एक आधुनिक समाधान के लिए मेरा जवाब देखें: stackoverflow.com/a/19965480/64949
सिंद्रे सोरहूस

6
@ टायलर कोलियर 2015 के मध्य और अभी भी कुछ भी नहीं :(
तेजस मनोहर

3
लगता है जैसे हम वहाँ हो रहे हैं ... developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/…
क्रिस

जवाबों:


111

मैंने एक समारोह बनाने के लिए सुजॉय का कोड बढ़ाया है।

/**
 * http://stackoverflow.com/a/10997390/11236
 */
function updateURLParameter(url, param, paramVal){
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";
    if (additionalURL) {
        tempArray = additionalURL.split("&");
        for (var i=0; i<tempArray.length; i++){
            if(tempArray[i].split('=')[0] != param){
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }
    }

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}

समारोह कॉल:

var newURL = updateURLParameter(window.location.href, 'locId', 'newLoc');
newURL = updateURLParameter(newURL, 'resId', 'newResId');

window.history.replaceState('', '', updateURLParameter(window.location.href, "param", "value"));

अपडेट किया गया संस्करण जो URL पर एंकर का भी ध्यान रखता है।

function updateURLParameter(url, param, paramVal)
{
    var TheAnchor = null;
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";

    if (additionalURL) 
    {
        var tmpAnchor = additionalURL.split("#");
        var TheParams = tmpAnchor[0];
            TheAnchor = tmpAnchor[1];
        if(TheAnchor)
            additionalURL = TheParams;

        tempArray = additionalURL.split("&");

        for (var i=0; i<tempArray.length; i++)
        {
            if(tempArray[i].split('=')[0] != param)
            {
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }        
    }
    else
    {
        var tmpAnchor = baseURL.split("#");
        var TheParams = tmpAnchor[0];
            TheAnchor  = tmpAnchor[1];

        if(TheParams)
            baseURL = TheParams;
    }

    if(TheAnchor)
        paramVal += "#" + TheAnchor;

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}

मैं यह काम करने के लिए प्रतीत नहीं कर सकते। यहाँ मेरा कोड है: jsfiddle.net/Draven/tTPYL/1 URL जैसा दिखेगा http://www.domain.com/index.php?action=my_action&view-all=Yesऔर मुझे "व्यू-ऑल" मान बदलने की आवश्यकता है। मेरा SO प्रश्न जो बंद था: stackoverflow.com/questions/13025880/…
Draven

क्या आपको यकीन है? इसने मेरे लिए आसानी से काम किया। इसे यहां देखें: jsfiddle.net/mw49a
आदिल मलिक

1
एक वैश्विक चर के रूप में i / i को बनाने / संशोधित करने से रोकने के लिए "i = 0" के बजाय "var i = 0" का उपयोग करें।
जोनाथन Aquino

1
इस समारोह के साथ अन्य मुद्दों के जोड़े: (1) paramVal उरी एनकोडेड नहीं है। (2) यदि paramVal शून्य है, तो आपको foo = null मिलता है। यह फू होना चाहिए (या इससे भी बेहतर, फू को पूरी तरह से हटा दें)।
जोनाथन Aquino

इससे मेरा जीवन बहुत आसान हो गया। बहुत बहुत धन्यवाद दोस्त!
बॉयडेनहर्टग जूल

97

मुझे लगता है कि आप क्वेरी प्लगइन चाहते हैं ।

उदाहरण के लिए:

window.location.search = jQuery.query.set("rows", 10);

यह पंक्तियों की वर्तमान स्थिति की परवाह किए बिना काम करेगा।


Mofle, ऐसा इसलिए है क्योंकि क्वेरी प्लगइन decodeURIComponent का उपयोग करता है, और decodeURIComponent ("% F8") अमान्य है।
मैथ्यू फ्लेशेन

2
उस अजीब सामग्री को अपने URL से बाहर निकालें। या, दूसरे शब्दों में, "केवल मान्य UTF-8 वर्णों का उपयोग करने के लिए अपने क्वेरी-स्ट्रिंग को बदलें"। :) F8 अकेले एक वैध UTF-8 वर्ण नहीं है।
मैथ्यू फ्लैशेन

क्या इस प्लगइन से आधार यूआरएल को पुनः प्राप्त करने का कोई तरीका है? उदाहरण के लिए, यदि मेरा URL ' youtube.com/watch?v=PZootaxRh3M ' है, तो ' youtube.com/watch ' प्राप्त करें
मैट नॉरिस

3
@Wraith, आपको इसके लिए प्लगइन की आवश्यकता नहीं है। यह सिर्फ है window.location.pathname
मैथ्यू फ्लैशेन

2
@MattNorris आपको इसके लिए एक प्लगइन की आवश्यकता नहीं है, लेकिन सही उत्तर है: window.location.host + window.location.pathname आपके मामले में यह "www.youtube.com/watch" होगा
nktssh

68

मेरे खुद के सवाल का जवाब देने के लिए 4 साल बाद, बहुत कुछ सीखने के बाद। खासकर यह कि आपको हर चीज के लिए jQuery का उपयोग नहीं करना चाहिए। मैंने एक सरल मॉड्यूल बनाया है जो क्वेरी स्ट्रिंग को पार्स / स्ट्रिंग कर सकता है। इससे क्वेरी स्ट्रिंग को संशोधित करना आसान हो जाता है।

आप निम्नानुसार क्वेरी-स्ट्रिंग का उपयोग कर सकते हैं :

// parse the query string into an object
var q = queryString.parse(location.search);
// set the `row` property
q.rows = 10;
// convert the object to a query string
// and overwrite the existing query string
location.search = queryString.stringify(q);

1
वाह यह एक शानदार सरल उपाय है। धन्यवाद!
जेटलीज

यह एक विजेता की तरह काम करता है! शुक्रिया सिंद्रे you (आप सभी को "क्वेरी-स्ट्रिंग / इंडेक्स.जेएस" को मिनिमाइज़ करें और इसे अपने js के नीचे पेस्ट करें)
Ronnie Royston

1
इसके लिए एक अतिरिक्त पुस्तकालय होने से थोड़ा अतिरिक्त लगता है ...
द गॉडफादर

jQuery 1 फ़ंक्शन के लिए बहुत अधिक था, इसलिए इसके बजाय आपने टाइपस्क्रिप्ट, ट्रैविस और कई अन्य गैर-देव निर्भरता का उपयोग किया :)
जस्टिन मेकर्स

@JustinMeiners कृपया टिप्पणी न करें यदि आपके पास बातचीत में योगदान करने के लिए कुछ भी उपयोगी नहीं है। इस प्रोजेक्ट द्वारा टाइपस्क्रिप्ट का उपयोग नहीं किया जाता है। ट्रैविस एक सीआई है, एक निर्भरता नहीं है।
सिंद्रे सोरहस

64

शुद्ध जेएस में त्वरित छोटे समाधान, कोई प्लगइन्स की जरूरत नहीं:

function replaceQueryParam(param, newval, search) {
    var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
    var query = search.replace(regex, "$1").replace(/&$/, '');

    return (query.length > 2 ? query + "&" : "?") + (newval ? param + "=" + newval : '');
}

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

 window.location = '/mypage' + replaceQueryParam('rows', 55, window.location.search)

या, यदि आप एक ही पृष्ठ पर बने रहना चाहते हैं और एक से अधिक पैरा बदलना चाहते हैं:

 var str = window.location.search
 str = replaceQueryParam('rows', 55, str)
 str = replaceQueryParam('cols', 'no', str)
 window.location = window.location.pathname + str

संपादित करें, धन्यवाद ल्यूक: पूरी तरह से पैरामीटर को हटाने के लिए, मान के लिए पास falseया :। चूंकि मिथ्या भी है , निर्दिष्ट करें ।nullreplaceQueryParam('rows', false, params)0 '0'


2
आउटपुट से एक उपयोग किए गए पैरामीटर को निकालने के लिए भी ऐसा करें: str = रिप्लेसमेंटपराम ('ओल्डपरम', गलत, स्ट्रै) - मूल रूप से एक गलत प्रकार का मान
डालते हैं

1
समस्या है, बिना किसी अच्छे कारण के दोहराव के लिए मेरा पैरामीटर, इसी तरह के समाधान stackoverflow.com/a/20420424/3160597
azerafati

@ मान लीजिए कि कोड उत्पादन में वर्षों से काम कर रहा है। मैंने इसे अभी तक एक परम डुप्लिकेट नहीं देखा है। आप एक repro या कुछ और रचनात्मक जानकारी पोस्ट कर सकते हैं?
ब्रोंसन

@ अब मुझे समझ में आया, यह आपके द्वारा लिंक की गई स्क्रिप्ट है जो डुप्लिकेट पैरामीटर जोड़ रही थी। :)
ब्रोंसन

1
@ डायपर सही, एक गलत मान पूरी तरह से पैरामीटर को हटा देता है। पूर्णांक 0. के बजाय पाठ '0' का प्रयोग करें
ब्रंसन

62

बेन अल्मन के यहाँ एक अच्छा jquery querystring / url प्लगइन है जो आपको आसानी से querystring में हेरफेर करने की अनुमति देता है।

के रूप में अनुरोध किया -

गोटो अपने परीक्षण पृष्ठ यहाँ

फायरबग में कंसोल में निम्नलिखित दर्ज करें

jQuery.param.querystring(window.location.href, 'a=3&newValue=100');

यह आपको निम्न संशोधित यूआरएल स्ट्रिंग लौटाएगा

http://benalman.com/code/test/js-jquery-url-querystring.html?a=3&b=Y&c=Z&newValue=100#n=1&o=2&p=3

एक के लिए एक querystring मान को X से 3 में बदल दिया है और इसने नया मान जोड़ा है।

फिर आप चाहें तो नए url स्ट्रिंग का उपयोग कर सकते हैं, जैसे आप चाहें। document.location = newUrl का उपयोग करें या लंगर लिंक आदि को बदलें


4
क्या यह jQuery.param.querystring के बजाय jQuery.queryString नहीं है?
पेट्र पेलर

12
TypeError: jQuery.param.querystring is not a function
TMS

1
'टाइप टाइप' करने के लिए यह होना चाहिए: jQuery.queryString (window.location.href, 'a = 3 और newValue = 100')
कोड- gijoe

2
आपको फोन करना चाहिए jQuery.param.querystring। मुझे लगता है कि उन्होंने पुस्तकालय को फिर से बनाया है।
विल वू

इन कार्यों में से कोई भी मौजूद नहीं है। आप मैन्युअल रूप से window.location.search अपडेट करना चाहते हैं। यदि आप पृष्ठ को फिर से लिखना नहीं चाहते हैं तो यह और कठिन हो जाता है, क्योंकि इससे पृष्ठ परिवर्तन होगा।
मोनोक्रोम

39

इस के लिए एक आधुनिक दृष्टिकोण मूल मानक URLSearchParams का उपयोग करना है । यह सभी प्रमुख ब्राउज़रों द्वारा समर्थित है, IE के अलावा जहां वे पॉलीफ़िल उपलब्ध हैं

const paramsString = "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc"
const searchParams = new URLSearchParams(paramsString);
searchParams.set('rows', 10);
console.log(searchParams.toString()); // return modified string.

1
वास्तव में अच्छा होगा ... लेकिन ऐसा नहीं है क्योंकि IE इसे बिल्कुल भी समर्थन नहीं करता है, और इस तरह की छोटी चीज के लिए पॉलीफिल का उपयोग करना पूरी तरह से सवाल से बाहर है।
फोर्सबर्ग

1
यह भी मूल paramsString को पूरी तरह से urlencodes करता है, इसलिए परिणाम ऐसा दिखता है site.fwx%3Fposition=1&archiveid=5000&columns=5&rows=10&sorting=ModifiedTimeAscजो भ्रामक है क्योंकि यह नहीं है कि आपने इसे स्वयं निर्मित किया होगा या नहीं ...
बेन व्हीलर

1
इसका उपयोग कैसे करें, इसका एक उदाहरण देखकर अच्छा लगेगा। मेरा मतलब है, वर्तमान पृष्ठ से पैरामस स्ट्रिंग कैसे प्राप्त करें और इसे बाद में कैसे सेट करें
गॉडफादर

27

आप इसे सामान्य जेएस के माध्यम से भी कर सकते हैं

var url = document.URL
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var aditionalURL = tempArray[1]; 
var temp = "";
if(aditionalURL)
{
var tempArray = aditionalURL.split("&");
for ( var i in tempArray ){
    if(tempArray[i].indexOf("rows") == -1){
            newAdditionalURL += temp+tempArray[i];
                temp = "&";
            }
        }
}
var rows_txt = temp+"rows=10";
var finalURL = baseURL+"?"+newAdditionalURL+rows_txt;

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

गोर्मर, आपको उस फ़ंक्शन को दूसरों के साथ साझा करना होगा :)
आदिल मलिक

बहुत बढ़िया स्निपेट। मैंने भी इसे अपने उपयोग के मामले के लिए एक फ़ंक्शन में बदल दिया। साझा करने के लिए धन्यवाद! +1
लब्बी

19

यह URL पैरामीटर बदलने का आधुनिक तरीका है:

function setGetParam(key,value) {
  if (history.pushState) {
    var params = new URLSearchParams(window.location.search);
    params.set(key, value);
    var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + params.toString();
    window.history.pushState({path:newUrl},'',newUrl);
  }
}

2
यह समाधान वर्तमान में Internet Explorer 11: caniuse.com/#search=URLSearchParams
WoIIe

एक ही ज़िम्मेदारी का उत्तर आपको @Alister
FantomX1

10

स्ट्रिंग हेरफेर करने के लिए एक व्यवहार्य विकल्प होगा एक html स्थापित करने के लिए formऔर बस rowsतत्व के मूल्य को संशोधित करने के लिए ?

तो, इसके साथ htmlकुछ ऐसा है

<form id='myForm' target='site.fwx'>
    <input type='hidden' name='position' value='1'/>
    <input type='hidden' name='archiveid' value='5000'/>
    <input type='hidden' name='columns' value='5'/>
    <input type='hidden' name='rows' value='20'/>
    <input type='hidden' name='sorting' value='ModifiedTimeAsc'/>
</form>

फार्म जमा करने के लिए निम्नलिखित जावास्क्रिप्ट के साथ

var myForm = document.getElementById('myForm');
myForm.rows.value = yourNewValue;
myForm.submit();

संभवतः सभी स्थितियों के लिए उपयुक्त नहीं है, लेकिन URL स्ट्रिंग को पार्स करने की तुलना में अच्छा हो सकता है।


वह चतुर है।
इकारिटो

7

आप नौकरी करने के लिए मेरी लाइब्रेरी का उपयोग कर सकते हैं: https://github.com/Mikhus/jsurl

var url = new Url('site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc');
url.query.rows = 10;
alert( url);

4

2020 समाधान : चर सेट या iti निकालता है अगर आप पास nullया undefinedमूल्य के लिए।

var setSearchParam = function(key, value) {
    if (!window.history.pushState) {
        return;
    }

    if (!key) {
        return;
    }

    var url = new URL(window.location.href);
    var params = new window.URLSearchParams(window.location.search);
    if (value === undefined || value === null) {
        params.delete(key);
    } else {
        params.set(key, value);
    }

    url.search = params;
    url = url.toString();
    window.history.replaceState({url: url}, null, url);
}

ध्यान दें कि URLSearchParamsसभी प्रमुख ब्राउज़रों (2020) के नवीनतम संस्करणों में काम नहीं करता है
ओलिवर शिमर

अभी भी प्रमुख ब्राउज़रों में उपलब्ध हैं: developer.mozilla.org/en-US/docs/Web/API/URLSearchParams , googlechrome.github.io/samples/urlsearchparams/index.html
Alper Ebicoglu

यह IE11 को छोड़कर सभी प्रमुख ब्राउज़रों में समर्थित है: caniuse.com/#search=URLSearchParams
लुइस पाउलो

भले ही इसका समर्थन किया जाने लगा हो, URLSearchParams के साथ एक ही उत्तर इस सवाल का जवाब दिया गया था कम से कम 3 बार पहले से ही 15 जनवरी 17 को 15:24 पर, जून 14 '18 को 15:54 पर उत्तर दिया और 1 मार्च 1919 को जवाब दिया। 12:46, जैसे कि आप में से कोई भी पोस्ट करने से पहले उत्तर नहीं पढ़ रहा था
FantomX1

सभी पोस्ट में मामूली समस्याएं हैं जिन्हें हल करना आवश्यक है। इसलिए उपयोगकर्ताओं को वोट दें और सर्वश्रेष्ठ चुनें।
एल्पर एबिकोग्लू

3

मैंने थोड़ा सहायक फ़ंक्शन लिखा जो किसी भी चयन के साथ काम करता है। आपको बस किसी भी चुनिंदा तत्व के साथ "redirectOnChange" वर्ग जोड़ना होगा, और यह पृष्ठ को नए / परिवर्तित क्वेरिस्ट्रिंग पैरामीटर के साथ फिर से लोड करने का कारण बनेगा, जैसे कि चयन की आईडी और मान के बराबर, जैसे:

<select id="myValue" class="redirectOnChange"> 
    <option value="222">test222</option>
    <option value="333">test333</option>
</select>

उपर्युक्त उदाहरण में "myValue = 222" या "myValue = 333" (या अन्य "params मौजूद है) का उपयोग करके या पृष्ठ को फिर से लोड किया जाएगा।

jQuery:

$(document).ready(function () {

    //Redirect on Change
    $(".redirectOnChange").change(function () {
        var href = window.location.href.substring(0, window.location.href.indexOf('?'));
        var qs = window.location.href.substring(window.location.href.indexOf('?') + 1, window.location.href.length);
        var newParam = $(this).attr("id") + '=' + $(this).val();

        if (qs.indexOf($(this).attr("id") + '=') == -1) {
            if (qs == '') {
                qs = '?'
            }
            else {
                qs = qs + '&'
            }
            qs = qs + newParam;

        }
        else {
            var start = qs.indexOf($(this).attr("id") + "=");
            var end = qs.indexOf("&", start);
            if (end == -1) {
                end = qs.length;
            }
            var curParam = qs.substring(start, end);
            qs = qs.replace(curParam, newParam);
        }
        window.location.replace(href + '?' + qs);
    });
});

अब तक इस पृष्ठ पर सबसे अच्छा समाधान
ed209

2

यहाँ मैंने आदिल मलिक का जवाब लिया है और मैंने इसके साथ जिन 3 मुद्दों को पहचाना है, उन्हें ठीक किया है।

/**
 * Adds or updates a URL parameter.
 *
 * @param {string} url  the URL to modify
 * @param {string} param  the name of the parameter
 * @param {string} paramVal  the new value for the parameter
 * @return {string}  the updated URL
 */
self.setParameter = function (url, param, paramVal){
  // http://stackoverflow.com/a/10997390/2391566
  var parts = url.split('?');
  var baseUrl = parts[0];
  var oldQueryString = parts[1];
  var newParameters = [];
  if (oldQueryString) {
    var oldParameters = oldQueryString.split('&');
    for (var i = 0; i < oldParameters.length; i++) {
      if(oldParameters[i].split('=')[0] != param) {
        newParameters.push(oldParameters[i]);
      }
    }
  }
  if (paramVal !== '' && paramVal !== null && typeof paramVal !== 'undefined') {
    newParameters.push(param + '=' + encodeURI(paramVal));
  }
  if (newParameters.length > 0) {
    return baseUrl + '?' + newParameters.join('&');
  } else {
    return baseUrl;
  }
}

1

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

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


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

एक टिप्पणी के बिना एक मंदी? कोड में क्या गड़बड़ है? यह कई स्थितियों के लिए शानदार काम करता है।
Bobb Fwed

1

मेरा समाधान:

const setParams = (data) => {
    if (typeof data !== 'undefined' && typeof data !== 'object') {
        return
    }

    let url = new URL(window.location.href)
    const params = new URLSearchParams(url.search)

    for (const key of Object.keys(data)) {
        if (data[key] == 0) {
            params.delete(key)
        } else {
            params.set(key, data[key])
        }
    }

    url.search = params
    url = url.toString()
    window.history.replaceState({ url: url }, null, url)
}

फिर बस "सेटपराम" को कॉल करें और उस ऑब्जेक्ट के साथ एक ऑब्जेक्ट पास करें जिसे आप सेट करना चाहते हैं।

उदाहरण:

$('select').on('change', e => {
    const $this = $(e.currentTarget)
    setParams({ $this.attr('name'): $this.val() })
})

मेरे मामले में मुझे एक html चयन इनपुट को अपडेट करना पड़ा जब यह बदलता है और यदि मान "0" है, तो पैरामीटर को हटा दें। आप फ़ंक्शन को संपादित कर सकते हैं और url से पैरामीटर हटा सकते हैं यदि ऑब्जेक्ट कुंजी "शून्य" भी है।

आशा है कि यह याल मदद करता है


आपके सामने URLSearchParams के साथ पहले से ही 2 उत्तर हैं, जैसे कि आप में से कोई भी वास्तव में उत्तर नहीं पढ़ता है। प्रकाशित किया गया था जनवरी 15 '17 को 15:24 पर, उत्तर दिया गया 14 जून 18 को 15:54
FantomX1

0

सुजॉय के जवाब पर एक और बदलाव। बस चर नाम बदले और एक नाम स्थान आवरण जोड़ा गया:

window.MyNamespace = window.MyNamespace  || {};
window.MyNamespace.Uri = window.MyNamespace.Uri || {};

(function (ns) {

    ns.SetQueryStringParameter = function(url, parameterName, parameterValue) {

        var otherQueryStringParameters = "";

        var urlParts = url.split("?");

        var baseUrl = urlParts[0];
        var queryString = urlParts[1];

        var itemSeparator = "";
        if (queryString) {

            var queryStringParts = queryString.split("&");

            for (var i = 0; i < queryStringParts.length; i++){

                if(queryStringParts[i].split('=')[0] != parameterName){

                    otherQueryStringParameters += itemSeparator + queryStringParts[i];
                    itemSeparator = "&";
                }
            }
        }

        var newQueryStringParameter = itemSeparator + parameterName + "=" + parameterValue;

        return baseUrl + "?" + otherQueryStringParameters + newQueryStringParameter;
    };

})(window.MyNamespace.Uri);

अभी है:

var changedUrl = MyNamespace.Uri.SetQueryStringParameter(originalUrl, "CarType", "Ford");

0

मैंने भी जावास्क्रिप्ट में URL क्वेरी पैरामीटर प्राप्त करने और स्थापित करने के लिए एक पुस्तकालय लिखा है ।

यहाँ इसके उपयोग का एक उदाहरण है।

var url = Qurl.create()
  , query
  , foo
  ;

एक वस्तु के रूप में, के द्वारा क्वेरी परम प्राप्त करें, या जोड़ें / बदलें / निकालें।

// returns { foo: 'bar', baz: 'qux' } for ?foo=bar&baz=qux
query = url.query();

// get the current value of foo
foo = url.query('foo');

// set ?foo=bar&baz=qux
url.query('foo', 'bar');
url.query('baz', 'qux');

// unset foo, leaving ?baz=qux
url.query('foo', false); // unsets foo


-1

मैं जानता हूं कि यह एक पुराना सवाल है। मैंने क्वेरी परम को जोड़ने या अपडेट करने के लिए ऊपर दिए गए फ़ंक्शन को बढ़ाया है। अभी भी एक शुद्ध जेएस समाधान केवल।

                      function addOrUpdateQueryParam(param, newval, search) {

                        var questionIndex = search.indexOf('?');

                        if (questionIndex < 0) {
                            search = search + '?';
                            search = search + param + '=' + newval;
                            return search;
                        }

                        var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
                        var query = search.replace(regex, "$1").replace(/&$/, '');

                        var indexOfEquals = query.indexOf('=');

                        return (indexOfEquals >= 0 ? query + '&' : query + '') + (newval ? param + '=' + newval : '');
                    }

-1

परम को हटाने का मेरा कार्य समर्थन है

function updateURLParameter(url, param, paramVal, remove = false) {
        var newAdditionalURL = '';
        var tempArray = url.split('?');
        var baseURL = tempArray[0];
        var additionalURL = tempArray[1];
        var rows_txt = '';

        if (additionalURL)
            newAdditionalURL = decodeURI(additionalURL) + '&';

        if (remove)
            newAdditionalURL = newAdditionalURL.replace(param + '=' + paramVal, '');
        else
            rows_txt = param + '=' + paramVal;

        window.history.replaceState('', '', (baseURL + "?" + newAdditionalURL + rows_txt).replace('?&', '?').replace('&&', '&').replace(/\&$/, ''));
    }

-1

मैंने वर्तमान url क्वेरी params को पढ़ने और अद्यतन करने के लिए एक सरल मॉड्यूल लिखा है।

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

import UrlParams from './UrlParams'

UrlParams.remove('foo') //removes all occurences of foo=?
UrlParams.set('foo', 'bar') //set all occurences of foo equal to bar
UrlParams.add('foo', 'bar2') //add bar2 to foo result: foo=bar&foo=bar2
UrlParams.get('foo') //returns bar
UrlParams.get('foo', true) //returns [bar, bar2]

यहाँ मेरा नाम UrlParams है। (js / ts):

class UrlParams {

    /**
     * Get params from current url
     * 
     * @returns URLSearchParams
     */
    static getParams(){
        let url = new URL(window.location.href)
        return new URLSearchParams(url.search.slice(1))
    }

    /**
     * Update current url with params
     * 
     * @param params URLSearchParams
     */
    static update(params){
        if(`${params}`){
            window.history.replaceState({}, '', `${location.pathname}?${params}`)
        } else {
            window.history.replaceState({}, '', `${location.pathname}`)
        }
    }

    /**
     * Remove key from url query
     * 
     * @param param string
     */
    static remove(param){
        let params = this.getParams()
        if(params.has(param)){
            params.delete(param)
            this.update(params)
        }
    }

    /**
     * Add key value pair to current url
     * 
     * @param key string
     * @param value string
     */
    static add(key, value){
        let params = this.getParams()
        params.append(key, value)
        this.update(params)
    }

    /**
     * Get value or values of key
     * 
     * @param param string
     * @param all string | string[]
     */
    static get(param, all=false){
        let params = this.getParams()
        if(all){
            return params.getAll(param)
        }
        return params.get(param)
    }

    /**
     * Set value of query param
     * 
     * @param key string
     * @param value string
     */
    static set(key, value){
        let params = this.getParams()
        params.set(key, value)
        this.update(params)
    }

}
export default UrlParams
export { UrlParams }

आपके द्वारा पोस्ट किए गए पहले से ही 4 उत्तर हैं, उत्तर 15 जनवरी 17 को 15:24 पर, उत्तर 14 जून 18 को 15:54 पर, मार्च 1 '19 को 12:46 पर उत्तर दिया और 7 जून को 14 जून 19 को उत्तर दिया: 20, जैसे कि आप में से कोई भी वास्तव में पोस्ट करने से पहले जवाब नहीं पढ़ता है
फनटॉमएक्स 1

-2
     // usage: clear ; cd src/js/node/js-unit-tests/01-set-url-param ; npm test ; cd -
     // prereqs: , nodejs , mocha
     // URI = scheme:[//authority]path[?paramName1=paramValue1&paramName2=paramValue2][#fragment]
     // call by: uri = uri.setUriParam("as","md")
     String.prototype.setUriParam = function (paramName, paramValue) {
        var uri = this
        var fragment = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
        uri = ( uri.indexOf('#') === -1 ) ? uri : uri.split('#')[0]
        if ( uri.indexOf("?") === -1 ) { uri = uri + '?&' }
        uri = uri.replace ( '?' + paramName , '?&' + paramName)
        var toRepl = (paramValue != null) ? ('$1' + paramValue) : ''
        var toSrch = new RegExp('([&]' + paramName + '=)(([^&#]*)?)')
        uri = uri.replace(toSrch,toRepl)
        if (uri.indexOf(paramName + '=') === -1 && toRepl != '' ) {
           var ampersandMayBe = uri.endsWith('&') ? '' : '&'
           uri = uri + ampersandMayBe + paramName + "=" + String(paramValue)
        }
        uri = ( fragment.length == 0 ) ? uri : (uri+"#"+fragment) //may-be re-add the fragment
        return uri
     }

     var assert = require('assert');
     describe('replacing url param value', function () {

        // scheme://authority/path[?p1=v1&p2=v2#fragment
        // a clean url
        it('http://org.com/path -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? with num value
        it('http://org.com/path?prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=57'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? but string value
        it('http://org.com/path?prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=boo-bar'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=boo-bar-baz'
           var uriActual = uri.setUriParam("bid","boo-bar-baz")
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ?& but string value
        it('http://org.com/path?&prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? with other param
        it('http://org.com/path?prm=src_v&other_p=other_v -> http://org.com/path?&prm=tgt_v&other_p=other_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p=other_v'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ?& with other param
        it('http://org.com/path?&prm=src_v&other_p=other_v -> http://org.com/path?&prm=tgt_v&other_p=other_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p&other_v'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p&other_v'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? with other param with fragment
        it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p=other_v#f'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ?& with other param with fragment
        it('http://org.com/path?&prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p&other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p&other_v#f'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // remove the param-name , param-value pair
        it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
           var uriActual = uri.setUriParam("bid",null)
           assert.equal(uriActual, uriExpected);
        });

        // remove the param-name , param-value pair
        it('http://org.com/path?&prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
           var uriActual = uri.setUriParam("bid",null)
           assert.equal(uriActual, uriExpected);
        });

        // add a new param name , param value pair
        it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v&bid=foo-bar#f'
           var uriActual = uri.setUriParam("bid","foo-bar")
           assert.equal(uriActual, uriExpected);
        });

     });
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.