[解決済み] JavaScriptでURLにパラメータを追加する
2022-03-23 15:56:11
質問
AJAXコールを利用するWebアプリケーションで、リクエストを送信する際に、URLの末尾にパラメータを追加するなどの作業が必要です。
元のURLです。
<ブロッククオート結果のURL
<ブロッククオートhttp://server/myapp.php?id=10 &enabled=true
URLを解析して各パラメータを探し、新しいパラメータを追加するか、または既にパラメータが存在する場合は値を更新するJavaScript関数を探しています。
どのように解決するのですか?
基本的な実装は以下のようなものです。
function insertParam(key, value) {
key = encodeURIComponent(key);
value = encodeURIComponent(value);
// kvp looks like ['key1=value1', 'key2=value2', ...]
var kvp = document.location.search.substr(1).split('&');
let i=0;
for(; i<kvp.length; i++){
if (kvp[i].startsWith(key + '=')) {
let pair = kvp[i].split('=');
pair[1] = value;
kvp[i] = pair.join('=');
break;
}
}
if(i >= kvp.length){
kvp[kvp.length] = [key,value].join('=');
}
// can return this or...
let params = kvp.join('&');
// reload page with new params
document.location.search = params;
}
これは正規表現や検索ベースのソリューションのおよそ2倍の速度ですが、これはクエリ文字列の長さとマッチする部分のインデックスに完全に依存します。
補完のためにベンチマークした遅い正規表現方法(約+150%遅い)
function insertParam2(key,value)
{
key = encodeURIComponent(key); value = encodeURIComponent(value);
var s = document.location.search;
var kvp = key+"="+value;
var r = new RegExp("(&|\\?)"+key+"=[^\&]*");
s = s.replace(r,"$1"+kvp);
if(!RegExp.$1) {s += (s.length>0 ? '&' : '?') + kvp;};
//again, do what you will here
document.location.search = s;
}
関連
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] ブラウザによって異なるURLの最大長とは?
-
[解決済み] リモート Git リポジトリの URI (URL) を変更するには?
-
[解決済み] URI、URL、URNの違いは何ですか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptでクエリ文字列の値を取得するにはどうすればよいですか?
-
[解決済み] JavaScriptでURLをエンコードする?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
vueのグローバルがscss(mixin)を導入。
-
Vueのクラススタイルの使い方の詳細
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
[解決済み】React - TypeError: 未定義のプロパティ 'props' を読み取ることができない。
-
[解決済み] JavaScriptでURLをエンコードする?
-
[解決済み] クエリ文字列のパラメータを追加・更新する方法を教えてください。
-
[解決済み】GETリクエストで同じパラメータ名で複数の値を渡す場合の正しい方法
-
[解決済み】JavaScriptで画像の本当の幅と高さを取得する?(サファリ/クロームの場合)
-
[解決済み] URLに追記し、ページを更新する