Thêm một tham số vào URL bằng JavaScript

Trong một ứng dụng web sử dụng các cuộc gọi AJAX, tôi cần gửi yêu cầu nhưng thêm một tham số vào cuối URL, ví dụ:

URL gốc:

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

URL kết quả:

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

Tìm kiếm một hàm JavaScript phân tích cú pháp URL xem từng tham số, sau đó thêm tham số mới hoặc cập nhật giá trị nếu đã tồn tại.

Một triển khai cơ bản mà bạn cần điều chỉnh sẽ trông giống như thế này:

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

Tốc độ này nhanh gấp khoảng hai lần so với giải pháp dựa trên regex hoặc tìm kiếm, nhưng điều đó phụ thuộc hoàn toàn vào độ dài của chuỗi truy vấn và chỉ mục của bất kỳ kết quả khớp nào

phương pháp regex chậm mà tôi đã điểm chuẩn để hoàn thành vì lợi ích (chậm hơn khoảng 150%)

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

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

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

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

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

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

Bạn có thể sử dụng một trong những điều sau đây:

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

Thí dụ:

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

Cảm ơn tất cả sự đóng góp của bạn. Tôi đã sử dụng mã annakata và sửa đổi để bao gồm cả trường hợp không có chuỗi truy vấn nào trong url. Hy vọng điều này sẽ giúp.

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

Đây là giải pháp rất đơn giản. Nó không kiểm soát sự tồn tại của tham số và nó không thay đổi giá trị hiện có. Nó thêm tham số của bạn vào cuối, để bạn có thể nhận được giá trị mới nhất trong mã back-end của mình.

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

Đây là một phiên bản được đơn giản hóa rất nhiều, tạo ra sự đánh đổi cho mức độ dễ đọc và ít dòng mã hơn thay vì hiệu suất được tối ưu hóa vi mô (và chúng tôi đang nói về sự khác biệt vài giây, thực tế ... do tính chất của điều này (hoạt động trên vị trí của tài liệu hiện tại ), điều này rất có thể sẽ được chạy một lần trên một trang).

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

Sau đó, bạn sẽ sử dụng như vậy:

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

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

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

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

Và xin lưu ý rằng các tham số nên được mã hóa trước khi được thêm vào chuỗi truy vấn.

http://jsfiddle.net/48z7z4kx/

Tôi có một 'lớp' thực hiện điều này và đây là:

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

Tôi đã ghi đè phương thức toString nên không cần gọi QS :: getQueryString, bạn có thể sử dụng QS :: toString hoặc, như tôi đã làm trong các ví dụ chỉ dựa vào đối tượng bị ép buộc thành một chuỗi.

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

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

window.location.search = urlParams;

.set agrument đầu tiên là chìa khóa, cái thứ hai là giá trị.

Nếu bạn có một chuỗi với url mà bạn muốn trang trí bằng một param, bạn có thể thử điều này:

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

Điều này có nghĩa là gì? sẽ là tiền tố của tham số, nhưng nếu bạn đã có ? trong urlstring, hơn & sẽ là tiền tố.

Tôi cũng khuyên bạn nên làm encodeURI( paramvariable )nếu bạn không tham số mã hóa cứng, nhưng nó nằm trong một paramvariable; hoặc nếu bạn có những nhân vật hài hước trong đó.

Xem Mã hóa URL javascript để sử dụng encodeURIchức năng.

Đây là một cách đơn giản để thêm một tham số truy vấn:

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

Và đó là nó nhiều hơn ở đây .

Xin lưu ý các thông số kỹ thuật hỗ trợ .

Hãy xem https://github.com/derek-watson/jsUri

Thao tác chuỗi Uri và truy vấn trong javascript.

Dự án này kết hợp thư viện biểu thức chính quy parseUri tuyệt vời của Steven Levithan. Bạn có thể phân tích URL một cách an toàn tất cả các hình dạng và kích thước, tuy nhiên không hợp lệ hoặc gớm ghiếc.

Đôi khi chúng ta thấy ?ở URL cuối, tôi đã tìm thấy một số giải pháp tạo ra kết quả như file.php?&foo=bar. tôi đã đưa ra giải pháp của riêng tôi làm việc hoàn hảo như tôi muốn!

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

Lưu ý: location.origin không hoạt động trong IE, đây là cách khắc phục .

Chức năng theo dõi sẽ giúp bạn thêm, cập nhật và xóa các tham số đến hoặc từ 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

// ví dụ2

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

// ví dụ3

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

// ví dụ4

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

// ví dụ5

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

Đây là chức năng.

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

Đây là nỗ lực của riêng tôi, nhưng tôi sẽ sử dụng câu trả lời của annakata vì nó có vẻ sạch sẽ hơn nhiều:

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

Ngoài ra, tôi đã tìm thấy plugin jQuery này từ một bài đăng khác trên stackoverflow và nếu bạn cần linh hoạt hơn, bạn có thể sử dụng: http://plugins.jquery.com/project/query-object

Tôi nghĩ rằng mã sẽ là (chưa được thử nghiệm):

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

Thêm vào câu trả lời của @ Vianney https://stackoverflow.com/a/44160941/6609678

Chúng ta có thể nhập mô-đun URL tích hợp trong nút như sau

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

Thí dụ:

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'

Liên kết hữu ích:

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

Thử cái này.

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

Tôi thích câu trả lời của Mehmet Fatih Yıldız ngay cả khi anh ta không trả lời toàn bộ câu hỏi.

Cùng dòng với câu trả lời của anh ấy, tôi sử dụng mã này:

"Nó không kiểm soát sự tồn tại của tham số và nó không thay đổi giá trị hiện có. Nó thêm tham số của bạn vào cuối"

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

và người kiểm tra:

  /*
  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');

  }//*/

Tôi sẽ đi với này thư viện nhỏ nhưng đầy đủ để xử lý các url trong js:

https://github.com/Mikhus/jsurl

Đây là những gì tôi sử dụng khi nói đến một số bổ sung hoặc cập nhật url cơ bản trên phía máy chủ như 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>

Giải pháp dễ nhất, hoạt động nếu bạn đã có thẻ hoặc không và tự động xóa nó để không tiếp tục thêm các thẻ bằng nhau, vui chơi

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

SAU ĐÓ

changeURL("i=updated");

Câu trả lời của Vianney Bajart là chính xác; tuy nhiên, URL sẽ chỉ hoạt động nếu bạn có URL hoàn chỉnh với cổng, máy chủ, đường dẫn và truy vấn:

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

Và URLSearchParams sẽ chỉ hoạt động nếu bạn chỉ truyền chuỗi truy vấn:

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

Nếu bạn có một URL không đầy đủ hoặc tương đối và không quan tâm đến URL cơ sở, bạn có thể chỉ cần tách ra ?để lấy chuỗi truy vấn và tham gia sau như thế này:

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'

Không tương thích với Internet Explorer.

Nếu bạn đang loay hoay với các url trong liên kết hoặc ở một nơi khác, bạn cũng có thể phải đưa tài khoản băm vào tài khoản. Đây là một giải pháp khá đơn giản để hiểu. Có lẽ không phải là NHANH NHẤT vì nó sử dụng regex ... nhưng trong 99,999% trường hợp, sự khác biệt thực sự không quan trọng!

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

Giải pháp đơn giản nhất tôi có thể nghĩ đến là phương pháp này sẽ trả về URI đã sửa đổi. Tôi cảm thấy như hầu hết các bạn đang làm việc quá sức.

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

Ok ở đây tôi so sánh Hai hàm, một hàm do tôi tự tạo (regExp) và một hàm khác được tạo bởi (annakata).

Chia mảng:

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

Phương pháp Regapi:

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

Trường hợp thử nghiệm:

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

Có vẻ như ngay cả với giải pháp đơn giản nhất (khi regrec chỉ sử dụng thử nghiệm và không nhập chức năng .replace), nó vẫn chậm hơn so với chia tách ... Chà. Regapi thì hơi chậm nhưng ... ờ ...

Đây là những gì tôi làm. Sử dụng hàm editParams () của tôi, bạn có thể thêm, xóa hoặc thay đổi bất kỳ tham số nào, sau đó sử dụng hàm thay thế được tích hợp để thay thế 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;
}

Như tốt nhất tôi có thể nói không có câu trả lời nào ở trên giải quyết trường hợp chuỗi truy vấn chứa tham số chính là một mảng và do đó sẽ xuất hiện nhiều lần, ví dụ:

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

Các chức năng sau đây là những gì tôi đã viết để cập nhật document.location.search . Nó lấy một mảng các mảng cặp khóa / giá trị làm đối số và nó sẽ trả về một phiên bản sửa đổi của cái sau mà bạn có thể làm bất cứ điều gì bạn muốn với. Tôi đang sử dụng nó như thế này:

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

Nếu url hiện tại là:

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

Điều này sẽ giúp bạn

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

Chức năng

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

Hãy thử
Các biểu thức chính quy, rất chậm, do đó:

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

};

Thí dụ:

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

Với những thành tựu mới trong JS, đây là cách người ta có thể thêm param truy vấn vào 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);

Đồng thời xem khả năng này Moziila URLSearchParams.append ()

Điều này sẽ làm việc trong tất cả các trình duyệt hiện đại.

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

Đặt lại tất cả chuỗi truy vấn

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>