URL 매개 변수 변경


189

이 URL이 있습니다 :

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

내가 필요한 것은 'rows'url param 값을 내가 지정한 것으로 변경할 수 있고, 10이라고 말합니다. 'rows'가 존재하지 않으면 URL 끝에 추가하고 URL을 추가해야합니다 내가 이미 지정한 값 (10).


2
가벼운 플러그인없는 답변 : stackoverflow.com/a/10997390/11236
ripper234

11
나는 그것이 2013 년이라고 믿을 수 없으며 핵심 브라우저 라이브러리에 내장 된 것과 같은 더 좋은 방법은 없습니다.
Tyler Collier

: 현대 솔루션에 대한 내 대답을 참조하십시오 stackoverflow.com/a/19965480/64949
Sindre Sorhus

6
@TylerCollier 2015 년 중반 현재와 아직 아무것도 :(
테자스 Manohar

3
우리가 거기에 도착하는 것 같습니다 ... developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/…
chris

답변:


111

Sujoy의 코드를 확장하여 기능을 구성했습니다.

/**
 * http://stackoverflow.com/a/10997390/11236
 */
function updateURLParameter(url, param, paramVal){
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";
    if (additionalURL) {
        tempArray = additionalURL.split("&");
        for (var i=0; i<tempArray.length; i++){
            if(tempArray[i].split('=')[0] != param){
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }
    }

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}

함수 호출 :

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

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

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

이 기능이 작동하지 않는 것 같습니다. 내 코드는 다음과 같습니다. jsfiddle.net/Draven/tTPYL/1 URL은 다음과 같 http://www.domain.com/index.php?action=my_action&view-all=Yes으며 "전체보기"값을 변경해야합니다. 닫은 나의 SO 질문 : stackoverflow.com/questions/13025880/…
Draven

확실합니까? 그것은 나를 위해 쉽게 일했다. 여기를 확인하십시오 : jsfiddle.net/mw49a
Adil Malik

1
i를 전역 변수로 작성 / 수정하지 못하게하려면 "i = 0"대신 "var i = 0"을 사용하십시오.
Jonathan Aquino

1
이 기능과 관련된 몇 가지 다른 문제 : (1) paramVal은 URI 인코딩되지 않습니다. (2) paramVal이 null이면 foo = null이됩니다. foo =이어야합니다 (또는 더 나은 경우 foo를 완전히 제거하십시오).
Jonathan Aquino

이것은 내 인생을 훨씬 쉽게 만들었습니다. 많은 친구 감사합니다!
boydenhartog

97

쿼리 플러그인 을 원한다고 생각합니다 .

예 :

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

이것은 현재 행 상태에 관계없이 작동합니다.


Mofle은 Query 플러그인이 decodeURIComponent를 사용하고 decodeURIComponent ( "% F8")가 유효하지 않기 때문입니다.
Matthew Flaschen

2
URL에서 이상한 내용을 가져옵니다. 즉, "유효한 UTF-8 문자 만 사용하도록 쿼리 문자열을 변경하십시오". :) F8만으로는 유효한 UTF-8 문자가 아닙니다.
Matthew Flaschen

이 플러그인에서 기본 URL을 검색하는 방법이 있습니까? 내 URL이 '인 경우 예를 들어, youtube.com/watch?v=PZootaxRh3M ', '얻을 youtube.com/watch '
매트 노리스

3
@Wraith, 당신은 그것을 위해 플러그인이 필요하지 않습니다. 그냥 window.location.pathname.
Matthew Flaschen

2
당신은 이것에 대한 플러그인이 필요하지 않습니다 @MattNorris하지만 정답은 : window.location.host + window.location.pathname가 귀하의 경우가 될 것 "www.youtube.com/watch"
nktssh

68

많은 것을 배운 후 4 년 후에 내 자신의 질문에 대답하기 위해. 특히 모든 것에 jQuery를 사용해서는 안됩니다. 쿼리 문자열을 구문 분석 / 문자열 화 할 수있는 간단한 모듈을 만들었습니다. 따라서 쿼리 문자열을 쉽게 수정할 수 있습니다.

다음과 같이 query-string 을 사용할 수 있습니다 .

// 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
와우 이것은 아주 간단한 해결책입니다. 감사합니다!
jetlej

이것은 챔피언처럼 작동합니다! Sindre 🏆🏆🏆 감사합니다 ( "query-string / index.js"를 축소하고 js 하단에 붙여 넣기 만하면됩니다)
Ronnie Royston

1
그것을 위해 여분의 라이브러리를 추가하는 것은 약간 여분 인 것 같습니다 ...
대부

jQuery는 하나의 함수에 비해 너무 많았 기 때문에 대신 typescript, travis 및 기타 비 dev 의존성을 사용했습니다. :)
Justin Meiners

@JustinMeiners 대화에 도움이 될만한 의견이 있으면 언급하지 마십시오. 이 프로젝트에서는 TypeScript를 사용하지 않습니다. Travis는 CI가 아닌 종속성입니다.
Sindre Sorhus

64

플러그인이 필요없는 순수한 js의 빠른 솔루션

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

    return (query.length > 2 ? query + "&" : "?") + (newval ? param + "=" + newval : '');
}

다음과 같이 호출하십시오.

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

또는 동일한 페이지에 머무르고 여러 매개 변수를 바꾸려면 다음을 수행하십시오.

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

감사합니다. Luke : 매개 변수를 완전히 제거하려면 false또는 null값을 전달 하십시오 replaceQueryParam('rows', false, params). 이후 0 falsy 또한 , 지정합니다 '0'.


2
또한 출력에서 ​​사용 된 매개 변수를 제거하려면 다음과 같이하십시오 : str = replaceQueryParam ( 'oldparam', false, str)-기본적으로 잘못된 유형 값을 입력하십시오.
Luke Wenke

1
아무 문제없이 내 매개 변수를 복제하는 데 문제가 있습니다.이 비슷한 솔루션을 확인하십시오. stackoverflow.com/a/20420424/3160597
azerafati

@Bludream은 코드가 몇 년 동안 프로덕션 환경에서 작동 해 왔습니다. 나는 그것이 매개 변수를 복제하는 것을 보지 못했습니다. 재현 또는 더 건설적인 정보를 게시 할 수 있습니까?
bronson

@Bludream 지금 이해합니다. 이것은 중복 매개 변수를 추가하는 스크립트입니다. :)
bronson

1
@dVyper가 정확하고 잘못된 값은 매개 변수를 완전히 제거합니다. 정수 0 대신 텍스트 '0'을 사용하십시오.
bronson

62

벤 독일어 좋은있다 JQuery와 쿼리 문자열 / URL 플러그인 여기 즉 쉽게 쿼리 문자열을 조작 할 수 있습니다.

요청대로-

그의 테스트 페이지 고토 여기

Firebug에서 콘솔에 다음을 입력하십시오.

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

다음과 같이 수정 된 URL 문자열을 반환합니다.

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

의 쿼리 문자열 값이 X에서 3으로 변경되었으며 새 값이 추가되었습니다.

그런 다음 document.location = newUrl을 사용하거나 앵커 링크를 변경하는 등 새 URL 문자열을 사용할 수 있습니다.


4
jQuery.queryString 대신 jQuery.param.querystring 아닌가요?
Petr Peller

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

1
'TypeError'를 피하려면 다음과 같아야합니다. jQuery.queryString (window.location.href, 'a = 3 & newValue = 100')
code-gijoe

2
전화해야합니다 jQuery.param.querystring. 나는 그들이 도서관을 리팩토링했다고 생각합니다.
Will Wu

이 기능들 중 어느 것도 더 이상 존재하지 않습니다. window.location.search를 수동으로 업데이트하려고합니다. 페이지를 다시 그리기를 원하지 않으면 페이지가 변경되기가 더 어려워집니다.
monokrome

39

이에 대한 현대적인 접근 방식은 기본 표준 기반 URLSearchParams 를 사용하는 것입니다 . 폴리 필이 가능한 IE를 제외한 모든 주요 브라우저에서 지원됩니다.

const paramsString = "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc"
const searchParams = new URLSearchParams(paramsString);
searchParams.set('rows', 10);
console.log(searchParams.toString()); // return modified string.

1
정말 좋을 것입니다 ...하지만 IE가 전혀 지원하지 않기 때문에 그런 작은 일에 폴리 필을 사용하는 것은 전혀 문제가되지 않습니다.
forsberg

1
이것은 또한 원래의 paramsString을 전체적으로 urlencode하므로 결과는 site.fwx%3Fposition=1&archiveid=5000&columns=5&rows=10&sorting=ModifiedTimeAsc수동으로 수행했을 경우 빌드 한 것이 아니기 때문에 혼란스러워 보입니다 ...
Ben Wheeler

1
그것을 사용하는 방법의 예를 보는 것이 좋을 것입니다. 내 말은, 현재 페이지에서 params 문자열을 얻는 방법과 나중에 설정하는 방법
The Godfather

27

당신은 또한 일반적인 JS를 통해 그것을 할 수 있습니다

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;

좋은! 나는 이것을 가지고 함수로 수정했다. 현재 URL, 찾고있는 매개 변수 이름, 새 값 및 현재 문자열을 찾지 못하면 쿼리 문자열에 매개 변수를 추가할지 여부를 알려주는 부울을 보냅니다. 함수는 수정 된 URL을 반환합니다.
Gromer

Gormer, 당신은 그 기능을 다른 사람들과 공유해야합니다 :)
Adil Malik

멋진 발췌 문장. 나도 그것을 자신의 유스 케이스를위한 함수로 바꿨다. 공유해 주셔서 감사합니다! +1
robabby

19

이것은 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
이 솔루션은 현재 Internet Explorer 11에서 지원되지 않습니다. caniuse.com/#search=URLSearchParams
WoIIe

@Alister
FantomX1에서

10

문자열 조작에 대한 실용적인 대안은 HTML을 설정 form하고 값을 수정하는 것입니까?rows 요소 입니까?

그래서,와 html같은 뭔가

<form id='myForm' target='site.fwx'>
    <input type='hidden' name='position' value='1'/>
    <input type='hidden' name='archiveid' value='5000'/>
    <input type='hidden' name='columns' value='5'/>
    <input type='hidden' name='rows' value='20'/>
    <input type='hidden' name='sorting' value='ModifiedTimeAsc'/>
</form>

다음 JavaScript를 사용하여 양식을 제출하십시오.

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

모든 상황에 적합하지는 않지만 URL 문자열을 구문 분석하는 것보다 좋을 수 있습니다.


그것은 영리한 것입니다.
icarito

7

내 라이브러리를 사용하여 작업을 수행 할 수 있습니다 : https://github.com/Mikhus/jsurl

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

4

2020 솔루션 : null또는 undefined값 을 전달하면 변수를 설정하거나 iti를 제거 합니다.

var setSearchParam = function(key, value) {
    if (!window.history.pushState) {
        return;
    }

    if (!key) {
        return;
    }

    var url = new URL(window.location.href);
    var params = new window.URLSearchParams(window.location.search);
    if (value === undefined || value === null) {
        params.delete(key);
    } else {
        params.set(key, value);
    }

    url.search = params;
    url = url.toString();
    window.history.replaceState({url: url}, null, url);
}

참고 URLSearchParams모든 주요 브라우저의 최신 버전에서 작동하지 않습니다 (2020)
올리버 Schimmer


IE11을 제외한 모든 주요 브라우저에서 지원됩니다 : caniuse.com/#search=URLSearchParams
Luis Paulo Lohmann

지원되기 시작한 경우에도 URLSearchParams와 동일한 답변 이이 질문에 적어도 3 번 답변되었습니다 .1 월 15 '17에 15:24에 응답하고 6 월 14 일 18에 15:54에 답변하고 3 월 1 '19에 답변했습니다 12:46, 게시하기 전에 아무도 답글을 읽지 않은 것처럼
FantomX1

모든 게시물에는 해결해야 할 사소한 문제가 있습니다. 따라서 사용자가 투표하고 가장 좋은 것을 선택하게하십시오.
Alper Ebicoglu

3

나는 모든 선택에서 작동하는 작은 도우미 함수를 작성했습니다. "redirectOnChange"클래스를 select 요소에 추가하기 만하면됩니다. 이렇게하면 select의 id 및 value와 같은 새 / 변경된 querystring 매개 변수로 페이지가 다시로드됩니다. 예 :

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

위의 예는 "? myValue = 222"또는 "? myValue = 333"을 추가하고 (또는 다른 매개 변수가있는 경우 "&"사용) 페이지를 다시로드합니다.

jQuery :

$(document).ready(function () {

    //Redirect on Change
    $(".redirectOnChange").change(function () {
        var href = window.location.href.substring(0, window.location.href.indexOf('?'));
        var qs = window.location.href.substring(window.location.href.indexOf('?') + 1, window.location.href.length);
        var newParam = $(this).attr("id") + '=' + $(this).val();

        if (qs.indexOf($(this).attr("id") + '=') == -1) {
            if (qs == '') {
                qs = '?'
            }
            else {
                qs = qs + '&'
            }
            qs = qs + newParam;

        }
        else {
            var start = qs.indexOf($(this).attr("id") + "=");
            var end = qs.indexOf("&", start);
            if (end == -1) {
                end = qs.length;
            }
            var curParam = qs.substring(start, end);
            qs = qs.replace(curParam, newParam);
        }
        window.location.replace(href + '?' + qs);
    });
});

지금까지이 페이지에서 가장 좋은 솔루션
ed209

2

여기서 나는 Adil Malik의 대답을 취하여 내가 확인한 3 가지 문제를 해결했습니다.

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

1

여기 내가하는 일이 있습니다. editParams () 함수를 사용하면 매개 변수를 추가, 제거 또는 변경할 수 있으며 내장 된 replaceState () 함수를 사용하여 URL을 업데이트 할 수 있습니다.

window.history.replaceState('object or string', 'Title', 'page.html' + editParams('sorting', ModifiedTimeAsc));


// background functions below:

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

  var params = getSearchParameters();

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

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

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

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

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

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

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

코멘트가없는 다운 보트? 코드에 어떤 문제가 있습니까? 많은 상황에서 환상적으로 작동합니다.
Bobb Fwed

1

내 해결책 :

const setParams = (data) => {
    if (typeof data !== 'undefined' && typeof data !== 'object') {
        return
    }

    let url = new URL(window.location.href)
    const params = new URLSearchParams(url.search)

    for (const key of Object.keys(data)) {
        if (data[key] == 0) {
            params.delete(key)
        } else {
            params.set(key, data[key])
        }
    }

    url.search = params
    url = url.toString()
    window.history.replaceState({ url: url }, null, url)
}

그런 다음 "setParams"를 호출하고 설정하려는 데이터가있는 객체를 전달하십시오.

예:

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

필자의 경우 변경 될 때 html 선택 입력을 업데이트하고 값이 "0"이면 매개 변수를 제거해야했습니다. 객체 키가 "null"인 경우 함수를 편집하고 URL에서 매개 변수를 제거 할 수 있습니다.

이것이 당신을 도울 수 있기를 바랍니다.


아무도 당신이 실제로 답변을 읽지 않는 것처럼 URLSearchParams에 대해 이미 2 개의 동일한 답변이 있습니다. 에 게시 됨 1 월 15 '17에 15:24, 6 월 14 '18에 15:54
FantomX1

0

Sujoy의 답변에 대한 또 다른 변형. 변수 이름을 변경하고 네임 스페이스 래퍼를 추가했습니다.

window.MyNamespace = window.MyNamespace  || {};
window.MyNamespace.Uri = window.MyNamespace.Uri || {};

(function (ns) {

    ns.SetQueryStringParameter = function(url, parameterName, parameterValue) {

        var otherQueryStringParameters = "";

        var urlParts = url.split("?");

        var baseUrl = urlParts[0];
        var queryString = urlParts[1];

        var itemSeparator = "";
        if (queryString) {

            var queryStringParts = queryString.split("&");

            for (var i = 0; i < queryStringParts.length; i++){

                if(queryStringParts[i].split('=')[0] != parameterName){

                    otherQueryStringParameters += itemSeparator + queryStringParts[i];
                    itemSeparator = "&";
                }
            }
        }

        var newQueryStringParameter = itemSeparator + parameterName + "=" + parameterValue;

        return baseUrl + "?" + otherQueryStringParameters + newQueryStringParameter;
    };

})(window.MyNamespace.Uri);

사용법은 다음과 같습니다.

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

0

나도 JavaScript에서 URL 쿼리 매개 변수를 가져오고 설정하기위한 라이브러리를 작성했습니다 .

사용 예는 다음과 같습니다.

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

키로 쿼리 매개 변수를 개체로 가져 오거나 추가 / 변경 / 제거하십시오.

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

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

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

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


-1

나는 이것이 오래된 질문이라는 것을 안다. 쿼리 매개 변수를 추가하거나 업데이트하기 위해 위의 기능을 향상 시켰습니다. 여전히 순수한 JS 솔루션입니다.

                      function addOrUpdateQueryParam(param, newval, search) {

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

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

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

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

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

-1

매개 변수 제거 기능 지원

function updateURLParameter(url, param, paramVal, remove = false) {
        var newAdditionalURL = '';
        var tempArray = url.split('?');
        var baseURL = tempArray[0];
        var additionalURL = tempArray[1];
        var rows_txt = '';

        if (additionalURL)
            newAdditionalURL = decodeURI(additionalURL) + '&';

        if (remove)
            newAdditionalURL = newAdditionalURL.replace(param + '=' + paramVal, '');
        else
            rows_txt = param + '=' + paramVal;

        window.history.replaceState('', '', (baseURL + "?" + newAdditionalURL + rows_txt).replace('?&', '?').replace('&&', '&').replace(/\&$/, ''));
    }

-1

방금 현재 URL 쿼리 매개 변수를 읽고 업데이트하는 간단한 모듈을 작성했습니다.

사용법 예 :

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]

다음은 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 }

귀하가 게시 한 언급과 같은 4 개의 동일한 답변이 있습니다. 20, 게시하기 전에 아무도 실제로 답을 읽지 않는 것처럼
FantomX1

-2
     // usage: clear ; cd src/js/node/js-unit-tests/01-set-url-param ; npm test ; cd -
     // prereqs: , nodejs , mocha
     // URI = scheme:[//authority]path[?paramName1=paramValue1&paramName2=paramValue2][#fragment]
     // call by: uri = uri.setUriParam("as","md")
     String.prototype.setUriParam = function (paramName, paramValue) {
        var uri = this
        var fragment = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
        uri = ( uri.indexOf('#') === -1 ) ? uri : uri.split('#')[0]
        if ( uri.indexOf("?") === -1 ) { uri = uri + '?&' }
        uri = uri.replace ( '?' + paramName , '?&' + paramName)
        var toRepl = (paramValue != null) ? ('$1' + paramValue) : ''
        var toSrch = new RegExp('([&]' + paramName + '=)(([^&#]*)?)')
        uri = uri.replace(toSrch,toRepl)
        if (uri.indexOf(paramName + '=') === -1 && toRepl != '' ) {
           var ampersandMayBe = uri.endsWith('&') ? '' : '&'
           uri = uri + ampersandMayBe + paramName + "=" + String(paramValue)
        }
        uri = ( fragment.length == 0 ) ? uri : (uri+"#"+fragment) //may-be re-add the fragment
        return uri
     }

     var assert = require('assert');
     describe('replacing url param value', function () {

        // scheme://authority/path[?p1=v1&p2=v2#fragment
        // a clean url
        it('http://org.com/path -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? with num value
        it('http://org.com/path?prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=57'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? but string value
        it('http://org.com/path?prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=boo-bar'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=boo-bar-baz'
           var uriActual = uri.setUriParam("bid","boo-bar-baz")
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ?& but string value
        it('http://org.com/path?&prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? with other param
        it('http://org.com/path?prm=src_v&other_p=other_v -> http://org.com/path?&prm=tgt_v&other_p=other_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p=other_v'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ?& with other param
        it('http://org.com/path?&prm=src_v&other_p=other_v -> http://org.com/path?&prm=tgt_v&other_p=other_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p&other_v'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p&other_v'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? with other param with fragment
        it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p=other_v#f'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ?& with other param with fragment
        it('http://org.com/path?&prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p&other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p&other_v#f'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // remove the param-name , param-value pair
        it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
           var uriActual = uri.setUriParam("bid",null)
           assert.equal(uriActual, uriExpected);
        });

        // remove the param-name , param-value pair
        it('http://org.com/path?&prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
           var uriActual = uri.setUriParam("bid",null)
           assert.equal(uriActual, uriExpected);
        });

        // add a new param name , param value pair
        it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v&bid=foo-bar#f'
           var uriActual = uri.setUriParam("bid","foo-bar")
           assert.equal(uriActual, uriExpected);
        });

     });
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.