JavaScript에서 쿼리 문자열 매개 변수를 삭제하려면 어떻게해야합니까?

정규식을 사용하는 것 외에 표준 JavaScript의 URL 문자열에있는 쿼리 문자열에서 매개 변수를 삭제하는 더 좋은 방법이 있습니까?

여기 내가 지금까지 내 테스트에서 작동하는 것처럼 보이지만 쿼리 문자열 구문 분석을 재발 명하고 싶지는 않습니다!

function RemoveParameterFromUrl( url, parameter ) {

    if( typeof parameter == "undefined" || parameter == null || parameter == "" ) throw new Error( "parameter is required" );

    url = url.replace( new RegExp( "\\b" + parameter + "=[^&;]+[&;]?", "gi" ), "" ); "$1" );

    // remove any leftover crud
    url = url.replace( /[&;]$/, "" );

    return url;
}

"[&;]?" + parameter + "=[^&;]+"

매개 변수 'bar'가 일치하기 때문에 위험 해 보입니다.

?a=b&foobar=c

또한 parameter'.'와 같이 RegExp에 특수한 문자가 포함되어 있으면 실패합니다 . 그리고 전역 정규식이 아니므로 매개 변수의 인스턴스를 하나만 제거합니다.

나는 이것을 위해 간단한 RegExp를 사용하지 않을 것이며, 매개 변수를 구문 분석하고 원하지 않는 매개 변수를 잃을 것입니다.

function removeURLParameter(url, parameter) {
    //prefer to use l.search if you have a location/link object
    var urlparts = url.split('?');   
    if (urlparts.length >= 2) {

        var prefix = encodeURIComponent(parameter) + '=';
        var pars = urlparts[1].split(/[&;]/g);

        //reverse iteration as may be destructive
        for (var i = pars.length; i-- > 0;) {    
            //idiom for string.startsWith
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {  
                pars.splice(i, 1);
            }
        }

        return urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : '');
    }
    return url;
}

최신 브라우저 는 URLSearchParams검색 매개 변수 작업을 위한 인터페이스를 제공합니다 . 가 어떤 delete방법을 이름으로 제거합니다의 PARAM 그.

if (typeof URLSearchParams !== 'undefined') {
  const params = new URLSearchParams('param1=1&param2=2&param3=3')
  
  console.log(params.toString())
  
  params.delete('param2')
  
  console.log(params.toString())

} else {
  console.log(`Your browser ${navigator.appVersion} does not support URLSearchParams`)
}

bobince 답변에서 복사되었지만 쿼리 문자열에서 물음표를 지원하도록 만들었습니다.

http://www.google.com/search?q=test???+something&aq=f

URL에 두 개 이상의 물음표가있는 것이 유효합니까?

function removeUrlParameter(url, parameter) {
  var urlParts = url.split('?');

  if (urlParts.length >= 2) {
    // Get first part, and remove from array
    var urlBase = urlParts.shift();

    // Join it back up
    var queryString = urlParts.join('?');

    var prefix = encodeURIComponent(parameter) + '=';
    var parts = queryString.split(/[&;]/g);

    // Reverse iteration as may be destructive
    for (var i = parts.length; i-- > 0; ) {
      // Idiom for string.startsWith
      if (parts[i].lastIndexOf(prefix, 0) !== -1) {
        parts.splice(i, 1);
      }
    }

    url = urlBase + '?' + parts.join('&');
  }

  return url;
}

정규식 솔루션에 대한 주요 문제가 보이지 않습니다. 그러나 조각 식별자 (뒤에있는 텍스트)를 보존하는 것을 잊지 마십시오 #.

내 해결책은 다음과 같습니다.

function RemoveParameterFromUrl(url, parameter) {
  return url
    .replace(new RegExp('[?&]' + parameter + '=[^&#]*(#.*)?$'), '$1')
    .replace(new RegExp('([?&])' + parameter + '=[^&]*&'), '$1');
}

그리고 bobince의 요점은 예- .매개 변수 이름에서 문자 를 이스케이프해야 합니다.

다음을 사용하여 URL을 변경할 수 있습니다.

window.history.pushState({}, document.title, window.location.pathname);

이렇게하면 검색 매개 변수없이 URL을 덮어 쓸 수 있습니다. GET 매개 변수를 가져온 후 URL을 정리하는 데 사용합니다.

정규식 솔루션에 관심이있는 사람은이 함수를 조합하여 쿼리 문자열 매개 변수를 추가 / 제거 / 업데이트했습니다. 값을 제공하지 않으면 매개 변수가 제거되고 하나를 제공하면 매개 변수가 추가 / 업데이트됩니다. URL이 제공되지 않으면 window.location에서 가져옵니다. 이 솔루션은 URL의 앵커도 고려합니다.

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

최신 정보

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

업데이트 2

@schellmax 업데이트로 해시 태그 바로 앞에서 쿼리 문자열 변수를 제거 할 때 해시 태그 기호가 손실되는 상황을 수정했습니다.

URI에서 key = val 매개 변수를 제거한다고 가정합니다.

function removeParam(uri) {
   return uri.replace(/([&\?]key=val*$|key=val&|[?&]key=val(?=#))/, '');
}

내가 사용하는 것은 다음과 같습니다.

if (location.href.includes('?')) { 
    history.pushState({}, null, location.href.split('?')[0]); 
}

원래 URL : http://www.example.com/test/hello?id=123&foo=bar
도착 URL : http://www.example.com/test/hello

다음은이 질문과이 github 요점을 기반으로 매개 변수를 추가하고 제거하는 완전한 기능입니다. https://gist.github.com/excalq/2961415

var updateQueryStringParam = function (key, value) {

    var baseUrl = [location.protocol, '//', location.host, location.pathname].join(''),
        urlQueryString = document.location.search,
        newParam = key + '=' + value,
        params = '?' + newParam;

    // If the "search" string exists, then build params from it
    if (urlQueryString) {

        updateRegex = new RegExp('([\?&])' + key + '[^&]*');
        removeRegex = new RegExp('([\?&])' + key + '=[^&;]+[&;]?');

        if( typeof value == 'undefined' || value == null || value == '' ) { // Remove param if value is empty

            params = urlQueryString.replace(removeRegex, "$1");
            params = params.replace( /[&;]$/, "" );

        } else if (urlQueryString.match(updateRegex) !== null) { // If param exists already, update it

            params = urlQueryString.replace(updateRegex, "$1" + newParam);

        } else { // Otherwise, add it to end of query string

            params = urlQueryString + '&' + newParam;

        }

    }
    window.history.replaceState({}, "", baseUrl + params);
};

다음과 같은 매개 변수를 추가 할 수 있습니다.

updateQueryStringParam( 'myparam', 'true' );

그리고 다음과 같이 제거하십시오.

updateQueryStringParam( 'myparam', null );

이 스레드에서 많은 사람들은 정규식이 아마도 최고의 / 안정적인 솔루션이 아니라고 말했습니다 ... 그래서이 일에 결함이 있는지 100 % 확실하지는 않지만 테스트 한 한 꽤 잘 작동합니다.

이것은 오늘날 브라우저 의 URL 클래스 가있는 깨끗한 버전의 쿼리 매개 변수 를 제거 합니다.

function removeUrlParameter(url, paramKey)
{
  var r = new URL(url);
  r.searchParams.delete(paramKey);
  return r.href;
}

URLSearchParams는 이전 브라우저에서 지원되지 않습니다.

https://caniuse.com/#feat=urlsearchparams

IE, Edge (17 이하) 및 Safari (10.3 이하)는 URL 클래스 내에서 URLSearchParams를 지원하지 않습니다.

폴리 필

URLSearchParams 전용 폴리 필

https://github.com/WebReflection/url-search-params

마지막 WHATWG 사양과 일치하도록 완전한 Polyfill URL 및 URLSearchParams

https://github.com/lifaon74/url-polyfill

jQuery 사용 :

function removeParam(key) {
    var url = document.location.href;
    var params = url.split('?');
    if (params.length == 1) return;

    url = params[0] + '?';
    params = params[1];
    params = params.split('&');

    $.each(params, function (index, value) {
        var v = value.split('=');
        if (v[0] != key) url += value + '&';
    });

    url = url.replace(/&$/, '');
    url = url.replace(/\?$/, '');

    document.location.href = url;
}

함수로서의 위 버전

function removeURLParam(url, param)
{
 var urlparts= url.split('?');
 if (urlparts.length>=2)
 {
  var prefix= encodeURIComponent(param)+'=';
  var pars= urlparts[1].split(/[&;]/g);
  for (var i=pars.length; i-- > 0;)
   if (pars[i].indexOf(prefix, 0)==0)
    pars.splice(i, 1);
  if (pars.length > 0)
   return urlparts[0]+'?'+pars.join('&');
  else
   return urlparts[0];
 }
 else
  return url;
}

직접 수행하는 것이 표면 상으로 보이는 것보다 더 복잡하므로 URI 조작을 수행하려면 라이브러리를 사용해야합니다. http://medialize.github.io/URI.js/를 살펴보십시오 .

내가 볼 수 있듯이 위의 어느 것도 일반 매개 변수와 배열 매개 변수를 처리 할 수 ​​없습니다. 여기에 있습니다.

function removeURLParameter(param, url) {
    url = decodeURI(url).split("?");
    path = url.length == 1 ? "" : url[1];
    path = path.replace(new RegExp("&?"+param+"\\[\\d*\\]=[\\w]+", "g"), "");
    path = path.replace(new RegExp("&?"+param+"=[\\w]+", "g"), "");
    path = path.replace(/^&/, "");
    return url[0] + (path.length
        ? "?" + path
        : "");
}

function addURLParameter(param, val, url) {
    if(typeof val === "object") {
        // recursively add in array structure
        if(val.length) {
            return addURLParameter(
                param + "[]",
                val.splice(-1, 1)[0],
                addURLParameter(param, val, url)
            )
        } else {
            return url;
        }
    } else {
        url = decodeURI(url).split("?");
        path = url.length == 1 ? "" : url[1];
        path += path.length
            ? "&"
            : "";
        path += decodeURI(param + "=" + val);
        return url[0] + "?" + path;
    }
}

사용 방법:

url = location.href;
    -> http://example.com/?tags[]=single&tags[]=promo&sold=1

url = removeURLParameter("sold", url)
    -> http://example.com/?tags[]=single&tags[]=promo

url = removeURLParameter("tags", url)
    -> http://example.com/

url = addURLParameter("tags", ["single", "promo"], url)
    -> http://example.com/?tags[]=single&tags[]=promo

url = addURLParameter("sold", 1, url)
    -> http://example.com/?tags[]=single&tags[]=promo&sold=1

물론 매개 변수를 업데이트하려면 제거하고 추가하면됩니다. 그것에 대한 더미 기능을 자유롭게 만드십시오.

이 스레드의 모든 응답에는 URL의 앵커 / 조각 부분을 보존하지 않는다는 결함이 있습니다.

따라서 URL이 다음과 같은 경우 :

http://dns-entry/path?parameter=value#fragment-text

그리고 '매개 변수'를 대체합니다.

조각 텍스트를 잃게됩니다.

다음은이 문제를 해결하는 이전 답변 (LukePH를 통한 bobince)의 수정입니다.

function removeParameter(url, parameter)
{
  var fragment = url.split('#');
  var urlparts= fragment[0].split('?');

  if (urlparts.length>=2)
  {
    var urlBase=urlparts.shift(); //get first part, and remove from array
    var queryString=urlparts.join("?"); //join it back up

    var prefix = encodeURIComponent(parameter)+'=';
    var pars = queryString.split(/[&;]/g);
    for (var i= pars.length; i-->0;) {               //reverse iteration as may be destructive
      if (pars[i].lastIndexOf(prefix, 0)!==-1) {   //idiom for string.startsWith
        pars.splice(i, 1);
      }
    }
    url = urlBase + (pars.length > 0 ? '?' + pars.join('&') : '');
    if (fragment[1]) {
      url += "#" + fragment[1];
    }
  }
  return url;
}

여기에 해결책이 있습니다.

1. URLSearchParams 사용 (정규식 이해하기 어렵지 않음)
2. 다시로드하지 않고 검색 창의 URL 을 업데이트합니다.
3. URL의 다른 모든 부분 (예 : 해시)을 유지합니다.
4. 수 퍼플 로스 제거 ?마지막 매개 변수가 제거 된 경우 쿼리 문자열에서 를 제거합니다.

function removeParam(paramName) {
    let searchParams = new URLSearchParams(window.location.search);
    searchParams.delete(paramName);
    if (history.replaceState) {
        let searchString = searchParams.toString().length > 0 ? '?' + searchParams.toString() : '';
        let newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname +  searchString + window.location.hash;
        history.replaceState(null, '', newUrl);
    }
}

참고 : 다른 답변에서 지적했듯이 URLSearchParams는 IE 에서 지원되지 않으므로 polyfill을 사용하십시오 .

의 인스턴스 인 URL경우 다음 delete기능을 사용하십시오.searchParams

let url = new URL(location.href);
url.searchParams.delete('page');

또 다른 직접적이고 간단한 대답은

let url = new URLSearchParams(location.search)
let key = 'some_key'

return url.has(key)
    ? location.href.replace(new RegExp(`[?&]${key}=${url.get(key)}`), '')
    : location.href

ssh_imov의 솔루션 수정 버전

function removeParam(uri, keyValue) {
      var re = new RegExp("([&\?]"+ keyValue + "*$|" + keyValue + "&|[?&]" + keyValue + "(?=#))", "i"); 
      return uri.replace(re, '');
    }

이렇게 부르세요

removeParam("http://google.com?q=123&q1=234&q2=567", "q1=234");
// returns http://google.com?q=123&q2=567

그러면 GET 매개 변수가없는 URL이 반환됩니다.

var href = document.location.href;
var search = document.location.search;
var pos = href.indexOf( search );
if ( pos !== -1 ){
    href = href.slice( 0, pos );
    console.log( href );
}

URL 매개 변수를 처리하고 최종 상태를 문자열로 가져와 페이지를 리디렉션하기 위해 실제로 다음 함수를 작성했습니다. 바라건대 그것은 유익합니다.

function addRemoveUrlQuery(addParam = {}, removeParam = [], startQueryChar = '?'){

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

    //Add param
    for(let i in addParam){
        if(urlParams.has(i)){ urlParams.set(i, addParam[i]); }
        else                { urlParams.append(i, addParam[i]); }
    }

    //Remove param
    for(let i of removeParam){
        if(urlParams.has(i)){
            urlParams.delete(i);
        }
    }

    if(urlParams.toString()){
        return startQueryChar + urlParams.toString();
    }

    return '';
}

예를 들어 버튼을 클릭하면 페이지 값이 삭제되고 카테고리 값이 추가되기를 원합니다.

let button = document.getElementById('changeCategory');
button.addEventListener('click', function (e) {

    window.location = addRemoveUrlQuery({'category':'cars'}, ['page']);

});

매우 유용하다고 생각합니다!

여기로 스크롤 해 주셔서 감사합니다.

다음 가능한 해결책으로이 작업을 해결하는 것이 좋습니다.

1. 최신 브라우저 (Edge> = 17) 만 지원해야합니다 . URLSearchParams.delete () API를 사용 하세요. 그것은 네이티브이며 분명히이 작업을 해결하는 가장 편리한 방법입니다.
2. 이것이 옵션이 아닌 경우이를 수행하는 함수를 작성할 수 있습니다. 그런 기능 은
   • 매개 변수가없는 경우 URL을 변경하지 마십시오.
   • 값없이 URL 매개 변수를 제거합니다. http://google.com/?myparm
   • 값이있는 URL 매개 변수를 제거하십시오. http://google.com/?myparm=1
   • URL 매개 변수가 URL에 두 번 있으면 제거하십시오. http://google.com?qp=1&qpqp=2&qp=1
   • for루프를 사용하지 않고 루프하는 동안 배열을 수정하지 않습니다.
   • 더 기능적입니다
   • regexp 솔루션보다 더 읽기 쉽습니다.
   • 사용하기 전에 URL이 인코딩되지 않았는지 확인하십시오

IE> 9 (ES5 버전)에서 작동

function removeParamFromUrl(url, param) {  // url: string, param: string
  var urlParts = url.split('?'),
      preservedQueryParams = '';

  if (urlParts.length === 2) {
    preservedQueryParams = urlParts[1]
      .split('&')
      .filter(function(queryParam) {
        return !(queryParam === param || queryParam.indexOf(param + '=') === 0)
      })
      .join('&');
  }

  return urlParts[0] +  (preservedQueryParams && '?' + preservedQueryParams); 
}

멋진 ES6 버전

function removeParamFromUrlEs6(url, param) {
  const [path, queryParams] = url.split('?');
	let preservedQueryParams = '';

  if (queryParams) {
    preservedQueryParams = queryParams
      .split('&')
      .filter(queryParam => !(queryParam === param || queryParam.startsWith(`${param}=`)))
      .join('&');
  }

  return `${path}${preservedQueryParams && `?${preservedQueryParams}`}`;  
}

여기에서 어떻게 작동하는지 확인하세요

function removeParamInAddressBar(parameter) {
    var url = document.location.href;
    var urlparts = url.split('?');

    if (urlparts.length >= 2) {
        var urlBase = urlparts.shift();
        var queryString = urlparts.join("?");

        var prefix = encodeURIComponent(parameter) + '=';
        var pars = queryString.split(/[&;]/g);
        for (var i = pars.length; i-- > 0;) {
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {
                pars.splice(i, 1);
            }
        }

        if (pars.length == 0) {
            url = urlBase;
        } else {
            url = urlBase + '?' + pars.join('&');
        }

        window.history.pushState('', document.title, url); // push the new url in address bar
    }
    return url;
}

const params = new URLSearchParams(location.search)
params.delete('key_to_delete')
console.log(params.toString())

jQuery를 사용하는 경우 좋은 쿼리 문자열 조작 플러그인이 있습니다.

• http://plugins.jquery.com/project/query-object

function removeQueryStringParameter(uri, key, value) 
{

var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");

    var separator = uri.indexOf('?') !== -1 ? "&" : "?";

    if (uri.match(re)) {

        return uri.replace(re, '');

    }
}