Thay đổi tham số URL


189

Tôi có URL này:

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

những gì tôi cần là để có thể thay đổi giá trị tham số url của 'hàng' thành thứ tôi chỉ định, giả sử 10. Và nếu 'hàng' không tồn tại, tôi cần thêm nó vào cuối url và thêm giá trị tôi đã chỉ định (10).


2
Câu trả lời nhẹ, không có plugin: stackoverflow.com/a/10997390/11236
ripper234

11
Tôi không thể tin đó là năm 2013 và không có cách nào tốt hơn để làm điều đó, giống như một cái gì đó được tích hợp trong các thư viện trình duyệt cốt lõi.
Tyler Collier

Xem câu trả lời của tôi cho một giải pháp hiện đại: stackoverflow.com/a/19965480/64949
Sindre Sorhus

6
@TylerCollier giữa năm 2015 và vẫn không có gì :(
Tejas Manohar

3
Có vẻ như chúng ta đang đến đó ... developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/
Kẻ

Câu trả lời:


111

Tôi đã mở rộng mã của Sujoy để tạo thành một chức năng.

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

Chức năng gọi:

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

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

Phiên bản cập nhật cũng chăm sóc các neo trên 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;
}

Tôi dường như không thể làm điều này để làm việc. Đây là mã của tôi: jsfiddle.net/Draven/tTPYL/1 URL sẽ trông như thế nào http://www.domain.com/index.php?action=my_action&view-all=Yesvà tôi cần thay đổi giá trị "xem tất cả". Câu hỏi SO của tôi đã bị đóng: stackoverflow.com/questions/13025880/ cấp
Draven

Bạn có chắc không? nó làm việc cho tôi dễ dàng Kiểm tra nó ở đây: jsfiddle.net/mw49a
Adil Malik

1
Sử dụng "var i = 0" thay vì "i = 0" để ngăn việc tạo / sửa đổi i thành biến toàn cục.
Jonathan Aquino

1
Một số vấn đề khác với chức năng này: (1) paramVal không được mã hóa uri. (2) nếu paramVal là null, thì bạn nhận được foo = null. Nó nên là foo = (hoặc thậm chí tốt hơn, loại bỏ hoàn toàn foo).
Jonathan Aquino

Điều này làm cho cuộc sống của tôi dễ dàng hơn nhiều. Cảm ơn rất nhiều bạn đời!
boydenhartog

97

Tôi nghĩ rằng bạn muốn các plugin truy vấn .

Ví dụ:

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

Điều này sẽ làm việc bất kể trạng thái hiện tại của hàng.


Mofle, đó là vì plugin Truy vấn sử dụng decodeURIComponent và decodeURIComponent ("% F8") không hợp lệ.
Matthew Flaschen

2
Lấy thứ lạ đó ra khỏi URL của bạn. Hay nói cách khác, "thay đổi chuỗi truy vấn của bạn để chỉ sử dụng các ký tự UTF-8 hợp lệ". :) F8 một mình không phải là một ký tự UTF-8 hợp lệ.
Matthew Flaschen

Có cách nào để lấy url cơ sở từ plugin này không? Ví dụ: nếu URL của tôi là ' youtube.com/watch?v=PZootaxRh3M ', hãy lấy ' youtube.com/watch '
Matt Norris

3
@Wraith, bạn không cần một plugin cho điều đó. Chỉ là vậy thôi window.location.pathname.
Matthew Flaschen

2
@MattNorris Bạn không cần một plugin cho việc này, nhưng câu trả lời đúng là: window.location.host + window.location.pathname Trong trường hợp của bạn, đó sẽ là "www.youtube.com/watch"
nktssh

68

Để trả lời câu hỏi của riêng tôi 4 năm sau, sau khi đã học được rất nhiều. Đặc biệt là bạn không nên sử dụng jQuery cho mọi thứ. Tôi đã tạo một mô-đun đơn giản có thể phân tích / xâu chuỗi một chuỗi truy vấn. Điều này giúp dễ dàng sửa đổi chuỗi truy vấn.

Bạn có thể sử dụng chuỗi truy vấn như sau:

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

1
Wow đây là một giải pháp đơn giản tuyệt vời. Cảm ơn bạn!
jetlej

Điều này hoạt động như một nhà vô địch! Cảm ơn bạn Sindre (tất cả những gì bạn phải làm là thu nhỏ "chuỗi truy vấn / index.js" và dán nó vào cuối js của bạn)
Ronnie Royston

1
Có thêm một thư viện chỉ dành cho điều đó có vẻ như hơi thêm ...
Bố già

63

Giải pháp nhanh chóng trong js thuần túy, không cần 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 : '');
}

Gọi nó như thế này:

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

Hoặc, nếu bạn muốn ở cùng một trang và thay thế nhiều thông số:

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

chỉnh sửa, cảm ơn Luke: Để xóa hoàn toàn tham số, vượt qua falsehoặc nullcho giá trị : replaceQueryParam('rows', false, params). Vì 0 cũng là giả , chỉ định '0'.


2
cũng để xóa tham số đã sử dụng khỏi đầu ra, hãy thực hiện điều này: str = thayQueryParam ('oldparam', false, str) - về cơ bản đặt một giá trị loại sai
Luke Wenke

1
có vấn đề, sao chép tham số của tôi không có lý do chính đáng, hãy xem giải pháp tương tự stackoverflow.com/a/20420424/3160597
azerafati

@Bludream rằng mã đã được làm việc trong sản xuất trong nhiều năm. Tôi chưa thấy nó nhân đôi một param. Bạn có thể đăng một repro hoặc một số thông tin mang tính xây dựng hơn?
bronson

@Bludream Bây giờ tôi đã hiểu, đó là tập lệnh mà bạn đã liên kết với đó là thêm các tham số trùng lặp. :)
bronson

1
@dVyper đúng, một giá trị giả sẽ loại bỏ hoàn toàn tham số. Sử dụng văn bản '0' thay vì số nguyên 0.
bronson

62

Ben Alman có một plugin chuỗi truy vấn / url tốt ở đây cho phép bạn thao tác chuỗi truy vấn dễ dàng.

Như yêu cầu -

Xem trang thử nghiệm của anh ấy ở đây

Trong firebird, hãy nhập thông tin sau vào bảng điều khiển

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

Nó sẽ trả về cho bạn chuỗi url được sửa đổi sau đây

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

Lưu ý giá trị chuỗi truy vấn cho a đã thay đổi từ X thành 3 và nó đã thêm giá trị mới.

Sau đó, bạn có thể sử dụng chuỗi url mới theo cách bạn muốn, ví dụ như sử dụng document.location = newUrl hoặc thay đổi liên kết neo, v.v.


4
Không phải là jQuery.param.query chuỗi thay vì jQuery.queryString?
Petr Peller

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

1
Để avoir 'TypeError', nó phải là: jQuery.queryString (window.location.href, 'a = 3 & newValue = 100')
code-gijoe

2
bạn nên gọi jQuery.param.querystring. Tôi đoán họ đã tái cấu trúc thư viện.
Will Wu

Cả hai chức năng này không còn tồn tại nữa. Bạn muốn cập nhật window.location.search bằng tay. Sẽ khó khăn hơn nếu bạn không muốn trang sơn lại, vì điều này sẽ gây ra thay đổi trang.
đơn sắc

38

Cách tiếp cận hiện đại cho vấn đề này là sử dụng URLSearchParams dựa trên tiêu chuẩn gốc . Nó được hỗ trợ bởi tất cả các trình duyệt chính, ngoại trừ IE nơi chúng có sẵn các 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.

1
Sẽ thực sự tốt ... nhưng không phải vì IE hoàn toàn không hỗ trợ và việc sử dụng polyfill cho một việc nhỏ như vậy là hoàn toàn không có vấn đề.
forsberg

1
điều này cũng tạo ra các thông số ban đầu đầy đủ, do đó, kết quả trông có vẻ site.fwx%3Fposition=1&archiveid=5000&columns=5&rows=10&sorting=ModifiedTimeAsckhó hiểu vì đó không phải là thứ bạn sẽ xây dựng nếu bạn làm thủ công ...
Ben Wheeler

1
Sẽ thật tuyệt khi xem một ví dụ về cách sử dụng nó. Ý tôi là, làm thế nào để có được chuỗi params từ trang hiện tại và cách đặt chuỗi sau đó
Bố già

27

bạn cũng có thể làm điều đó thông qua JS bình thường

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;

Đẹp! Tôi lấy cái này và sửa thành một hàm. Bạn gửi url hiện tại, tên tham số bạn đang tìm, giá trị mới và bool thông báo nếu bạn muốn thêm tham số vào chuỗi truy vấn nếu hiện tại tôi không tìm thấy nó. Hàm trả về url đã sửa đổi.
Grome

Gormer, bạn phải chia sẻ chức năng đó với người khác :)
Adil Malik

Đoạn trích tuyệt vời. Tôi cũng biến nó thành một chức năng cho trường hợp sử dụng của riêng tôi. Cám ơn vì đã chia sẻ! +1
cướp

18

Đây là cách hiện đại để thay đổi các tham số URL:

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

2
Giải pháp này hiện không được hỗ trợ trong Internet Explorer 11: caniuse.com/#search=URLSearchParams
WoIIe

Phản hồi tương tự đã được trả lời một nửa năm trước bạn bởi @Alister
FantomX1

10

Liệu một sự thay thế khả thi cho thao tác Chuỗi có thể thiết lập một html formvà chỉ sửa đổi giá trị của rowsphần tử không?

Vì vậy, với htmlđó là một cái gì đó như

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

Với JavaScript sau để gửi biểu mẫu

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

Có lẽ không phù hợp với mọi tình huống, nhưng có thể đẹp hơn phân tích chuỗi URL.


Đó là một thông minh.
icarito 15/03/18

7

Bạn có thể sử dụng thư viện này của tôi để thực hiện công việc: https://github.com/Mikhus/jsurl

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

4

Giải pháp 2020 : đặt biến hoặc loại bỏ iti nếu bạn vượt qua nullhoặc undefinedđến giá trị.

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

Lưu ý rằng URLSearchParamskhông hoạt động trong các phiên bản mới nhất của tất cả các trình duyệt chính (2020)
Oliver Schimmer


Nó được hỗ trợ trong tất cả các trình duyệt chính trừ IE11: caniuse.com/#search=URLSearchParams
Luis Paulo Lohmann

Ngay cả khi nó bắt đầu được hỗ trợ, câu trả lời tương tự với URLSearchParams đã được trả lời trong câu hỏi này ít nhất 3 lần đã trả lời vào ngày 15 tháng 1 năm 17 lúc 15:24, trả lời ngày 14 tháng 6 năm 18 lúc 15:54 và trả lời ngày 1 tháng 3 năm 19 lúc 12:46, như thể không ai trong số các bạn đang đọc trả lời trước khi đăng
FantomX1

tất cả các bài viết có vấn đề nhỏ cần được giải quyết. vì vậy hãy để người dùng bình chọn và chọn ra thứ tốt nhất
Alper Ebicoglu

3

Tôi đã viết một hàm trợ giúp nhỏ hoạt động với bất kỳ lựa chọn nào. Tất cả những gì bạn cần làm là thêm lớp "redirectOnChange" vào bất kỳ phần tử chọn nào và điều này sẽ khiến trang tải lại với tham số chuỗi truy vấn mới / đã thay đổi, bằng với id và giá trị của lựa chọn, ví dụ:

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

Ví dụ trên sẽ thêm "? MyValue = 222" hoặc "? MyValue = 333" (hoặc sử dụng "&" nếu các thông số khác tồn tại) và tải lại trang.

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

Cho đến nay, giải pháp tốt nhất trên trang này
ed209

2

Ở đây tôi đã lấy câu trả lời của Adil Malik và khắc phục 3 vấn đề tôi đã xác định với nó.

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

1

Đâ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('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;
}

Một downvote mà không có một bình luận? Có gì sai với mã? Nó hoạt động tuyệt vời cho nhiều tình huống.
Bobb Fwed

1

Giải pháp của tôi:

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

Sau đó, chỉ cần gọi "setParams" và truyền một đối tượng có dữ liệu bạn muốn đặt.

Thí dụ:

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

Trong trường hợp của tôi, tôi đã phải cập nhật một đầu vào chọn html khi nó thay đổi và nếu giá trị là "0", hãy xóa tham số. Bạn có thể chỉnh sửa chức năng và xóa tham số khỏi url nếu khóa đối tượng là "null".

Hy vọng điều này sẽ giúp bạn


đã có 2 câu trả lời giống nhau với URLSearchParams trước bạn, như thể không ai trong số bạn thực sự đọc câu trả lời. Đăng vào ngày 15 tháng 1 năm 17 lúc 17 tháng 1, trả lời ngày 14 tháng 6 năm 18 lúc 15:54
FantomX1

0

Một biến thể khác trong câu trả lời của Sujoy. Chỉ cần thay đổi tên biến và thêm trình bao bọc không gian tên:

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

Hiện tại là:

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

0

Tôi cũng đã viết một thư viện để nhận và thiết lập các tham số truy vấn URL trong JavaScript .

Dưới đây là một ví dụ về việc sử dụng nó.

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

Nhận thông số truy vấn dưới dạng đối tượng, theo khóa hoặc thêm / thay đổi / xóa.

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

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

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

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


-1

Tôi biết đây là một câu hỏi cũ. Tôi đã tăng cường chức năng trên để thêm hoặc cập nhật thông số truy vấn. Vẫn chỉ là một giải pháp thuần túy.

                      function addOrUpdateQueryParam(param, newval, search) {

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

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

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

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

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

-1

chức năng của tôi hỗ trợ loại bỏ 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(/\&$/, ''));
    }

-1

Tôi chỉ viết một mô-đun đơn giản để đối phó với việc đọc và cập nhật các thông số truy vấn url hiện tại.

Ví dụ sử dụng:

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]

Đây là mã của tôi có tên 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 }

Đã có 4 câu trả lời giống như bạn đã đề cập được đăng trên, trả lời ngày 15 tháng 1 năm 17 lúc 15:24, trả lời ngày 14 tháng 6 năm 18 lúc 15:54, trả lời ngày 1 tháng 3 năm 19 lúc 12:46 và trả lời ngày 14 tháng 6 năm 19 lúc 7: 20, như thể không ai thực sự trong số bạn đọc câu trả lời trước khi đăng
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);
        });

     });
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.