クエリ文字列パラメーターを追加または更新するにはどうすればよいですか?


364

JavaScriptを使用して、存在しない場合、または存在する場合、現在の値を更新するために、クエリ文字列パラメーターをURLにどのように追加できますか?クライアント側の開発にjqueryを使用しています。


1
「parseQueryString」関数をJavaScriptで約100回書いたようです。それは厳しくない。キーポイントは、String#split最大分割の2番目のパラメーターを取ります。jQuery mapも役立ちます。
jpsimons

このSO投稿にも多くのソリューションが含まれています。stackoverflow.com
questions/1090948/

1
この質問を「アドレスバーのURLを変更する方法」や「URL変数を変更する方法」を意味する人もいます
PandaWood

回答:


468

私が達成したいことを達成する次の関数を書きました:

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}

36
URIにハッシュがある場合、この回答は機能しません。クエリ文字列はハッシュの前に配置する必要があります。そうしないと、サーバーに送信されません。jsfiddle.net/4yXzR
グレッグ、

20
[?|&]する必要があります[?&]
焼酎

8
varセパレーター宣言の直前に追加して、セパレーター変数のスコープをローカル関数に制限します 。
Andrea Salicetti、

3
value = encodeURIComponent(value);最初の行を追加する必要があると思います。そうしないと、改行が正しくエスケープされません。
Felix

18
これは、同様に、ハッシュの世話をする:gist.github.com/niyazpk/f8ac616f181f6042d1e0を
Niyaz

189

私はソリューションを拡張し、ユーザー入力に基づいてクエリ文字列パラメーターを置き換え/更新/削除し、URLアンカーを考慮に入れることを見つけたソリューションと組み合わせました。

値を指定しないとパラメーターが削除され、値を指定するとパラメーターが追加/更新されます。URLが指定されていない場合は、window.locationから取得されます

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;
        }
    }
}

更新

クエリ文字列の最初のパラメーターを削除するときにバグがありました。修正を含めるために正規表現とテストをやり直しました。

2回目の更新

@JarónBarendsによって提案されたように-未定義およびnullに対してチェックするための値チェックを微調整して、0値を設定できるようにします。

3回目の更新

ハッシュタグの直前にクエリ文字列変数を削除すると、修正されたハッシュタグシンボルが失われるバグがありました。

4回目の更新

最初のRegExpオブジェクトで正規表現の最適化を指摘してくれた@roobyに感謝します。@YonatanKarniによって検出された(\?|&)の使用に関する問題のため、初期正規表現を([?&])に設定します

5回目の更新

if / elseステートメントでのハッシュ変数の宣言の削除


5
ただの「truthiness」をチェックするとvalue、あなたが0にその値を設定する場合、これはクエリ文字列から変数を削除する原因となりますので、代わりにif (value) {}あなたが使用する必要がありますif (typeOf value !== 'undefined' && value !== null) {}
ジャロンBarends


元のソリューションからどのように引き継がれたのかおかしい-(\?|&)も使用できる
ellemayo

1
クロムバージョン31.0.1650.63の正規表現作成で「無効な通常の例外/無効なグループ」の例外が発生します。先頭を「([?&])」に戻すことで解決
Yonatan Karni

1
私がOCDであることを除いて、これは重要ではありませんが、変数hashは2回宣言されます;)
wlingke '30

117

URLSearchParamsのユーティリティは、との組み合わせで、このために役立ちますwindow.location.search。例えば:

if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search);
    searchParams.set("foo", "bar");
    window.location.search = searchParams.toString();
}

fooに設定されていますbarにかかわらず、それが既に存在しているか否かの。

ただし、上記の割り当てでwindow.location.searchはページの読み込みが発生するため、それが望ましくない場合は、次のようにHistory APIを使用します。

if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search)
    searchParams.set("foo", "bar");
    var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
    history.pushState(null, '', newRelativePathQuery);
}

これで、クエリ文字列の存在を処理するために独自の正規表現やロジックを記述する必要がなくなりました。

ただし、現在のところ実験的なものであり、Chrome、Firefox、Safari、iOS Safari、Androidブラウザー、Android Chrome、Operaの最新バージョンでのみ使用されているためブラウザーのサポートは不十分です。使用する場合は、ポリフィルと一緒に使用してください。

更新:元の回答以降、ブラウザーのサポートが改善されました。


polly fillは良くありません、 Unable to set property '__URLSearchParams__:0.8503766759030615' of undefined or null reference ie11でそのエラーが発生します。フォールバックとして機能しない場合、それはpollyfillではありません。
2017

6
2019年の更新:IEと一部の小さなモバイルブラウザーを除くほとんどのブラウザーでブラウザーサポートが良好になりました。ungapの新しいpollyfillは簡単にそれをカバーします:github.com/ungap/url-search-params
Flion

完璧な答えですが、URLにハッシュタグが存在する場合はユースケースを処理しません。末尾にハッシュを追加するだけで簡単にできますnewRelativePathQueryvar newRelativePathQuery = window.location.pathname + '?' + searchParams.toString() + window.location.hash;
kudlohlavec

43

@amateurの回答(および@j_walker_devコメントからの修正を組み込む)に基づいていますが、URLのハッシュタグに関するコメントを考慮に入れて、以下を使用します。

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  } else {
    var hash =  '';
    if( uri.indexOf('#') !== -1 ){
        hash = uri.replace(/.*#/, '#');
        uri = uri.replace(/#.*/, '');
    }
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";    
    return uri + separator + key + "=" + value + hash;
  }
}

[?|&]正規表現で修正するために編集[?&]されました。もちろんコメントで指摘されているとおりです。

編集:URLパラメータの削除もサポートする代替バージョン。value === undefined削除を示す方法として使用しました。value === false必要に応じて、または別の入力パラメーターを使用することもできます。

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
  if( value === undefined ) {
    if (uri.match(re)) {
        return uri.replace(re, '$1$2');
    } else {
        return uri;
    }
  } else {
    if (uri.match(re)) {
        return uri.replace(re, '$1' + key + "=" + value + '$2');
    } else {
    var hash =  '';
    if( uri.indexOf('#') !== -1 ){
        hash = uri.replace(/.*#/, '#');
        uri = uri.replace(/#.*/, '');
    }
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";    
    return uri + separator + key + "=" + value + hash;
  }
  }  
}

https://jsfiddle.net/bp3tmuxh/1/で実際の動作を確認してください


2
ずっときれい。「?」を持つことができる角度付きui-routerユーザー向けの参考情報 ハッシュでも。var separator行をリターンの真上に移動すると、「/ app#/ cool?fun = true」のバグが修正されます。これは、実際のクエリ文字列パラメータがまだない場合でも、セパレータとして「&」を選択します。クライアントのもののみ。
j_walker_dev

3
他の回答のコメントで指摘されているように、そうでなければなり[?|&]ません[?&](そうでなければ一致します|)。
2016年

1
うん、"([?|&])"良くない。これをいずれかとして修正してください(var re = new RegExp("(?|&)" + key + "=.*?(&|#|$)", "i");またはvar re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");他の方法で優れた拡張機能です)
YakovL

var re = new RegExp("(?|&)" + key + "=.*?(&|#|$)", "i");
はい

このバージョンは、値を省略してクエリ文字列パラメーターを削除することをサポートしていないようです。私は正しいですか?
jkupczak 2017年


12

この質問は古く、答えは死にましたが、ここに私の突き刺しがあります。現在受け入れられている回答を使用していて、URLフラグメントの不適切な処理が最近プロジェクトに噛み付いたため、ここでホイールを再発明しようとしています。

機能は以下の通りです。それはかなり長いですが、それは可能な限り弾力性があるように作られました。私はそれを短縮/改善するための提案が大好きです。小さなjsFiddleテストスイート(または他の同様の関数)をまとめました。関数がそこにあるすべてのテストにパスできる場合、私はおそらくそれで良いと言います。

更新:DOMを使用してURLを解析するための優れた関数を見つけたので、その手法をここに組み込みました。それは機能をより短くそしてより信頼できるようにします。その関数の作者への小道具。

/**
 * Add or update a query string parameter. If no URI is given, we use the current
 * window.location.href value for the URI.
 * 
 * Based on the DOM URL parser described here:
 * http://james.padolsey.com/javascript/parsing-urls-with-the-dom/
 *
 * @param   (string)    uri     Optional: The URI to add or update a parameter in
 * @param   (string)    key     The key to add or update
 * @param   (string)    value   The new value to set for key
 *
 * Tested on Chrome 34, Firefox 29, IE 7 and 11
 */
function update_query_string( uri, key, value ) {

    // Use window URL if no query string is provided
    if ( ! uri ) { uri = window.location.href; }

    // Create a dummy element to parse the URI with
    var a = document.createElement( 'a' ), 

        // match the key, optional square brackets, an equals sign or end of string, the optional value
        reg_ex = new RegExp( key + '((?:\\[[^\\]]*\\])?)(=|$)(.*)' ),

        // Setup some additional variables
        qs,
        qs_len,
        key_found = false;

    // Use the JS API to parse the URI 
    a.href = uri;

    // If the URI doesn't have a query string, add it and return
    if ( ! a.search ) {

        a.search = '?' + key + '=' + value;

        return a.href;
    }

    // Split the query string by ampersands
    qs = a.search.replace( /^\?/, '' ).split( /&(?:amp;)?/ );
    qs_len = qs.length; 

    // Loop through each query string part
    while ( qs_len > 0 ) {

        qs_len--;

        // Remove empty elements to prevent double ampersands
        if ( ! qs[qs_len] ) { qs.splice(qs_len, 1); continue; }

        // Check if the current part matches our key
        if ( reg_ex.test( qs[qs_len] ) ) {

            // Replace the current value
            qs[qs_len] = qs[qs_len].replace( reg_ex, key + '$1' ) + '=' + value;

            key_found = true;
        }
    }   

    // If we haven't replaced any occurrences above, add the new parameter and value
    if ( ! key_found ) { qs.push( key + '=' + value ); }

    // Set the new query string
    a.search = '?' + qs.join( '&' );

    return a.href;
}

2
これは本当に良い、確かなテストケースに見えます+ DOMをURLパーサーとして使用しています。:私はかかわらず、2例を見つけたexample.com/?param=val& => example.com/?param=val&&new=key --double&とexample.com/team => example.com/team?new=key予想します: team /?new = keyは/ team?new = keyを/ team /にリダイレクトし、クエリは失われます。
Timar Ivo Batis 2018

1
失敗したテストケースをありがとう。バイオリンを更新しました。その最初のものは難しいです。そのための機能を修正する方法に関するアイデアはありますか?2番目は問題なく処理され、テストスイートですでにカバーされています。多分私はあなたを理解していません。テストのフィドルをフォークして、表示されている内容をデモンストレーションしてください。
ドミニクP

私が遭遇したテストケースと回避策をいくつか追加しました。できる限りDOMを使ってみました。主に、同じドメイン内の相対リンクでも機能するためにこれが必要でした。jsfiddle.net/Timar/7sjrhbm3
Ivo

1
@braedブラウザに大きな負担がかかるため、このアプローチが気に入っています。ここの多くの回答からわかるように、この問題は見かけほど単純ではありません。ソリューションがカバーする必要のあるコーナーケースがたくさんあります。それらのほとんどは、DOMを活用すると無料でカバーされます。
ドミニクP

1
@braedは、回答でリンクしたテストスイートを確認してください。ここに記載されているすべてのエッジケースを考慮していないため、DOMに依存しない多くのソリューションは失敗します。読書に関しては、node.jsのURLモジュールを見ると参考になるかもしれません。これは直接の関連はありませんが、URL文字列に関連するいくつかの複雑さを理解するのに役立ちます。
ドミニクP

11

window.location.searchは読み取り/書き込み可能です。

ただし、クエリ文字列を変更すると、現在のページがリダイレクトされ、サーバーから更新されます。

実行しようとしているのがクライアント側の状態を維持する(そしてブックマーク可能にする)場合は、クエリ文字列ではなくURLハッシュを変更して、同じページ(window.location。ハッシュは読み取り/書き込みです)。これは、twitter.comなどのWebサイトがこれを行う方法です。

また、戻るボタンを機能させたい場合は、JavaScriptイベントをハッシュ変更イベントにバインドする必要があります。これに適したプラグインは、http://benalman.com/projects/jquery-hashchange-plugin/です。


4
Twitterはハッシュを変更しなくなりました!ハッシュは死んでいますHistory APIを歓迎します
アルバメンデス

それは死からほど遠いです。レガシーブラウザの互換性が問題にならない魔法の夢の国に住んでいると思います。これはあなたに当てはまるかもしれませんが、私たちの残りの人(または実際には私たちの大多数)の場合は確かにそうではありません。たぶん死ぬ方が適切でしょう...
AaronHS 2015年

1
1年後、それをサポートしていない最近の唯一のブラウザーはIE 9であるように見えます
Douglas.Sesar

11

設定されていない場合、または新しい値で更新したい場合は、以下を使用できます。

window.location.search = 'param=value'; // or param=new_value

ちなみに、これは単純なJavascriptです。

編集

jquery クエリオブジェクトプラグインを使用してみてください

window.location.search = jQuery.query.set( "param"、5);


1
ただし、URLの他のクエリ文字列パラメータは維持されません。
アマチュア

あなたは正しい、私はお詫び申し上げます。更新として、私は私の答えに別のオプションを追加しました:)
tradyblix

値をリセットしないため、これは機能していません。「追加または更新」
Paolo Falomo '10

9

これが私のアプローチです: location.params()関数(以下に表示)は、ゲッターまたはセッターとして使用できます。例:

URLがのhttp://example.com/?foo=bar&baz#some-hash場合、

  1. location.params()すべてのクエリパラメータを持つオブジェクトを返します:{foo: 'bar', baz: true}
  2. location.params('foo') 戻ります 'bar'ます。
  3. location.params({foo: undefined, hello: 'world', test: true})URLをに変更しますhttp://example.com/?baz&hello=world&test#some-hash

ここでparams()任意に割り当てることができる機能、window.locationオブジェクトが。

location.params = function(params) {
  var obj = {}, i, parts, len, key, value;

  if (typeof params === 'string') {
    value = location.search.match(new RegExp('[?&]' + params + '=?([^&]*)[&#$]?'));
    return value ? value[1] : undefined;
  }

  var _params = location.search.substr(1).split('&');

  for (i = 0, len = _params.length; i < len; i++) {
    parts = _params[i].split('=');
    if (! parts[0]) {continue;}
    obj[parts[0]] = parts[1] || true;
  }

  if (typeof params !== 'object') {return obj;}

  for (key in params) {
    value = params[key];
    if (typeof value === 'undefined') {
      delete obj[key];
    } else {
      obj[key] = value;
    }
  }

  parts = [];
  for (key in obj) {
    parts.push(key + (obj[key] === true ? '' : '=' + obj[key]));
  }

  location.search = parts.join('&');
};

6

これは私の好みであり、私が考えることができるケースをカバーしています。誰かがそれを単一の置き換えに減らす方法を考えることができますか?

function setParam(uri, key, val) {
    return uri
        .replace(RegExp("([?&]"+key+"(?=[=&#]|$)[^#&]*|(?=#|$))"), "&"+key+"="+encodeURIComponent(val))
        .replace(/^([^?&]+)&/, "$1?");
}

また、Dominic Pによるかなりの数のテストケースで失敗しましたstackoverflow.com/a/23529943/8385841
Timar Ivo Batis 2018

5

私はこれがかなり古いことを知っていますが、ここで作業バージョンを起動したいと思います。

function addOrUpdateUrlParam(uri, paramKey, paramVal) {
  var re = new RegExp("([?&])" + paramKey + "=[^&#]*", "i");
  if (re.test(uri)) {
    uri = uri.replace(re, '$1' + paramKey + "=" + paramVal);
  } else {
    var separator = /\?/.test(uri) ? "&" : "?";
    uri = uri + separator + paramKey + "=" + paramVal;
  }
  return uri;
}

jQuery(document).ready(function($) {
  $('#paramKey,#paramValue').on('change', function() {
    if ($('#paramKey').val() != "" && $('#paramValue').val() != "") {
      $('#uri').val(addOrUpdateUrlParam($('#uri').val(), $('#paramKey').val(), $('#paramValue').val()));
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="width:100%" type="text" id="uri" value="http://www.example.com/text.php">
<label style="display:block;">paramKey
  <input type="text" id="paramKey">
</label>
<label style="display:block;">paramValue
  <input type="text" id="paramValue">
</label>

これは@elreimundoの変更バージョンです


1
Dominic PのjsFiddleでテスト:FAIL :: example.com?:: example.com/?¶m=new予想:example.com/? param=new FAIL :: example.com/?param :: example.com/?param¶m=new予想:example.com/? param=new FAIL :: example.com/?param=&param2 :: example.com/?param=new&param2 Expected:example.com/? param=new¶m2 FAIL :: example.com/?param2=val¶m[]=val: :example.com/
param2

2

ここからの私の見解(「use strict」と互換性があります。実際にはjQueryを使用していません):

function decodeURIParams(query) {
  if (query == null)
    query = window.location.search;
  if (query[0] == '?')
    query = query.substring(1);

  var params = query.split('&');
  var result = {};
  for (var i = 0; i < params.length; i++) {
    var param = params[i];
    var pos = param.indexOf('=');
    if (pos >= 0) {
        var key = decodeURIComponent(param.substring(0, pos));
        var val = decodeURIComponent(param.substring(pos + 1));
        result[key] = val;
    } else {
        var key = decodeURIComponent(param);
        result[key] = true;
    }
  }
  return result;
}

function encodeURIParams(params, addQuestionMark) {
  var pairs = [];
  for (var key in params) if (params.hasOwnProperty(key)) {
    var value = params[key];
    if (value != null) /* matches null and undefined */ {
      pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))
    }
  }
  if (pairs.length == 0)
    return '';
  return (addQuestionMark ? '?' : '') + pairs.join('&');
}

//// alternative to $.extend if not using jQuery:
// function mergeObjects(destination, source) {
//   for (var key in source) if (source.hasOwnProperty(key)) {
//     destination[key] = source[key];
//   }
//   return destination;
// }

function navigateWithURIParams(newParams) {
  window.location.search = encodeURIParams($.extend(decodeURIParams(), newParams), true);
}

使用例:

// add/update parameters
navigateWithURIParams({ foo: 'bar', boz: 42 });

// remove parameter
navigateWithURIParams({ foo: null });

// submit the given form by adding/replacing URI parameters (with jQuery)
$('.filter-form').submit(function(e) {
  e.preventDefault();
  navigateWithURIParams(decodeURIParams($(this).serialize()));
});

2

@ellemayoの回答に基づいて、必要に応じてハッシュタグを無効にできる次のソリューションを思いつきました。

function updateQueryString(key, value, options) {
    if (!options) options = {};

    var url = options.url || location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"), hash;

    hash = url.split('#');
    url = hash[0];
    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null) {
            url = url.replace(re, '$1' + key + "=" + value + '$2$3');
        } else {
            url = url.replace(re, '$1$3').replace(/(&|\?)$/, '');
        }
    } else if (typeof value !== 'undefined' && value !== null) {
        var separator = url.indexOf('?') !== -1 ? '&' : '?';
        url = url + separator + key + '=' + value;
    }

    if ((typeof options.hash === 'undefined' || options.hash) &&
        typeof hash[1] !== 'undefined' && hash[1] !== null)
        url += '#' + hash[1];
    return url;
}

次のように呼び出します。

updateQueryString('foo', 'bar', {
    url: 'http://my.example.com#hash',
    hash: false
});

結果:

http://my.example.com?foo=bar

文体の不可解さ:typeof value !== 'undefined' && value !== nullより明確ですがvalue != null、同じことを意味し、より簡潔です。
エププシロン2018年

2

これは、処理する短いバージョンです

  • 特定のパラメータの有無にかかわらずクエリ
  • 複数のパラメータ値を持つクエリ
  • ハッシュを含むクエリ

コード:

var setQueryParameter = function(uri, key, value) {
  var re = new RegExp("([?&])("+ key + "=)[^&#]*", "g");
  if (uri.match(re)) 
    return uri.replace(re, '$1$2' + value);

  // need to add parameter to URI
  var paramString = (uri.indexOf('?') < 0 ? "?" : "&") + key + "=" + value;
  var hashIndex = uri.indexOf('#');
  if (hashIndex < 0)
    return uri + paramString;
  else
    return uri.substring(0, hashIndex) + paramString + uri.substring(hashIndex);
}

正規表現の記述を見つけることができるここに

:このソリューションは@amateurの回答に基づいていますが、多くの改善点があります。


2

ES6とjQueryを使用して、パラメーターのリストを既存のURLに追加するコード:

class UrlBuilder {
    static appendParametersToUrl(baseUrl, listOfParams) {

        if (jQuery.isEmptyObject(listOfParams)) {
            return baseUrl;
        }

        const newParams = jQuery.param(listOfParams);

        let partsWithHash = baseUrl.split('#');
        let partsWithParams = partsWithHash[0].split('?');

        let previousParams = '?' + ((partsWithParams.length === 2) ? partsWithParams[1] + '&' : '');
        let previousHash = (partsWithHash.length === 2) ? '#' + partsWithHash[1] : '';

        return partsWithParams[0] + previousParams + newParams + previousHash;
    }
}

listOfParamsは次のようになります

const listOfParams = {
    'name_1': 'value_1',
    'name_2': 'value_2',
    'name_N': 'value_N',
};

使用例:

    UrlBuilder.appendParametersToUrl(urlBase, listOfParams);

高速テスト:

    url = 'http://hello.world';
    console.log('=> ', UrlParameters.appendParametersToUrl(url, null));
    // Output:  http://hello.world

    url = 'http://hello.world#h1';
    console.log('=> ', UrlParameters.appendParametersToUrl(url, null));
    // Output:  http://hello.world#h1

    url = 'http://hello.world';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
    // Output: http://hello.world?p1=v1&p2=v2

    url = 'http://hello.world?p0=v0';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
    // Output: http://hello.world?p0=v0&p1=v1&p2=v2

    url = 'http://hello.world#h1';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
   // Output: http://hello.world?p1=v1&p2=v2#h1

    url = 'http://hello.world?p0=v0#h1';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
    // Output: http://hello.world?p0=v0&p1=v1&p2=v2#h1

1

正規表現を使用しない別のアプローチ。URLの末尾にある「ハッシュ」アンカーと複数の疑問符(?)をサポートします。正規表現のアプローチよりもわずかに速いはずです。

function setUrlParameter(url, key, value) {
  var parts = url.split("#", 2), anchor = parts.length > 1 ? "#" + parts[1] : '';
  var query = (url = parts[0]).split("?", 2);
  if (query.length === 1) 
    return url + "?" + key + "=" + value + anchor;

  for (var params = query[query.length - 1].split("&"), i = 0; i < params.length; i++)
    if (params[i].toLowerCase().startsWith(key.toLowerCase() + "="))
      return params[i] = key + "=" + value, query[query.length - 1] = params.join("&"), query.join("?") + anchor;

  return url + "&" + key + "=" + value + anchor
}

1

この関数を使用して、jqueryに基づいてURLからクエリ文字列パラメーターを追加、削除、変更します

/**
@param String url
@param object param {key: value} query parameter
*/
function modifyURLQuery(url, param){
    var value = {};

    var query = String(url).split('?');

    if (query[1]) {
        var part = query[1].split('&');

        for (i = 0; i < part.length; i++) {
            var data = part[i].split('=');

            if (data[0] && data[1]) {
                value[data[0]] = data[1];
            }
        }
    }

    value = $.extend(value, param);

    // Remove empty value
    for (i in value){
        if(!value[i]){
            delete value[i];
        }
    }

    // Return url with modified parameter
    if(value){
        return query[0] + '?' + $.param(value);
    } else {
        return query[0];
    }
}

新規に追加し、既存のパラメーターをURLに変更

var new_url = modifyURLQuery("http://google.com?foo=34", {foo: 50, bar: 45});
// Result: http://google.com?foo=50&bar=45

既存のものを削除

var new_url = modifyURLQuery("http://google.com?foo=50&bar=45", {bar: null});
// Result: http://google.com?foo=50

1

使用jQueryすることで以下のようにできます

var query_object = $.query_string;
query_object["KEY"] = "VALUE";
var new_url = window.location.pathname + '?'+$.param(query_object)

変数内 new_urlには、新しいクエリパラメータがあります。

リファレンス:http : //api.jquery.com/jquery.param/


0

window.location.searchGalとtradyblixによって提案された変更のコード例を示すには、次のようにします。

var qs = window.location.search || "?";
var param = key + "=" + value; // remember to URI encode your parameters
if (qs.length > 1) {
    // more than just the question mark, so append with ampersand
    qs = qs + "&";
}
qs = qs + param;
window.location.search = qs;

0

特定のクエリ文字列を見つけてその値を置き換えるJavaスクリプトコード*

('input.letter').click(function () {
                //0- prepare values
                var qsTargeted = 'letter=' + this.value; //"letter=A";
                var windowUrl = '';
                var qskey = qsTargeted.split('=')[0];
                var qsvalue = qsTargeted.split('=')[1];
                //1- get row url
                var originalURL = window.location.href;
                //2- get query string part, and url
                if (originalURL.split('?').length > 1) //qs is exists
                {
                    windowUrl = originalURL.split('?')[0];
                    var qs = originalURL.split('?')[1];
                    //3- get list of query strings
                    var qsArray = qs.split('&');
                    var flag = false;
                    //4- try to find query string key
                    for (var i = 0; i < qsArray.length; i++) {
                        if (qsArray[i].split('=').length > 0) {
                            if (qskey == qsArray[i].split('=')[0]) {
                                //exists key
                                qsArray[i] = qskey + '=' + qsvalue;
                                flag = true;
                                break;
                            }
                        }
                    }
                    if (!flag)//   //5- if exists modify,else add
                    {
                        qsArray.push(qsTargeted);
                    }
                    var finalQs = qsArray.join('&');
                    //6- prepare final url
                    window.location = windowUrl + '?' + finalQs;
                }
                else {
                    //6- prepare final url
                    //add query string
                    window.location = originalURL + '?' + qsTargeted;
                }
            })
        });

0

ええ、クエリ文字列がオーバーフローして重複するという問題がありましたが、これは私自身の遅さが原因でした。だから少し遊んでjs jquery(実際にはsizzle)とC#magickを作りました。

だから私はサーバーが渡された値を処理した後、値はもう問題ではなく、クライアントが同じことをしたいのであれば明らかに再利用はないことに気づきました同じパラメーターが渡されます。そして、それはすべてクライアントサイドなので、いくつかのキャッシング/クッキーなどはその点でクールかもしれません。

JS:

$(document).ready(function () {
            $('#ser').click(function () {
                SerializeIT();
            });
            function SerializeIT() {
                var baseUrl = "";
                baseUrl = getBaseUrlFromBrowserUrl(window.location.toString());
                var myQueryString = "";
                funkyMethodChangingStuff(); //whatever else before serializing and creating the querystring
                myQueryString = $('#fr2').serialize();
                window.location.replace(baseUrl + "?" + myQueryString);
            }
            function getBaseUrlFromBrowserUrl(szurl) {
                return szurl.split("?")[0];
            } 
            function funkyMethodChangingStuff(){
               //do stuff to whatever is in fr2
            }
        });

HTML:

<div id="fr2">
   <input type="text" name="qURL" value="http://somewhere.com" />
   <input type="text" name="qSPart" value="someSearchPattern" />
</div>
<button id="ser">Serialize! and go play with the server.</button>

C#:

    using System.Web;
    using System.Text;
    using System.Collections.Specialized;

    public partial class SomeCoolWebApp : System.Web.UI.Page
    {
        string weburl = string.Empty;
        string partName = string.Empty;

        protected void Page_Load(object sender, EventArgs e)
        {
            string loadurl = HttpContext.Current.Request.RawUrl;
            string querySZ = null;
            int isQuery = loadurl.IndexOf('?');
            if (isQuery == -1) { 
                //If There Was no Query
            }
            else if (isQuery >= 1) {
                querySZ = (isQuery < loadurl.Length - 1) ? loadurl.Substring(isQuery + 1) : string.Empty;
                string[] getSingleQuery = querySZ.Split('?');
                querySZ = getSingleQuery[0];

                NameValueCollection qs = null;
                qs = HttpUtility.ParseQueryString(querySZ);

                weburl = qs["qURL"];
                partName = qs["qSPart"];
                //call some great method thisPageRocks(weburl,partName); or whatever.
          }
      }
  }

大丈夫な批判は歓迎されます(これは毎晩の調合でしたので、調整に気を付けてください)。これで効果がある場合は、親指を立てて、ハッピーコーディングを。

重複はなく、各リクエストは変更したときに一意であり、これがどのように構造化されているかにより、DOMから動的にクエリを簡単に追加できます。


0

次に、アンカーHTML要素の組み込みプロパティを使用する別の方法を示します。

  • 多値パラメーターを処理します。
  • #フラグメント、またはクエリ文字列以外のものを変更するリスクはありません。
  • 少し読みやすいかもしれませんか?しかし、それはより長いです。

    var a = document.createElement('a'),

	getHrefWithUpdatedQueryString = function(param, value) {
	    return updatedQueryString(window.location.href, param, value);
	},

	updatedQueryString = function(url, param, value) {
	    /*
	     A function which modifies the query string 
             by setting one parameter to a single value.

	     Any other instances of parameter will be removed/replaced.
	     */
	    var fragment = encodeURIComponent(param) + 
                           '=' + encodeURIComponent(value);

	    a.href = url;

	    if (a.search.length === 0) {
		a.search = '?' + fragment;
	    } else {
		var didReplace = false,
		    // Remove leading '?'
		    parts = a.search.substring(1)
		// Break into pieces
			.split('&'),

		    reassemble = [],
		    len = parts.length;

		for (var i = 0; i < len; i++) {
		    
		    var pieces = parts[i].split('=');
		    if (pieces[0] === param) {
			if (!didReplace) {
			    reassemble.push('&' + fragment);
			    didReplace = true;
			}
		    } else {
			reassemble.push(parts[i]);
		    }
		}

		if (!didReplace) {
		    reassemble.push('&' + fragment);
		}

		a.search = reassemble.join('&');
	    }

	    return a.href;
	};


0

複数のパラメータを一度に設定したい場合:

function updateQueryStringParameters(uri, params) {
    for(key in params){
      var value = params[key],
          re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"),
          separator = uri.indexOf('?') !== -1 ? "&" : "?";
      if (uri.match(re)) {
        uri = uri.replace(re, '$1' + key + "=" + value + '$2');
      }
      else {
        uri = uri + separator + key + "=" + value;
      }
    }
    return uri;
}

@amateurと同じ機能

jslintがエラーを返す場合は、forループの後にこれを追加します

if(params.hasOwnProperty(key))

ハッシュ、または値(http://abc.def/?a&b&c)が割り当てられていないパラメーターを処理しません。
Adam Leggett 2016

0

このページには、厄介で不必要に複雑な答えがたくさんあります。最高評価の@ amateur'sは非常に優れていますが、RegExpには不要な綿毛が少しあります。以下は、RegExpがよりクリーンで、replace呼び出しがよりクリーンな、より最適なソリューションです。

function updateQueryStringParamsNoHash(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=[^&]*", "i");
  return re.test(uri)
       ? uri.replace(re, '$1' + key + "=" + value)
       : uri + separator + key + "=" + value
  ;
}

追加のボーナスとして、uriが文字列でない場合、呼び出しを試行しmatchたりreplace、これらのメソッドを実装していない可能性のあるものに対してエラーが発生することはありません。

また、ハッシュのケースを処理したい場合(そして、適切にフォーマットされたHTMLのチェックをすでに行っている場合)、同じロジックを含む新しい関数を作成する代わりに、既存の関数を利用できます。

function updateQueryStringParams(url, key, value) {
    var splitURL = url.split('#');
    var hash = splitURL[1];
    var uri = updateQueryStringParamsNoHash(splitURL[0]);
    return hash == null ? uri : uri + '#' + hash;
}

または、@ Adamのその他の優れた答えにいくつかのわずかな変更を加えることができます。

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=[^&#]*", "i");
  if (re.test(uri)) {
    return uri.replace(re, '$1' + key + "=" + value);
  } else {
    var matchData = uri.match(/^([^#]*)(#.*)?$/);
    var separator = /\?/.test(uri) ? "&" : "?";    
    return matchData[0] + separator + key + "=" + value + (matchData[1] || '');
  }
}

2
これは最後の関数に欠落している括弧です:var matchData = uri.match(/^([^#]*)(#.*)?$/
Jammer

separatorで定義されていませんupdateQueryStringParamsNoHash。ではupdateQueryStringParameter、置き換えるパラメータに値が割り当てられていない場合(たとえばhttp://abc.def/?a&b&c)、すべてが機能しなくなります。
Adam Leggett

0

これは目的を果たすはずです:

function updateQueryString(url, key, value) {
    var arr =  url.split("#");
    var url = arr[0];
    var fragmentId = arr[1];
    var updatedQS = "";
    if (url.indexOf("?") == -1) {
        updatedQS = encodeURIComponent(key) + "=" + encodeURIComponent(value);
    }
    else {
        updatedQS = addOrModifyQS(url.substring(url.indexOf("?") + 1), key, value); 
    }
    url = url.substring(0, url.indexOf("?")) + "?" + updatedQS;
    if (typeof fragmentId !== 'undefined') {
        url = url + "#" + fragmentId;
    }
    return url;
}

function addOrModifyQS(queryStrings, key, value) {
    var oldQueryStrings = queryStrings.split("&");
    var newQueryStrings = new Array();
    var isNewKey = true;
    for (var i in oldQueryStrings) {
        var currItem = oldQueryStrings[i];
        var searchKey = key + "=";
        if (currItem.indexOf(searchKey) != -1) {
            currItem = encodeURIComponent(key) + "=" + encodeURIComponent(value);
            isNewKey = false;
        }
        newQueryStrings.push(currItem);
    }
    if (isNewKey) {
        newQueryStrings.push(encodeURIComponent(key) + "=" + encodeURIComponent(value));
    }
    return newQueryStrings.join("&");
}   
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.