Ubah parameter URL

189

Saya punya URL ini:

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

yang saya butuhkan adalah untuk dapat mengubah nilai param url 'baris' menjadi sesuatu yang saya tentukan, katakanlah 10. Dan jika 'baris' tidak ada, saya perlu menambahkannya ke akhir url dan menambahkan nilai saya sudah ditentukan (10).

Sindre Sorhus
sumber
2
Jawaban ringan, tanpa plugin: stackoverflow.com/a/10997390/11236
ripper234
11
Saya tidak percaya ini tahun 2013 dan tidak ada cara yang lebih baik untuk melakukannya, seperti sesuatu yang dibangun di pustaka browser inti.
Tyler Collier
Lihat jawaban saya untuk solusi modern: stackoverflow.com/a/19965480/64949
Sindre Sorhus
6
@TylerCollier pertengahan 2015 sekarang dan masih belum ada :(
Tejas Manohar
3
Sepertinya kita akan ke sana ... developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/…
chris

Jawaban:

111

Saya telah memperluas kode Sujoy untuk membuat fungsi.

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

Panggilan fungsi:

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

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

Versi terbaru yang juga menjaga anchor pada 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;
}
Adil Malik
sumber
Sepertinya saya tidak bisa melakukan ini. Berikut ini kode saya: jsfiddle.net/Draven/tTPYL/1 URL akan terlihat http://www.domain.com/index.php?action=my_action&view-all=Yesdan saya perlu mengubah nilai "view-all". Pertanyaan SO saya yang sudah ditutup: stackoverflow.com/questions/13025880/…
Draven
Apakah kamu yakin itu bekerja untuk saya dengan mudah. Lihat di sini: jsfiddle.net/mw49a
Adil Malik
1
Gunakan "var i = 0" alih-alih "i = 0" untuk mencegah membuat / memodifikasi saya sebagai variabel global.
Jonathan Aquino
1
Beberapa masalah lain dengan fungsi ini: (1) paramVal tidak dikodekan uri. (2) jika paramVal adalah null, maka Anda mendapatkan foo = null. Itu harus foo = (atau bahkan lebih baik, hapus foo sepenuhnya).
Jonathan Aquino
Ini membuat hidup saya jauh lebih mudah. Terima kasih banyak, teman!
boydenhartog
97

Saya pikir Anda menginginkan plugin kueri .

Misalnya:

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

Ini akan berfungsi terlepas dari status baris saat ini.

Matthew Flaschen
sumber
Mofle, itu karena plugin Query menggunakan komponen decodeURICon, dan decodeURICon ("% F8") tidak valid.
Matthew Flaschen
2
Keluarkan hal-hal aneh dari URL Anda. Atau, dengan kata lain, "ubah string-kueri Anda untuk hanya menggunakan karakter UTF-8 yang valid". :) F8 saja bukan karakter UTF-8 yang valid.
Matthew Flaschen
Apakah ada cara untuk mengambil url dasar dari plugin ini? Misalnya, jika URL saya adalah ' youtube.com/watch?v=PZootaxRh3M ', dapatkan ' youtube.com/watch '
Matt Norris
3
@With, Anda tidak perlu plugin untuk itu. Hanya saja window.location.pathname.
Matthew Flaschen
2
@MattNorris Anda tidak memerlukan plugin untuk ini, tetapi jawaban yang benar adalah: window.location.host + window.location.pathname Dalam kasus Anda, "www.youtube.com/watch"
nktssh
68

Untuk menjawab pertanyaan saya sendiri 4 tahun kemudian, setelah banyak belajar. Terutama bahwa Anda tidak boleh menggunakan jQuery untuk semuanya. Saya telah membuat modul sederhana yang dapat mem-parsing / merumuskan string kueri. Ini membuatnya mudah untuk memodifikasi string kueri.

Anda dapat menggunakan string-kueri sebagai berikut:

// 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);
Sindre Sorhus
sumber
1
Wow ini adalah solusi yang sangat sederhana. Terima kasih!
jetlej
Ini bekerja seperti juara! Terima kasih Sindre 🏆🏆🏆 (yang harus Anda lakukan adalah minify "query-string / index.js" dan rekatkan di bawah js Anda)
Ronnie Royston
1
Memiliki perpustakaan tambahan hanya untuk itu sepertinya sedikit tambahan ...
The Godfather
jQuery terlalu banyak untuk 1 fungsi, jadi alih-alih Anda menggunakan naskah, travis, dan beberapa dependensi non-dev lainnya :)
Justin Meiners
@JustinMeiners Tolong jangan berkomentar jika Anda tidak memiliki sesuatu yang berguna untuk berkontribusi pada percakapan. TypeScript tidak digunakan oleh proyek ini. Travis adalah CI, bukan ketergantungan.
Sindre Sorhus
64

Solusi kecil cepat di js murni, tidak perlu plugin:

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

Sebut saja seperti ini:

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

Atau, jika Anda ingin tetap di halaman yang sama dan mengganti beberapa params:

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

mengedit, berkat Lukas: Untuk menghapus parameter seluruhnya, lulus falseatau nulluntuk nilai: replaceQueryParam('rows', false, params). Karena 0 juga palsu , sebutkan '0'.

bronson
sumber
2
juga untuk menghapus parameter yang digunakan dari output, lakukan ini: str = replaceQueryParam ('oldparam', false, str) - pada dasarnya menaruh nilai jenis yang salah
Luke Wenke
1
memiliki masalah, menduplikasi parameter saya tanpa alasan yang baik, lihat solusi serupa ini stackoverflow.com/a/20420424/3160597
azerafati
@Bludream kode itu telah bekerja di produksi selama bertahun-tahun. Saya belum melihatnya menduplikasi param. Bisakah Anda memposting repro atau info yang lebih konstruktif?
bronson
@Bludream Saya mengerti sekarang, skrip yang Anda tautkan menambahkan parameter duplikat. :)
bronson
1
@dVyper benar, nilai palsu menghapus parameter sepenuhnya. Gunakan teks '0' bukannya bilangan bulat 0.
bronson
62

Ben Alman memiliki plugin jquery querystring / url yang baik di sini yang memungkinkan Anda untuk memanipulasi querystring dengan mudah.

Seperti yang diminta -

Buka halaman tesnya di sini

Dalam pembakar masukkan yang berikut ke konsol

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

Ini akan mengembalikan Anda string url yang diubah berikut

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

Perhatikan nilai querystring untuk a telah berubah dari X ke 3 dan telah menambahkan nilai baru.

Anda kemudian dapat menggunakan string url baru namun Anda ingin misalnya menggunakan document.location = newUrl atau mengubah tautan jangkar dll

kotak merah
sumber
4
Bukankah itu jQuery.param.querystring alih-alih jQuery.queryString?
Petr Peller
12
TypeError: jQuery.param.querystring is not a function
TMS
1
Untuk avoir 'TypeError' seharusnya: jQuery.queryString (window.location.href, 'a = 3 & newValue = 100')
code-gijoe
2
kamu harus menelepon jQuery.param.querystring. Saya kira mereka telah refactored perpustakaan.
Will Wu
Tak satu pun dari fungsi-fungsi ini ada lagi. Anda ingin memperbarui window.location.search secara manual. Semakin sulit jika Anda tidak ingin mengecat ulang halaman, karena ini akan menyebabkan perubahan halaman.
monokrom
39

Pendekatan modern untuk ini adalah dengan menggunakan URLSearchParams berbasis standar asli . Ini didukung oleh semua browser utama, kecuali untuk IE yang menyediakan polyfill

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.
Alister
sumber
1
Akan sangat bagus ... tetapi tidak karena IE tidak mendukung sama sekali, dan menggunakan polyfill untuk hal sekecil itu benar-benar keluar dari pertanyaan.
forsberg
1
ini juga urlencode params asliMengisi penuh, sehingga hasilnya tampak seperti site.fwx%3Fposition=1&archiveid=5000&columns=5&rows=10&sorting=ModifiedTimeAscyang membingungkan karena itu bukan apa yang akan Anda bangun jika Anda melakukannya secara manual ...
Ben Wheeler
1
Akan menyenangkan untuk melihat contoh cara menggunakannya. Maksudku, bagaimana cara mendapatkan string params dari halaman saat ini dan bagaimana mengaturnya setelah itu
The Godfather
27

Anda dapat melakukannya melalui JS normal juga

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;
Posto
sumber
Bagus! Saya mengambil ini dan dimodifikasi menjadi fungsi. Anda mengirim url saat ini, nama parameter yang Anda cari, nilai baru, dan bool mengatakannya jika Anda ingin menambahkan parameter ke string kueri jika saya tidak menemukannya di sana saat ini. Fungsi mengembalikan url yang dimodifikasi.
Gromer
Gormer, Anda harus berbagi fungsi itu dengan orang lain :)
Adil Malik
Cuplikan yang luar biasa. Saya juga mengubahnya menjadi fungsi untuk use case saya sendiri. Terima kasih telah berbagi! +1
robabby
19

Ini adalah cara modern untuk mengubah parameter 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);
  }
}
TjerkW
sumber
2
Solusi ini saat ini tidak didukung di Internet Explorer 11: caniuse.com/#search=URLSearchParams
WoIIe
Respons yang sama dijawab setengah tahun sebelum Anda oleh @Alister
FantomX1
10

Apakah alternatif yang layak untuk manipulasi String adalah dengan mengatur html formdan hanya mengubah nilai rowselemen?

Jadi, dengan htmlitu adalah sesuatu seperti

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

Dengan JavaScript berikut untuk mengirimkan formulir

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

Mungkin tidak cocok untuk semua situasi, tetapi mungkin lebih baik daripada mengurai string URL.

Harry Lime
sumber
Itu yang pintar.
icarito
7

Anda dapat menggunakan perpustakaan saya ini untuk melakukan pekerjaan: 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);
Mikhus
sumber
4

Solusi 2020 : mengatur variabel atau menghapusnya jika Anda lulus nullatau undefinedke nilai.

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);
}
Alper Ebicoglu
sumber
Catatan yang URLSearchParamstidak bekerja di versi terbaru dari semua browser utama (2020)
Oliver Schimmer
Ini didukung di semua browser utama kecuali IE11: caniuse.com/#search=URLSearchParams
Luis Paulo Lohmann
Bahkan jika itu mulai didukung, jawaban yang sama dengan URLSearchParams dijawab dalam pertanyaan ini setidaknya 3 kali pada jawaban 15 Januari 17 pada 15:24, jawab 14 Juni 18 pada 15:54 dan jawab 1 Maret 19 pada 12:46, seolah-olah tidak seorang pun di antara Anda membaca balasan sebelum memposting
FantomX1
semua posting memiliki masalah kecil yang perlu diselesaikan. jadi biarkan pengguna memilih dan memilih yang terbaik.
Alper Ebicoglu
3

Saya menulis fungsi pembantu kecil yang bekerja dengan semua pilih. Yang perlu Anda lakukan adalah menambahkan kelas "redirectOnChange" ke setiap elemen pilih, dan ini akan menyebabkan halaman memuat ulang dengan parameter querystring yang baru / diubah, sama dengan id dan nilai pilih, misalnya:

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

Contoh di atas akan menambahkan "? MyValue = 222" atau "? MyValue = 333" (atau menggunakan "&" jika ada param lain), dan memuat ulang halaman.

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);
    });
});
Paul Grimshaw
sumber
Sejauh ini solusi terbaik di halaman ini
ed209
2

Di sini saya telah mengambil jawaban Adil Malik dan memperbaiki 3 masalah yang saya identifikasi dengannya.

/**
 * 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;
  }
}
Jonathan Aquino
sumber
1

Inilah yang saya lakukan. Menggunakan fungsi editParams () saya, Anda dapat menambah, menghapus, atau mengubah parameter apa pun, lalu menggunakan fungsi replState () bawaan untuk memperbarui 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
sumber
A downvote tanpa komentar? Ada apa dengan kodenya? Ini berfungsi fantastis untuk banyak situasi.
Bobb Fwed
1

Solusi saya:

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

Kemudian panggil saja "setParams" dan berikan objek dengan data yang ingin Anda atur.

Contoh:

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

Dalam kasus saya, saya harus memperbarui input html pilih ketika itu berubah dan jika nilainya "0", hapus parameter. Anda dapat mengedit fungsi dan menghapus parameter dari url jika kunci objek "null" juga.

Semoga ini bisa membantu kalian

Benjamin
sumber
sudah ada 2 jawaban yang sama dengan URLSearchParams sebelum Anda, seolah-olah tidak ada di antara Anda yang benar-benar membaca jawaban. Diposting pada jawab 15 Jan 17 jam 15:24, jawab 14 Jun 18 pada 15:54
FantomX1
0

Variasi lain pada jawaban Sujoy. Baru saja mengubah nama variabel & menambahkan pembungkus namespace:

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

Penggunaan sekarang:

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

Saya juga telah menulis perpustakaan untuk mendapatkan dan mengatur parameter kueri URL dalam JavaScript .

Berikut adalah contoh penggunaannya.

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

Dapatkan parem permintaan sebagai objek, dengan kunci, atau tambahkan / ubah / hapus.

// 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
rb-
sumber
-1

Saya tahu ini adalah pertanyaan lama. Saya telah meningkatkan fungsi di atas untuk menambah atau memperbarui parameter permintaan. Masih solusi JS murni saja.

                      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 : '');
                    }
pengguna3799810
sumber
-1

fungsi saya mendukung penghapusan param

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(/\&$/, ''));
    }
lossy11
sumber
-1

Saya baru saja menulis modul sederhana untuk menangani membaca dan memperbarui params permintaan url saat ini.

Contoh penggunaan:

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]

Ini kode saya bernama 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 }
Dieter Gribnitz
sumber
Sudah ada 4 balasan yang sama seperti yang Anda sebutkan diposting, menjawab 15 Januari 17 jam 15:24, menjawab 14 Juni 18 pada 15:54, menjawab 1 Maret 19 pada 12:46 dan menjawab 14 Juni 19 pada 7: 20, seolah-olah tidak ada seorang pun di antara Anda yang membaca jawaban sebelum memposting
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);
        });

     });
Yordan Georgiev
sumber