자바스크립트에서 쿼리 문자열 매개 변수를 삭제하려면 어떻게 해야 합니까?
정규식을 사용하는 것 외에 표준 자바스크립트에서 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
또한, 만약 그렇다면 실패한다면 실패할 것입니다.parameterRegExp에 '.'와 같이 특수 문자가 포함되어 있습니다. 또한 전역 정규식이 아니므로 매개 변수의 인스턴스 하나만 제거합니다.
단순한 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;
}
최신 브라우저는 검색 매개 변수와 함께 작동하는 인터페이스를 제공합니다.이름으로 매개변수를 제거하는 방법이 있습니다.
if (typeof URLSearchParams !== 'undefined') {
const params = new URLSearchParams('param1=1¶m2=2¶m3=3')
console.log(params.toString())
params.delete('param2')
console.log(params.toString())
} else {
console.log(`Your browser ${navigator.appVersion} does not support URLSearchParams`)
}다음을 사용하여 URL을 변경할 수 있습니다.
window.history.pushState({}, document.title, window.location.pathname);
이렇게 하면 검색 매개 변수 없이 URL을 덮어쓸 수 있습니다. GET 매개 변수를 취한 후 URL을 정리하는 데 사용합니다.
의 URL을 사용합니다.delete의 searchParams
let url = new URL(location.href);
url.searchParams.delete('page');
정규식 솔루션에 대한 주요 문제는 보이지 않습니다.그러나 fragment 식별자(fragment 식별자 뒤의 텍스트)를 보존하는 것을 잊지 마십시오.#).
제 솔루션은 다음과 같습니다.
function RemoveParameterFromUrl(url, parameter) {
return url
.replace(new RegExp('[?&]' + parameter + '=[^&#]*(#.*)?$'), '$1')
.replace(new RegExp('([?&])' + parameter + '=[^&]*&'), '$1');
}
그리고 보빈스의 요점은, 네 - 당신은 탈출해야 합니다..매개 변수 이름의 문자입니다.
bobince 답변에서 복사되었지만 쿼리 문자열에서 물음표를 지원하도록 했습니다.
http://www.google.com/search?q=test ?+something&aq=f
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;
}
여기에 다음과 같은 솔루션이 있습니다.
- URL 검색 매개 변수 사용(레식을 이해하는 데 어려움이 없음)
- 다시 로드하지 않고 검색 표시줄의 URL을 업데이트합니다.
- URL의 다른 모든 부분(예: 해시)을 유지 관리합니다.
- 마지막 매개 변수가 제거된 경우 쿼리 문자열의 중첩을 제거합니다.
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);
}
}
참고: 다른 답변에서 지적한 것처럼 URL 검색 매개 변수는 IE에서 지원되지 않으므로 폴리필을 사용합니다.
제가 사용하는 것은 다음과 같습니다.
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
이제 이 답은 훨씬 더 좋아 보입니다! (그러나 완전히 테스트되지는 않았습니다)
이것은 현재 브라우저에 대한 URL 클래스가 있는 클린 버전 제거 쿼리 매개 변수입니다.
function removeUrlParameter(url, paramKey)
{
var r = new URL(url);
r.searchParams.delete(paramKey);
return r.href;
}
URL 검색 매개 변수가 이전 브라우저에서 지원되지 않음
https://caniuse.com/ #http=url 검색 매개 변수
IE, Edge(17 미만) 및 Safari(10.3 미만)는 URL 클래스 내의 URL 검색 매개 변수를 지원하지 않습니다.
폴리필
URL 검색Params 전용 폴리필
https://github.com/WebReflection/url-search-params
마지막 WHATWG 사양과 일치하도록 Polyfill URL 및 URL 검색 매개 변수를 완료합니다.
https://github.com/lifaon74/url-polyfill
정규식 솔루션에 관심이 있는 사람은 누구나 쿼리 문자열 매개 변수를 추가/제거/업데이트하기 위해 이 기능을 함께 구성했습니다.값을 제공하지 않으면 매개 변수가 제거되고, 값을 제공하면 매개 변수가 추가/업데이트됩니다.제공된 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;
}
}
갱신하다
쿼리 문자열에서 첫 번째 매개 변수를 제거할 때 버그가 발생하여 regex를 재작업하고 수정을 포함하도록 테스트했습니다.
업데이트 2
@shellmax 업데이트 - 해시태그 바로 앞 쿼리 문자열 변수 제거 시 해시태그 기호가 손실되는 상황 수정
URI에서 key=val 매개 변수를 제거한다고 가정합니다.
function removeParam(uri) {
return uri.replace(/([&\?]key=val*$|key=val&|[?&]key=val(?=#))/, '');
}
다음은 이 질문과 이 기트 허브를 기반으로 매개 변수를 추가 및 제거하기 위한 전체 함수입니다. 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% 확신할 수는 없지만 테스트한 바로는 꽤 잘 작동합니다.
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
그리고 '매개 변수'를 바꿉니다.
단편 텍스트를 잃게 됩니다.
다음은 이전 답변을 적용한 것입니다(Luke를 통해 시작됨).PH) 이 문제를 해결합니다.
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;
}
저는 실질적으로 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']);
});
저는 그것이 매우 유용했다고 생각합니다!
직접적이고 간단한 또 다른 대답은 다음과 같습니다.
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
여기까지 스크롤해 주셔서 감사합니다.
가능한 다음 해결 방법으로 이 작업을 해결할 것을 제안합니다.
- 최신 브라우저(Edge > = 17)만 지원해야 합니다. URLSearchParams.delete() API 사용.이것은 기본적인 것이고 분명히 이 작업을 해결하는 가장 편리한 방법입니다.
- 이 옵션이 아닌 경우 이를 위한 함수를 작성할 수 있습니다.그런 기능은 합니다.
- 매개 변수가 없는 경우 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}`}`;
}Internet Explorer(인터넷 익스플로러)를 지원하지 않아도 되거나 지원하지 않아도 되는 폴리필이 있는 경우에는 여기 있는 다른 답변에서 제안한 것과 같이 이를 사용합니다.당신이 의존하고 싶지 않다면.URLSearchParams그게 제가 할 수 있는 방법입니다.
function removeParameterFromUrl(url, parameter) {
const replacer = (m, p1, p2) => (p1 === '?' && p2 === '&' ? '?' : p2 || '')
return url.replace(new RegExp(`([?&])${parameter}=[^&#]+([&#])?`), replacer)
}
다음과 같은 매개 변수를 대체합니다.?(p1) 및 그 다음&(p2)와 함께?매개 변수 목록이 물음표로 계속 시작하는지 확인합니다. 그렇지 않으면 다음 구분 기호로 대체됩니다.p2): 그럴 수 있습니다.&또는#또는undefined빈 문자열로 되돌아갑니다.
모든 쿼리 매개 변수를 제거하는 간단한 비 정규식 방법은 다음과 같습니다.
const url = "https://example.com";
const urlObj = new URL(url);
const urlWithoutQueryParams = `${urlObj.origin}${urlObj.pathname}`;
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 );
}
const params = new URLSearchParams(location.search)
params.delete('key_to_delete')
console.log(params.toString())
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;
}
function clearQueryParams() {
const paramName = 'abc';
const url = new URL(window.location.href);
url.searchParams.delete(paramName);
const newUrl = url.search ? url.href : url.href.replace('?', '');
window.history.replaceState({}, document.title, newUrl); //if you don't want to reload
window.location = newUrl; //if you want to reload
}
const removeQueryParams = (url: string) => {
const urlParts = url.split("?");
return urlParts[0];
};
다음은 URL에서 쿼리 매개 변수를 제거하고 URL을 업데이트하는 더 나은 방법입니다(필요한 경우).
const myUrl = 'https://example.com?val=3&temp=20'
const newUrl = new URL(myUrl);
// delete any param (lets say 'temp' in our case)
newUrl.searchParams.delete('temp');
console.log(newUrl.href); // https://example.com/?val=3
//set any param (lets say 'newParam' in our case)
newUrl.searchParams.set('newParam', 20);
console.log(newUrl.href) // // https://example.com/?val=3&newParam=20페이지 다시 로드 없이 업데이트된 URL을 설정하려면 History API를 다음과 같이 사용합니다.
history.replaceState({}, null, newUrl.href);
만약 당신이 jQuery에 관심이 있다면, 좋은 쿼리 문자열 조작 플러그인이 있습니다.
언급URL : https://stackoverflow.com/questions/1634748/how-can-i-delete-a-query-string-parameter-in-javascript
'programing' 카테고리의 다른 글
| SQL 저장 프로시저에 목록 전달 <> (0) | 2023.08.22 |
|---|---|
| jQuery AJAX 요청의 상대 URL 대 절대 URL (0) | 2023.08.22 |
| PowerShell cmdlet을 작성할 때 경로를 처리하는 방법은 무엇입니까? (0) | 2023.08.22 |
| 이전에 Ajax 사용데이터를 수정하려면 전송 (0) | 2023.08.22 |
| jQuery .ajax() - POST 요청에 쿼리 매개 변수를 추가하시겠습니까? (0) | 2023.08.22 |