URL পরামিতি পরিবর্তন করুন


189

আমার এই ইউআরএল রয়েছে:

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

আমার যা প্রয়োজন তা হ'ল 'সারিগুলি' ইউআরএল পরম মানটিকে আমি নির্দিষ্ট করা কিছুতে পরিবর্তন করতে সক্ষম হবো, 10 বলি এবং যদি 'সারিগুলি' বিদ্যমান না থাকে, তবে আমি এটি ইউআরএলের শেষে যুক্ত করে যুক্ত করতে হবে মান আমি ইতিমধ্যে নির্দিষ্ট করেছি (10)


2
একটি হাল্কা, নো-প্লাগইন উত্তর: stackoverflow.com/a/10997390/11236
ripper234

11
মূল ব্রাউজার লাইব্রেরিগুলির মতো কিছু তৈরি করার মতো আমি এটি করতে পারি না এবং এটি করার আরও ভাল উপায় আর নেই।
টাইলার কলিয়ার

: একটি আধুনিক সমাধান জন্য আমার উত্তর দেখুন stackoverflow.com/a/19965480/64949
Sindre Sorhus

6
@ টাইলারকোলিয়ার 2015 সালের মাঝামাঝি এবং এখনও কিছুই নয় :(
তেজাস মনোহর

3
দেখে মনে হচ্ছে আমরা সেখানে যাচ্ছি ... বিকাশকারী.মোজিলা.আর.ইন-
ক্রিস

উত্তর:


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"));

আপডেট হওয়া সংস্করণ যা ইউআরএলে অ্যাঙ্করগুলিরও যত্ন করে।

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 ইউআরএলটি দেখতে ভাল লাগবে http://www.domain.com/index.php?action=my_action&view-all=Yesএবং আমার "ভিউ-অল" মানটি পরিবর্তন করা দরকার। আমার তাই প্রশ্ন যে বন্ধ ছিল: stackoverflow.com/questions/13025880/...
Draven

তুমি কি নিশ্চিত? এটি আমার পক্ষে সহজেই কাজ করেছিল। এটি এখানে দেখুন: jsfiddle.net/mw49a
আদিল মালিক

1
I কে বৈশ্বিক ভেরিয়েবল হিসাবে তৈরি / পরিবর্তন করতে বাধা দিতে "i = 0" এর পরিবর্তে "var i = 0" ব্যবহার করুন।
জোনাথন অ্যাকুইনো

1
এই ফাংশনটি সহ আরও কয়েকটি সমস্যা: (1) প্যারামওয়াল ইউরি-এনকোড নয়। (2) যদি প্যারামওয়াল নাল হয়, তবে আপনি foo = নাল পাবেন। এটি foo = হওয়া উচিত (বা আরও ভাল, ফু পুরোপুরি সরান)।
জোনাথন অ্যাকুইনো

এটি আমার জীবনকে এত সহজ করে তুলেছিল। অনেক সাথী ধন্যবাদ!
বাল্ডেনহার্টোগ

97

আমি মনে করি আপনি ক্যোয়ারী প্লাগইন চান ।

উদাহরণ:

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

সারিগুলির বর্তমান অবস্থা নির্বিশেষে এটি কাজ করবে।


মফল, এর কারণ ক্যোয়ারী প্লাগইনটি ডিকোডেরিউআরকিউম্পোনেন্ট ব্যবহার করে এবং ডিকোডেরিউআরআইসি কম্পোনেন্ট ("% F8") অবৈধ।
ম্যাথু ফ্ল্যাশেন

2
আপনার ইউআরএল থেকে অদ্ভুত জিনিস পান। অথবা, অন্য কথায়, "আপনার ক্যোয়ারী-স্ট্রিংটি কেবলমাত্র বৈধ UTF-8 অক্ষর ব্যবহার করতে পরিবর্তন করুন"। :) একা F8 কোনও বৈধ UTF-8 অক্ষর নয়।
ম্যাথু ফ্ল্যাশেন

এই প্লাগইন থেকে বেস url পুনরুদ্ধার করার কোন উপায় আছে? উদাহরণস্বরূপ, যদি আমার URL টি 'হল youtube.com/watch?v=PZootaxRh3M ', 'পেতে youtube.com/watch '
ম্যাট নরিস

3
@ ব্রথ, এর জন্য আপনার কোনও প্লাগইন লাগবে না। এটা ঠিক window.location.pathname
ম্যাথু ফ্ল্যাশেন

2
@ ম্যাটনোরিস এর জন্য আপনার কোনও প্লাগইন লাগবে না, তবে সঠিক উত্তরটি হ'ল: উইন্ডো.লোকেশন এইচস্ট + উইন্ডো.লোকেশন.প্যাথনাম আপনার ক্ষেত্রে এটি "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
বাহ এটি একটি উজ্জ্বল সহজ সমাধান। ধন্যবাদ!
জেটলেজ

এটি চ্যাম্পের মতো কাজ করে! আপনাকে সিন্দ্রে ধন্যবাদ 🏆🏆🏆 (আপনাকে যা করতে হবে তা হ'ল "ক্যোরিয়াম / স্ট্রিং / সূচি.জেইএস" হ'ল এবং এটি আপনার জেএসের নীচে পেস্ট করুন)
রনি রায়স্টন

1
কেবলমাত্র
দ্য গডফাদার

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বা nullমান জন্য: replaceQueryParam('rows', false, params)। যেহেতু 0 এছাড়াও মিথ্যা , নির্দিষ্ট করুন '0'


2
আউটপুট থেকে একটি ব্যবহৃত প্যারামিটার অপসারণ করতেও এটি করুন: স্ট্র = প্রতিস্থাপনকোয়ারপ্যারাম ('ওল্ডপ্যারাম', মিথ্যা, আরআর) - মূলত একটি মিথ্যা টাইপের মান রাখুন
লূক ওয়েঙ্ক

1
সমস্যা আছে, কোন ভাল কারণ আমার প্যারামিটার অনুলিপি, এই অনুরূপ সমাধান পরীক্ষা stackoverflow.com/a/20420424/3160597
azerafati

@ ব্লুড্রিম যে কোডটি বছরের পর বছর ধরে উত্পাদনে কাজ করছে। আমি এটি এখনও কোনও পরমের নকল করতে দেখিনি। আপনি কি কোনও তিরস্কার বা আরও কিছু গঠনমূলক তথ্য পোস্ট করতে পারেন?
ব্রোনসন

@ ব্লাড্রিম আমি এখন বুঝতে পারি, এটি আপনার সাথে লিঙ্কিত স্ক্রিপ্টটি সদৃশ পরামিতি যুক্ত করছিল। :)
ব্রোনসন

1
@ ডিভিপার সঠিক, একটি মিথ্যা মান প্যারামিটার পুরোপুরি সরিয়ে দেয়। পূর্ণসংখ্যার 0 পরিবর্তে '0' পাঠ্যটি ব্যবহার করুন
ব্রোনসন

62

বেন আলমানের এখানে একটি ভাল জ্যাকোয়ারি ক্যোরিস্টিং / ইউআরএল প্লাগইন রয়েছে যা আপনাকে ক্যোরিস্ট্রিংটি সহজেই হেরফের করতে দেয়।

অনুরোধ হিসাবে -

এখানে তার পরীক্ষার পৃষ্ঠাটি পান

ফায়ারব্যাগে কনসোলে নিম্নলিখিতটি প্রবেশ করান

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

এটি আপনাকে নিম্নলিখিত সংশোধিত url স্ট্রিংটি ফিরিয়ে দেবে

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

লক্ষ্য করুন যে এর জন্য একটি কোয়েরিস্ট্রিং মানটি X থেকে 3 এ পরিবর্তিত হয়েছে এবং এটি নতুন মান যুক্ত করেছে।

এরপরে আপনি নতুন ইউআরএল স্ট্রিং ব্যবহার করতে পারেন তবে আপনার ইচ্ছা মতো ডকুমেন্ট.লোকেশন = নতুন ইউআরএল বা অ্যাঙ্কর লিঙ্ক পরিবর্তন ইত্যাদি using


4
এটি কি jQuery.queryString এর পরিবর্তে jQuery.param.querystring নয়?
পেট্র পেলার

12
TypeError: jQuery.param.querystring is not a function
টিএমএস

1
'টাইপএরআর' এড়াতে এটি হওয়া উচিত: jQuery.queryString (উইন্ডো.লোকেশন এইচআরএফ, 'এ = 3 এবং নিউভ্যালু = 100')
কোড-গিজো

2
আপনি কল করা উচিত jQuery.param.querystring। আমার ধারণা তারা লাইব্রেরি রিফেক্টর করেছে।
উইল উউ

এই ফাংশনগুলির আর কোনওটির অস্তিত্ব নেই। আপনি উইন্ডো.লোকেশন.সন্ধানটি ম্যানুয়ালি আপডেট করতে চান। আপনি যদি পৃষ্ঠাটি পুনরায় রঙ করতে না চান তবে এটি আরও কঠিন হয়ে যায়, কারণ এটি কোনও পৃষ্ঠার পরিবর্তনের কারণ হবে।
মনোক্রোম

38

এর জন্য একটি আধুনিক পদ্ধতির নাম হ'ল নেটিভ স্ট্যান্ডার্ড ভিত্তিক ইউআরএল সার্চপ্যারামগুলি ব্যবহার করা । যেখানে পলিফিল পাওয়া যায় সেখানে 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
সত্যিই দুর্দান্ত লাগবে ... তবে এটি যেমন নয় একে একে সমর্থন করে না, এবং এ জাতীয় ছোট জিনিসটির জন্য পলিফিল ব্যবহার করা একেবারেই প্রশ্নের বাইরে নয়।
ফোরসবার্গ ২

1
এটি সম্পূর্ণরূপে মূল প্যারামগুলি স্ট্রিংকে পুরোপুরিভাবে বিভক্ত করে ফেলেছে, ফলে ফলাফলটি দেখতে site.fwx%3Fposition=1&archiveid=5000&columns=5&rows=10&sorting=ModifiedTimeAscবিভ্রান্তিকর বলে মনে হচ্ছে কারণ আপনি নিজেই এটি তৈরি করলে আপনি যা তৈরি করতেন তা নয় ...
বেন হুইলার

1
এটি কীভাবে ব্যবহার করা যায় তার একটি উদাহরণ দেখে ভাল লাগবে। আমার অর্থ, বর্তমান পৃষ্ঠা থেকে কীভাবে প্যারাম স্ট্রিং পাবেন এবং কীভাবে এটি পরে সেট করবেন
দ্য গডফাদার 15

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;

নিস! আমি এটি নিয়েছি এবং একটি ফাংশনে রূপান্তর করেছি। আপনি বর্তমান ইউআরএল, আপনি যে প্যারামিটারটির নাম সন্ধান করছেন তা পাঠিয়েছেন, নতুন মান এবং একটি বুল আপনি যদি প্যারামিটারটি ক্যোয়ারী স্ট্রিংয়ের সাথে যুক্ত করতে চান তবে আমি যদি সেখানে এটি না পেয়ে থাকি তবে তা বলি। ফাংশন পরিবর্তিত ইউআরএল ফেরত দেয়।
গ্রুমার

গোরমার, আপনাকে অবশ্যই অন্যদের সাথে এই ফাংশনটি ভাগ করতে হবে :)
আদিল মালিক

অসাধারণ স্নিপেট। আমিও এটিকে নিজের ব্যবহারের ক্ষেত্রে ফাংশনে পরিণত করেছি। ভাগ করে নেওয়ার জন্য ধন্যবাদ! +1
ছিনতাই

18

এটি ইউআরএল পরামিতি পরিবর্তন করার আধুনিক উপায়:

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
এই সমাধানটি বর্তমানে ইন্টারনেট এক্সপ্লোরার 11 এ সমর্থিত নয়: caniuse.com/#search=URLShopParams
ওআইইইসি

একই দায়বদ্ধতা আপনার আগে অর্ধেক বছর পূর্বে @ অ্যালিসার
ফ্যান্টমএক্স

10

স্ট্রিং ম্যানিপুলেশনের একটি কার্যকর বিকল্পটি কি এইচটিএমএল সেট আপ করতে হবে 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();

সম্ভবত সমস্ত পরিস্থিতিতে উপযুক্ত না, তবে ইউআরএল স্ট্রিং পার্স করার চেয়ে ভাল হতে পারে।


এটি একটি চালাক।
আইচারিটো

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 সলিউশন : ভেরিয়েবল সেট করে বা আপনি পাস 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


এমনকি যদি এটি সমর্থন করা শুরু করে, ইউআরএল সার্চপ্যারামগুলির একই উত্তরটি এই প্রশ্নের মধ্যে কমপক্ষে 3 বার ইতিমধ্যে 15 জানুয়ারী 15-15 এ জবাব দেওয়া হয়েছিল, 14 ই জুন '18-15 এ 15:54 এ উত্তর দিয়েছিল এবং 1 মার্চ 19' এ উত্তর দিয়েছে 12:46, যেন পোস্ট করার আগে আপনার কেউ প্রত্যুত্তর পড়ছেন না
ফ্যান্টমএক্স 1

সমস্ত পোস্টে ছোটখাটো সমস্যা রয়েছে যা সমাধান করা দরকার। সুতরাং ব্যবহারকারীদের ভোট দিন এবং সেরা চয়ন করুন।
আল্পার এবিকোগলু

3

আমি একটি সামান্য সহায়ক ফাংশন লিখেছি যা কোনও নির্বাচনের সাথে কাজ করে। আপনাকে যা করতে হবে তা হল কোনও নির্বাচিত উপাদানগুলিতে "redirectOnChange" ক্লাস যুক্ত করা এবং এটি পৃষ্ঠাটি নতুন / পরিবর্তিত ক্যোরিস্ট্রিং প্যারামিটারের সাথে পুনরায় লোড করবে, যা নির্বাচনের আইডি এবং মানের সমান, যেমন:

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

উপরের উদাহরণটি "? মাইভ্যালু = 222" বা "? মাইভ্যালু = 333" (অথবা অন্যান্য প্যারাম উপস্থিত থাকলে "&" ব্যবহার করে) যুক্ত করবে এবং পৃষ্ঠাটি পুনরায় লোড করবে।

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

এখানে আমি কি করি। আমার এডিটপ্যারামস () ফাংশনটি ব্যবহার করে আপনি কোনও প্যারামিটার যুক্ত করতে, অপসারণ করতে বা পরিবর্তন করতে পারেন, তারপরে ইউআরএল আপডেট করতে বিল্ট ইন রিপ্লেসস্টেট () ফাংশনটি ব্যবহার করতে পারেন:

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

কোন মন্তব্য ছাড়াই একটি ডাউনভোট? কোডটিতে কী ভুল? এটি অনেক পরিস্থিতিতে দুর্দান্ত কাজ করে।
বব ফিউড

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() })
})

আমার ক্ষেত্রে আমাকে পরিবর্তন করার সময় এইচটিএমএল নির্বাচন ইনপুট আপডেট করতে হয়েছিল এবং মান "0" হলে পরামিতিটি সরিয়ে ফেলতে হবে। আপনি যদি ফাংশনটি সম্পাদনা করতে পারেন এবং অবজেক্ট কীটি "নাল" হয় তবে url থেকে প্যারামিটারটি সরিয়ে ফেলতে পারেন।

আশা করি এটি ইয়েলকে সহায়তা করবে


আপনার আগে ইউআরএল সার্চপ্যারামের সাথে ইতিমধ্যে 2 টি একই উত্তর রয়েছে, যেন কেউই উত্তরগুলি সত্যিই পড়ে না। পোস্ট করা হয়েছে 15 জানুয়ারী 15'15 এ 15:24, উত্তর 14 জুন '18 এ 15:54
ফ্যান্টমএক্স 1

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

আমিও জাভাস্ক্রিপ্টে ইউআরএল কোয়েরি প্যারামিটারগুলি পেতে এবং সেট করার জন্য একটি গ্রন্থাগার লিখেছি ।

এটির ব্যবহারের উদাহরণ এখানে।

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

0

আমি একই জিনিসটির সন্ধান করছিলাম এবং এটি পেয়েছিলাম: https://github.com/medialize/URI.js যা বেশ সুন্দর :)

-- হালনাগাদ

আমি একটি আরও ভাল প্যাকেজ পেয়েছি: https://www.npmjs.org/package/qs এটি প্যারামগুলি পেতে অ্যারের সাথেও কাজ করে।


-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

আমি বর্তমান ইউআরএল ক্যোয়ারী প্যারামগুলি পড়ার এবং আপডেট করার জন্য একটি সাধারণ মডিউল লিখেছি।

ব্যবহারের উদাহরণ:

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]

এখানে আমার নামটি ইউরালপ্যারামস is (জেএস / টিএস):

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-15:24 এ উত্তর দিয়েছেন, 14 জুন 18 'এ 15:54-এ উত্তর দিয়েছেন, 1 মার্চ 1919 12:46-এ উত্তর দিয়েছেন এবং 14 জুন '19-এ 7-এ উত্তর দিয়েছেন: 20, যেন সত্যিই আপনার পোস্টের আগে উত্তর কেউ পড়ে না
FantomX1

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

     });
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.