JavaScript에서 쿼리 문자열 매개변수를 삭제하려면 어떻게 해야 합니까?
https://stackoverflow.com/questions/1634748
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
정규식을 사용하는 것 외에 표준 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에서 특별한 문자가 포함되어 있습니다. 그리고 그것은 글로벌 Regex가 아니므로 매개 변수의 하나의 인스턴스 만 제거합니다.
나는 이것을 위해 간단한 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;
}
다른 팁
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;
}
현대식 브라우저 제공하다 URLSearchParams 검색 매개 변수로 작업하는 인터페이스. 가지고 있습니다 delete 이름별로 param을 제거하는 메소드.
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`)
}Regex 솔루션의 주요 문제는 보이지 않습니다. 그러나 파편 식별자를 보존하는 것을 잊지 마십시오 (텍스트 후 텍스트 #).
내 솔루션은 다음과 같습니다.
function RemoveParameterFromUrl(url, parameter) {
return url
.replace(new RegExp('[?&]' + parameter + '=[^&#]*(#.*)?$'), '$1')
.replace(new RegExp('([?&])' + parameter + '=[^&]*&'), '$1');
}
그리고 Bobince의 시점에서 예 - 당신은 탈출해야합니다 . 매개 변수 이름의 문자.
Regex 솔루션에 관심이있는 사람은이 기능을 구성하여 쿼리 스트링 매개 변수를 추가/제거/업데이트했습니다. 값을 공급하지 않으면 매개 변수를 제거하면 매개 변수를 제공하면 매개 변수를 추가/업데이트합니다. 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;
}
}
업데이트
QueryString에서 첫 번째 매개 변수를 제거 할 때 버그가 있었는데, 수정 사항을 포함하도록 Regex와 테스트를 다시 작업했습니다.
업데이트 2
@schellmax 해시 태그 직전에 쿼리 스트링 변수를 제거 할 때 해시 태그 기호가 손실되는 상황을 수정하려는 업데이트
다음과 같이 URL을 변경할 수 있습니다.
window.history.pushState({}, document.title, window.location.pathname);
이렇게하면 검색 매개 변수없이 URL을 덮어 쓸 수 있습니다. Get 매개 변수를 가져간 후 URL을 정리하는 데 사용합니다.
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 Gist를 기반으로 매개 변수를 추가하고 제거하기위한 완전한 기능입니다.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 );
이 스레드에서 많은 사람들은 Regex가 아마도 최고/안정적인 솔루션이 아니라고 말했습니다. 따라서이 일에 약간의 결함이 있는지 100% 확신하지는 않지만 테스트 한 한 꽤 잘 작동합니다.
위의 버전은 함수입니다
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;
}
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;
}
당신은 라이브러리를 사용하여 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;
}
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 removeUrlParameter(url, paramKey)
{
var r = new URL(url);
r.searchParams.delete(paramKey);
return r.href;
}
urlsearchparams는 오래된 브라우저에서 지원되지 않습니다
https://caniuse.com/#feat=urlsearchparams
즉, Edge (17 미만) 및 Safari (10.3 미만)는 URL 클래스 내에서 URLSearchParams를 지원하지 않습니다.
폴리 필
urlsearchparams 만 폴리 필
https://github.com/webreflection/url-search-params
마지막 whatwg 사양에 맞는 완전한 polyfill url 및 urlsearchparams
jQuery에 있다면 좋은 쿼리 문자열 조작 플러그인이 있습니다.
function removeQueryStringParameter(uri, key, value)
{
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '');
}
}
