Menambahkan parameter ke URL dengan JavaScript


276

Dalam aplikasi web yang memanfaatkan panggilan AJAX, saya perlu mengirimkan permintaan tetapi menambahkan parameter ke akhir URL, misalnya:

URL asli:

http: //server/myapp.php? id = 10

URL yang dihasilkan:

http: //server/myapp.php? id = 10 & enabled = true

Mencari fungsi JavaScript yang mem-parsing URL melihat setiap parameter, lalu menambahkan parameter baru atau memperbarui nilainya jika sudah ada.


Sudahkah Anda mencari parser url javascript ? Anda bisa membuatnya sendiri, memisahkan setiap & -karakter, tapi mungkin lebih mudah hanya menggunakan kode yang ada.
csl

1
Aku punya skenario yang sama sekali dan saya menemukan artikel ini oleh Peter Bromberg sangat membantu:
Cerebrus

2
window.history.pushState ('page2', 'Title', document.location + '/ page2.php'); akan melakukan pekerjaan Anda tanpa memuat halaman
Rutunj sheladiya

1
Pertanyaan ini memiliki jawaban yang lebih baik di sini stackoverflow.com/questions/6953944/…
rkb

luar biasa ini bukan asli dalam bahasa miskin ini bahwa JS adalah ....
bohr

Jawaban:


192

Implementasi dasar yang perlu Anda adaptasi akan terlihat seperti ini:

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

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

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

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

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

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

Ini kira-kira dua kali lebih cepat dari regex atau solusi berbasis pencarian, tetapi itu tergantung sepenuhnya pada panjang querystring dan indeks dari setiap kecocokan


metode regex lambat yang saya tolak untuk penyelesaian (kira-kira 150% lebih lambat)

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

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

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

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

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

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

2
Terima kasih lagi. lihat lessanvaezi.com/wp-content/uploads/2009/01/test.html untuk perbandingan dasar metode
Lessan Vaezi

16
Menggunakan escape () untuk keluar dari parameter URL salah. Itu rusak untuk nilai dengan "+" di dalamnya. Anda harus menggunakan komponen encodeURIC. Diskusi lengkap: xkr.us/articles/javascript/encode-compare
Antonin Hildebrand

4
Saya memanggil fungsi ini dan halaman dimuat ulang dalam infinite loop. Tolong bantu!
sumit

6
ketika tidak ada parameter yang sudah ada di url Anda mendapatkan nilai? & param =
Roy Toledo

9
Bukankah seharusnya Anda menggunakan encodeURIComponentbukan encodeURI? Kalau tidak, karakter seperti apa pun =, &dengan nama atau nilai Anda akan merusak URI.
Adrian Pronk

271

Anda dapat menggunakan salah satu dari ini:

Contoh:

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

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

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

2
Saya ingin menambahkan parameter permintaan tanpa nilai, misalnya menambahkan XMLke http://foo.bar/?x=1&y=2sehingga hasil akhirnya adalah http://foo.bar/?x=1&y=2&XML. Apakah ini mungkin? Saya mencoba url.searchParams.set('XML');,, url.searchParams.set('XML', null);dan url.searchParams.set('XML', undefined);- tetapi tidak ada yang berhasil di Chrome 63 .
Abdull

2
Terima kasih! Sayang sekali belum didukung oleh iOS. developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
kanji

27
Sayang sekali IE tidak mendukungnya.
spedy

3
iOS sekarang mendukung URLSearchParams (sejak 9 hari setelah komentar @ kanji)
MJeffryes

8
Berita baik @MJeffryes! Masih belum didukung oleh IE dan Netscape.
Vianney Bajart

64

Terima kasih atas kontribusi Anda. Saya menggunakan kode annakata dan dimodifikasi untuk memasukkan kasus di mana tidak ada string kueri di url sama sekali. Semoga ini bisa membantu.

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

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

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

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

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

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

3
Akan lebih baik untuk mengubah dari escape(key)dan escape(value)ke encodeURIComponentfungsi.
kolobok 3-15

5
haruskah ini benar-benar memeriksa if (kvp.length==1 && kvp[0]="")?
Charles L.

@CharlesL. lebih baik adalahif (document.location.search)
Lyubimov Roman

58

Ini solusi yang sangat sederhana. Ini tidak mengontrol keberadaan parameter, dan itu tidak mengubah nilai yang ada. Itu menambahkan parameter Anda ke akhir, sehingga Anda bisa mendapatkan nilai terbaru dalam kode back-end Anda.

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

6
Anda juga harus memperhitungkan "#" di url .. berikut ini beberapa kode slop:url = (url.indexOf("?") != -1 ? url.split("?")[0]+"?"+part+"&"+url.split("?")[1] : (url.indexOf("#") != -1 ? url.split("#")[0]+"?"+part+"#"+ url.split("#")[1] : url+'?'+part));
kanzure

2
@kanzure benda ini terlihat jahat sekali, tapi itulah yang saya inginkan. Terima kasih.
Chad von Nau

mengapa membagi url untuk memeriksa keberadaan satu karakter? juga jangan lupa untuk menyandikan ... sesuatu yang lebih sepertifunction appendQs(url, key, value) { return url + (url.indexOf('?') >= 0 ? "&" : '?') + encodeURIComponent(key) + "=" + encodeURIComponent(value); };
drzaus

1
Memperbaikinya. Fungsi ini tidak memeriksa apakah parameter sudah disediakan. Saya menguji ini dan mendapatkannya https://localhost/preview/inventory.html?sortci=priceASC&sortci=priceASC&sortci=stitle.
Jay

@ Jay, mengapa perlu diperbaiki? Periksa asumsi Anda. Parameter string kueri duplikat legal, sama dengan bidang formulir duplikat. Ini adalah bagaimana daftar kotak centang diimplementasikan.di HTML dan ini akan diteruskan melalui string kueri jika metode form = dapatkan
stephen

34

Berikut ini adalah versi yang sangat disederhanakan, membuat pengorbanan untuk keterbacaan dan lebih sedikit baris kode daripada kinerja yang dioptimalkan secara mikro (dan kami berbicara tentang beberapa perbedaan milidetik, secara realistis ... karena sifat dari ini (beroperasi pada lokasi dokumen saat ini) ), ini kemungkinan besar akan dijalankan sekali di halaman).

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

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

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

  return params;
};

Anda kemudian akan menggunakan ini seperti ini:

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

1
+1 Saya suka bagaimana Anda dapat menentukan sesuatu selain document.location.search
Muhd

1
+1 Luar Biasa, saya setuju bahwa keterbacaan lebih penting daripada optimasi mikro dalam hal ini dan saya senang melihat seseorang mengambil pendekatan itu. @ Muhd ​​Mungkin itu adalah bug di mesin JS ketika Anda menulis komentar itu, tapi saya baru saja menguji '$ 1' dalam konteks ini dan berfungsi dengan baik.
JMTyler

Terima kasih banyak untuk solusinya, meskipun saya juga macet jika saya ingin mengganti nilai dan sudah ada parameter di sana. Sebaliknya a & itu menulis $ 1
Codebryo

2
Garrett: Bisakah Anda memperbaiki jawaban Anda sehingga menggantikan parameter yang ada dengan benar? Ini hanya masalah penggantian [\?&]dengan ([\?&])di RegExp (saya hanya mengeditnya sendiri tapi saya tidak yakin apakah kebijakan komunitas memungkinkan memperbaiki bug dalam jawaban).
opyh

Ini tidak berfungsi dengan url seperti " domain.tld " add-nya "&" bukannya "?"
user706420

20

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

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

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

Dan harap dicatat bahwa parameter harus dikodekan sebelum ditambahkan dalam string kueri.

http://jsfiddle.net/48z7z4kx/


Kebocoran memori kecil - Anda ingin menghapus elemen jangkar yang ditambahkan ke dokumen sebelum kembali.
rami

@ Freedev, Tidak, saya tidak yakin. ;) Saya mengalami kesulitan menemukan sumber yang berwenang tetapi bukti menunjukkan bahwa Anda benar. Karena elemen yang dibuat tidak pernah dilampirkan ke DOM, itu harus dibersihkan setelah variabel keluar dari ruang lingkup. DOM API tidak dirancang dengan sangat baik dalam hal efek samping, jadi saya terlalu berhati-hati.
rami

Solusi ini menambahkan garis miring ke URL yang tidak memiliki parameter lintasan dan ulang, yang merupakan perubahan yang tidak perlu dan mungkin tidak diinginkan. Itu juga menambahkan daripada mengganti parameter yang ada yang tidak memiliki nilai (misalnya http://abc.def/?a&b&b).
Adam Leggett

@AdamLeggett Terima kasih telah menunjukkan bug yang terjadi ketika parameter permintaan tidak memiliki nilai, saya baru saja memperbaiki jawaban saya. Perilaku aneh yang tersisa yang Anda bicarakan, jika Anda benar, dihasilkan oleh objek HTML anchor yang biasanya merupakan komponen browser standar. Saya sarankan untuk memeriksa ulang karena sangat tidak mungkin browser menambahkan perilaku yang tidak perlu atau tidak diinginkan.
freedev

1
Tujuan dari fungsi addParam adalah menambahkan beberapa kali parameter, dan mungkin Anda harus tahu bahwa Anda dapat melewatkan parameter yang sama bahkan dengan nilai yang sama beberapa kali. stackoverflow.com/questions/24059773/…
freedev

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

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

window.location.search = urlParams;

.set agrument pertama adalah kuncinya, yang kedua adalah nilainya.


1
Cinta kesederhanaan ini dan itu menggunakan metode browser asli
Juan Solano

2
Ini adalah jawaban yang benar dan harus dipilih. API baru ini adalah yang pasti untuk pemrosesan URL
Anthony

19

Saya memiliki 'kelas' yang melakukan ini dan ini dia:

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

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

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

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

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

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

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

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

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

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

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

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

Saya telah mengganti metode toString sehingga tidak perlu memanggil QS :: getQueryString, Anda dapat menggunakan QS :: toString atau, seperti yang telah saya lakukan dalam contoh hanya mengandalkan objek yang dipaksa menjadi string.


8

Jika Anda memiliki string dengan url yang ingin Anda hias dengan param, Anda bisa mencoba ini:

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

Ini artinya ? akan menjadi awalan dari parameter, tetapi jika Anda sudah punya ? di urlstring, daripada & akan menjadi awalan.

Saya juga akan merekomendasikan untuk melakukannya encodeURI( paramvariable )jika Anda tidak melakukan hardcoded parameter, tetapi di dalam paramvariable; atau jika Anda memiliki karakter lucu di dalamnya.

Lihat Pengkodean URL javascript untuk penggunaan encodeURIfungsi ini.


7

Ini adalah cara sederhana untuk menambahkan parameter kueri:

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

Dan itu lebih di sini .

Harap perhatikan spesifikasi dukungannya .


4
Tampaknya ini tidak didukung dalam versi Internet Explorer
MAXE

Ideal untuk seluler. Ketika Internet Explorer muncul di perangkat seluler saya, saya akan membuangnya. :-)
stillatmylinux

@MAXE Anda benar IE / EDGE tidak banyak mendukung. Didukung di
T04435

6

Periksa https://github.com/derek-watson/jsUri

Uri dan kueri manipulasi string dalam javascript.

Proyek ini menggabungkan parseUri regular expression library yang sangat baik oleh Steven Levithan. Anda dapat mem-parsing URL dengan aman dari semua bentuk dan ukuran, namun tidak valid atau mengerikan.


404 - URL yang diminta / p / jsuri / tidak ditemukan di server ini. Itu yang kita tahu.
Aligma

1
Sepertinya sudah dipindahkan. Saya telah memperbarui url. Semoga berhasil!
Charlie Liang Yuan

Harap sertakan detail yang relevan dalam jawaban Anda, bukan hanya tautan.
jhpratt GOFUNDME RELICENSING

6

Kadang-kadang kita melihat ?di URL akhir, saya menemukan beberapa solusi yang menghasilkan sebagai file.php?&foo=bar. saya datang dengan solusi saya sendiri bekerja dengan sempurna seperti yang saya inginkan!

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

Catatan: location.origin tidak berfungsi di IE, berikut ini perbaikannya .


6

Fungsi berikut akan membantu Anda menambah, memperbarui, dan menghapus parameter ke atau dari URL.

// example1and

var myURL = '/search';

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

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

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

// example2

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

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

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

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

// example3

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

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

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

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

// example4

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

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

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

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

// example5

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

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

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

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

Inilah fungsinya.

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

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

      var finalUrl = baseUrl;

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

      return finalUrl + url.substring(hashIndex); 
  }

5

Ini adalah usaha saya sendiri, tetapi saya akan menggunakan jawabannya oleh annakata karena tampaknya lebih bersih:

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

    return urlParts[0] + newQueryString;
}

Juga, saya menemukan plugin jQuery ini dari posting lain di stackoverflow, dan jika Anda membutuhkan lebih banyak fleksibilitas Anda dapat menggunakannya: http://plugins.jquery.com/project/query-object

Saya pikir kodenya (belum diuji):

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

Terima kasih telah membagikan kode Anda, Lessan. Saya telah menggunakan ini dan itu berhasil hebat! Saya telah mengunggah intisari versi saya sendiri, diedit untuk menjadi sedikit lebih ringkas dan lulus validasi JSHint. gist.github.com/jonathanconway/02a183920506acd9890a
Jonathan

3

Menambahkan ke @ Vianney's Answer https://stackoverflow.com/a/44160941/6609678

Kami dapat mengimpor modul URL Bawaan dalam simpul sebagai berikut

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

Contoh:

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

Tautan Berguna:

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


3

Coba ini.

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

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

url.searchParamsadalah daftar parameter yang diinisialisasi untuk URLobjek itu.
amfetamachine

2

Saya suka jawaban Mehmet Fatih Yıldız bahkan dia tidak menjawab seluruh pertanyaan.

Sejalan dengan jawabannya, saya menggunakan kode ini:

"Ini tidak mengontrol keberadaan parameter, dan itu tidak mengubah nilai yang ada. Itu menambah parameter Anda sampai akhir"

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

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

      return _url;
  }

dan penguji:

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

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

  }//*/


2

Inilah yang saya gunakan ketika datang ke beberapa penambahan param url dasar atau pembaruan di sisi server seperti Node.js.

CoffeScript:

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

JavaScript:

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

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


2

Solusi termudah, berfungsi jika Anda sudah memiliki tag atau belum, dan menghapusnya secara otomatis sehingga tidak akan terus menambahkan tag yang sama, bersenang-senanglah

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

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

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

KEMUDIAN

changeURL("i=updated");

2

Jawaban Vianney Bajart benar; namun, URL hanya akan berfungsi jika Anda memiliki URL lengkap dengan port, host, path, dan query:

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

Dan URLSearchParams hanya akan berfungsi jika Anda hanya meneruskan string kueri:

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

Jika Anda memiliki URL yang tidak lengkap atau relatif dan tidak peduli dengan URL dasar, Anda bisa membaginya dengan ?mendapatkan string kueri dan bergabung nanti seperti ini:

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

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

Tidak kompatibel dengan Internet Explorer.


Jika Anda menggunakan var u = new URL(window.location), usp = u.searchParams;Anda tidak harus menggunakan string-splitting mewah.
amphetamachine

Sementara solusi Anda akan bekerja untuk sebagian besar hal, itu akan memotong-motong URL jika memiliki tanda tanya dalam nilai parameter:setUrlParams('https://example.com?foo=thing???&bar=baz', 'baz', 'qux') => "https://example.com?foo=thing&baz=qux???&bar=baz"
amphetamachine

1

Jika Anda bermain-main dengan url di tautan atau tempat lain, Anda mungkin harus mempertimbangkan hash juga. Berikut ini adalah solusi yang cukup sederhana untuk dipahami. Mungkin bukan TERCEPAT karena menggunakan regex ... tetapi dalam 99,999% kasus, perbedaannya benar-benar tidak masalah!

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

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

Tidak yakin mengapa seseorang menurunkan Anda. Ini adalah salah satu solusi yang lebih dapat diandalkan, meskipun cara kode lebih dari yang diperlukan.
Adam Leggett

1

Solusi paling sederhana yang dapat saya pikirkan adalah metode ini, yang akan mengembalikan URI yang dimodifikasi. Saya merasa sebagian besar dari Anda bekerja terlalu keras.

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

0

Ok di sini saya membandingkan Dua fungsi, satu dibuat sendiri (regExp) dan satu lagi dibuat oleh (annakata).

Array terpisah:

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

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

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

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

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

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

Metode Regexp:

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

Kasus pengujian:

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

time3=(new Date).getTime();

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

Tampaknya bahkan dengan solusi paling sederhana (ketika regexp hanya menggunakan tes dan tidak masuk fungsi. Ganti) masih lebih lambat daripada membelah ... Yah. Regexp agak lambat tapi ... uhh ...


seperti yang saya sebutkan, ini sebenarnya relatif lambat - dan fwiw, document.location.search lebih jelas
annakata

0

Inilah yang saya lakukan. Dengan 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('enable', 'true'));


// background functions below:

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

  var params = getSearchParameters();

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

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

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

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

// Get object/associative array of URL parameters
function getSearchParameters () {
  var prmstr = window.location.search.substr(1);
  return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}

// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
  var params = {},
      prmarr = prmstr.split("&");

  for (var i = 0; i < prmarr.length; i++) {
    var tmparr = prmarr[i].split("=");
    params[tmparr[0]] = tmparr[1];
  }
  return params;
}

0

Yang terbaik yang saya bisa katakan tidak satupun dari jawaban di atas mengatasi kasus di mana string kueri berisi parameter yang merupakan array dan karenanya akan muncul lebih dari sekali, misalnya:

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

Fungsi berikut adalah apa yang saya tulis untuk memperbarui document.location.search. Dibutuhkan array array kunci / nilai sebagai argumen dan itu akan mengembalikan versi revisi dari yang Anda dapat melakukan apa pun yang Anda suka. Saya menggunakannya seperti ini:

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

Jika url saat ini adalah:

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

Ini akan membantu Anda

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

Fungsi

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

0

Coba
Ekspresi reguler, jadi lambat, jadi:

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

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

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

    // window.location = newurl; //reload 

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

};

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

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

};

Contoh:

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

0

Dengan pencapaian baru di JS di sini adalah bagaimana seseorang dapat menambahkan param kueri ke URL:

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

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

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

Lihat juga kemungkinan ini Moziila URLSearchParams.append ()


0

Ini akan bekerja di semua browser modern.

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

0

Setel ulang semua string kueri

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

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

console.log(uri+"?"+str);
//window.location.href = uri+"?"+str;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.