1. ホーム
  2. javascript

[解決済み] JavaScriptでURLにパラメータを追加する

2022-03-23 15:56:11

質問

AJAXコールを利用するWebアプリケーションで、リクエストを送信する際に、URLの末尾にパラメータを追加するなどの作業が必要です。

元のURLです。

<ブロッククオート

http://server/myapp.php?id=10

結果の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;
}