[javascript] 쿼리 문자열 매개 변수를 추가하거나 업데이트하려면 어떻게합니까?

JAVASCRIPT / 글쓴이

javascript를 사용하여 URL에 쿼리 문자열 매개 변수를 추가하거나 존재하지 않는 경우 현재 값을 업데이트하려면 어떻게해야합니까? 클라이언트 측 개발에 jquery를 사용하고 있습니다.

답변

달성하려는 것을 달성하는 다음 기능을 작성했습니다.

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}

답변

솔루션을 확장하고 사용자 입력을 기반으로하고 URL 앵커를 고려하여 쿼리 문자열 매개 변수를 바꾸거나 업데이트 / 제거하는 다른 솔루션과 결합했습니다.

값을 제공하지 않으면 매개 변수가 제거되고, 값을 제공하면 매개 변수가 추가 / 업데이트됩니다. URL을 제공하지 않으면 window.location에서 가져옵니다.

function UpdateQueryString(key, value, url) {
    if (!url) url = window.location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
        hash;

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null) {
            return url.replace(re, '$1' + key + "=" + value + '$2$3');
        }
        else {
            hash = url.split('#');
            url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
                url += '#' + hash[1];
            }
            return url;
        }
    }
    else {
        if (typeof value !== 'undefined' && value !== null) {
            var separator = url.indexOf('?') !== -1 ? '&' : '?';
            hash = url.split('#');
            url = hash[0] + separator + key + '=' + value;
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
                url += '#' + hash[1];
            }
            return url;
        }
        else {
            return url;
        }
    }
}

최신 정보

쿼리 문자열에서 첫 번째 매개 변수를 제거 할 때 버그가 발생하여 정규식을 수정하고 수정 사항을 포함하도록 테스트했습니다.

두 번째 업데이트

@ JarónBarends가 제안한 것처럼-값을 조정하여 0 값을 설정할 수 있도록 undefined 및 null을 검사합니다.

세번째 업데이트

해시 태그 바로 앞에 querystring 변수를 제거하면 수정 된 해시 태그 기호가 손실되는 버그가있었습니다.

네 번째 업데이트

첫 번째 RegExp 객체에서 정규식 최적화를 지적한 @rooby에게 감사드립니다. @YonatanKarni가 찾은 (\? | &) 사용 문제로 인해 초기 정규 표현식을 ([? &])로 설정하십시오.

다섯 번째 업데이트

if / else 문에서 해시 var 선언 제거

답변

URLSearchParams의 유틸리티와 함께이 유용 할 수 있습니다 window.location.search. 예를 들면 다음과 같습니다.

if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search);
    searchParams.set("foo", "bar");
    window.location.search = searchParams.toString();
}

이제 존재 여부 foo에 bar관계없이 설정되었습니다 .

그러나 위의 할당으로 window.location.search인해 페이지가로드되므로 바람직하지 않은 경우 다음과 같이 히스토리 API 를 사용하십시오 .

if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search)
    searchParams.set("foo", "bar");
    var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
    history.pushState(null, '', newRelativePathQuery);
}

이제 쿼리 문자열의 존재 가능성을 처리하기 위해 자체 정규식이나 논리를 작성할 필요가 없습니다.

그러나 브라우저 지원 은 현재 실험적이며 최신 버전의 Chrome, Firefox, Safari, iOS Safari, Android 브라우저, Android Chrome 및 Opera에서만 사용 중이므로 열악합니다. 폴리 필 을 사용하기로 결정한 경우 폴리 필 과 함께 사용하십시오.

업데이트 : 원래 답변 이후 브라우저 지원이 향상되었습니다.

답변

@ amateur의 답변 (현재 @j_walker_dev 주석의 수정 사항 포함)을 기반으로하지만 URL의 해시 태그에 대한 주석을 고려하면 다음을 사용합니다.

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  } else {
    var hash =  '';
    if( uri.indexOf('#') !== -1 ){
        hash = uri.replace(/.*#/, '#');
        uri = uri.replace(/#.*/, '');
    }
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";
    return uri + separator + key + "=" + value + hash;
  }
}

주석에서 지적 [?|&]해야 할 정규 표현식 을 수정하도록 수정 되었습니다 [?&].

편집 : URL 매개 변수 제거를 지원하는 대체 버전. value === undefined제거를 나타내는 방법으로 사용 했습니다. value === false원하는대로 별도의 입력 매개 변수를 사용할 수도 있습니다 .

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
  if( value === undefined ) {
    if (uri.match(re)) {
        return uri.replace(re, '$1$2');
    } else {
        return uri;
    }
  } else {
    if (uri.match(re)) {
        return uri.replace(re, '$1' + key + "=" + value + '$2');
    } else {
    var hash =  '';
    if( uri.indexOf('#') !== -1 ){
        hash = uri.replace(/.*#/, '#');
        uri = uri.replace(/#.*/, '');
    }
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";
    return uri + separator + key + "=" + value + hash;
  }
  }
}

https://jsfiddle.net/bp3tmuxh/1/ 에서 실제로 확인하십시오.

답변

내 라이브러리는 다음과 같습니다. https://github.com/Mikhus/jsurl

var u = new Url;
u.query.param='value'; // adds or replaces the param
alert(u)

답변

window.location.search는 읽기 / 쓰기입니다.

그러나 검색어 문자열을 수정하면 현재 페이지가 리디렉션되고 서버에서 새로 고침이 발생합니다.

클라이언트 측 상태를 유지하고 책갈피 가능하게 만드는 경우 쿼리 문자열 대신 URL 해시를 수정하여 동일한 페이지 (window.location)에 유지하려고합니다. 해시는 읽기 / 쓰기입니다). 이것이 twitter.com과 같은 웹 사이트가 이것을 수행하는 방법입니다.

뒤로 버튼이 작동하기를 원할 것입니다 .Javascript 이벤트를 해시 변경 이벤트에 바인딩해야합니다 .http : //benalman.com/projects/jquery-hashchange-plugin/

답변

설정되지 않았거나 새 값으로 업데이트하려는 경우 다음을 사용할 수 있습니다.

window.location.search = 'param=value'; // or param=new_value

그건 그렇고, 간단한 자바 스크립트입니다.

편집하다

jquery query-object plugin 을 사용해보십시오.

window.location.search = jQuery.query.set ( “param”, 5);