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で特殊な文字が含まれていると失敗します。また、グローバル正規表現ではないため、パラメーターのインスタンスを1つだけ削除します。
このために単純な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 検索パラメータを操作するためのインターフェイス。名前によってparamを削除する delete メソッドがあります。
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`)
}正規表現ソリューションに大きな問題は見当たりません。ただし、フラグメント識別子（#の後のテキスト）を保持することを忘れないでください。
私のソリューションは次のとおりです。
function RemoveParameterFromUrl(url, parameter) {
return url
.replace(new RegExp('[?&]' + parameter + '=[^&#]*(#.*)?$'), '$1')
.replace(new RegExp('([?&])' + parameter + '=[^&]*&'), '$1');
}
ボビンスのポイントに、はい-パラメーター名の.文字をエスケープする必要があります。
正規表現ソリューションに興味がある人は、クエリ文字列パラメーターを追加/削除/更新するためにこの関数をまとめました。値を指定しないとパラメーターが削除され、パラメーターを指定するとパラメーターが追加/更新されます。 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;
}
}
UPDATE
クエリ文字列の最初のパラメーターを削除するときにバグがありました。修正を含めるために正規表現とテストをやり直しました。
更新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(?=#))/, '');
}
この質問とこの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 );
このスレッドでは、多くの人が正規表現はおそらく最良/安定したソリューションではないと言っていました...そのため、このものに欠陥があるかどうか100％確信はありませんが、テストした限りではうまく機能します。
私が使用しているものは次のとおりです。
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
関数としての上記のバージョン
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の操作は、表面上は自分で行うよりも複雑なので、ライブラリを使用して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によるボビン）の適応です。
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 );
}
これはクリーンなバージョンremove query parameterwithURL classfor today browsers：
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