web-dev-qa-db-ja.com

jQueryによる既存のURLクエリ文字列値の更新

私が次のようなURLを持っているとしましょう：

http://www.example.com/hello.png?w=100&h=100&bg=white

私がしたいことは、wとhのクエリ文字列の値を更新することですが、bgのクエリ文字列はそのままにしておきます。次に例を示します。

http://www.example.com/hello.png?w=200&h=200&bg=white

したがって、クエリ文字列の値（そして、w、h、bgだけでなく、任意のクエリ文字列の値のセットでもかまいません）を読み取り、値の一部またはすべてを更新し、新しいURLで完全なURLを返す最も速い最も効率的な方法は何ですか？クエリ文字列？

そう：

  1. 各クエリ文字列キーの値を取得します
  2. 任意の数のキーを更新する
  3. 新しい値でURLを再構築します
  4. 更新されなかった他のすべての値を保持します
  5. 既知のキーの標準セットはありません。URLごとに変更される可能性があります
javascriptjqueryquery-string
19
adam

クエリ文字列の値を取得 way および $。param を使用してクエリ文字列を再構築

更新：

これは例です。 fiddle も確認してください：

  function getQueryVariable(url, variable) {
         var query = url.substring(1);
     var vars = query.split('&');
     for (var i=0; i<vars.length; i++) {
          var pair = vars[i].split('=');
          if (pair[0] == variable) {
            return pair[1];
          }
     }

     return false;
  }

  var url = 'http://www.example.com/hello.png?w=100&h=100&bg=white';
       
  var w = getQueryVariable(url, 'w');
  var h = getQueryVariable(url, 'h');
  var bg = getQueryVariable(url, 'bg');

  // http://www.example.com/hello.png?w=200&h=200&bg=white
  var params = { 'w':200, 'h':200, 'bg':bg };
  var new_url = 'http://www.example.com/hello.png?' + jQuery.param(params);

現在のURLを使用するように関数を変更できます。

  function getQueryVariable(variable) {
         var query = window.location.search.substring(1);
     var vars = query.split('&');
     for (var i=0; i<vars.length; i++) {
          var pair = vars[i].split('=');
          if (pair[0] == variable) {
            return pair[1];
          }
     }

     return false;
  }
15
dotoree

簡単な解決策

以下のようにRLSearchParams.set（）を使用できます。

var currentUrl = 'http://www.example.com/hello.png?w=100&h=100&bg=white';
var url = new URL(currentUrl);
url.searchParams.set("w", "200"); // setting your param
var newUrl = url.href; 
console.log(newUrl);

オンラインデモ（jsfiddle）

6
Ali Soltani
//update URL Parameter
function updateURL(key,val){
    var url = window.location.href;
    var reExp = new RegExp("[\?|\&]"+key + "=[0-9a-zA-Z\_\+\-\|\.\,\;]*");

    if(reExp.test(url)) {
        // update
        var reExp = new RegExp("[\?&]" + key + "=([^&#]*)");
        var delimiter = reExp.exec(url)[0].charAt(0);
        url = url.replace(reExp, delimiter + key + "=" + val);
    } else {
        // add
        var newParam = key + "=" + val;
        if(!url.indexOf('?')){url += '?';}

        if(url.indexOf('#') > -1){
            var urlparts = url.split('#');
            url = urlparts[0] +  "&" + newParam +  (urlparts[1] ?  "#" +urlparts[1] : '');
        } else {
            url += "&" + newParam;
        }
    }
    window.history.pushState(null, document.title, url);
}
3
hitchhikers

別の方法（jQueryまたは他のライブラリーに依存しない）： https://github.com/Mikhus/jsurl

var u = new Url;
// or
var u = new Url('/some/path?foo=baz');
alert(u);
u.query.foo = 'bar';
alert(u);
3
Mikhus

私はアリの答えが一番好きです。私はコードを関数にクリーンアップし、他の人の生活を楽にするためにそれを共有すると思いました。これが誰かを助けることを願っています。

function addParam(currentUrl,key,val) {
    var url = new URL(currentUrl);
    url.searchParams.set(key, val);
    return url.href; 
}
1
user1254723

私のURLは次のようになります： http：// localhost/dentistryindia/admin/hospital/add_procedure？hid = 241＆hpr_id = 12

var reExp = /hpr_id=\\d+/;
var url = window.location.href;
url = url.toString(); 
var hrpid = $("#category :selected").val(); //new value to replace hpr_id
var reExp = new RegExp("[\\?&]" + 'hpr_id' + "=([^&#]*)"),
delimeter = reExp.exec(url)[0].charAt(0),
newUrl = url.replace(reExp, delimeter + 'hpr_id' + "=" + hrpid);
window.location.href = newUrl;

これは私にとってそれがどのように機能したかです。

0
chandoo

あなたはこのようなことをすることができます：

// If key exists updates the value
if (location.href.indexOf('key=') > -1) {
    location.href = location.href.replace('key=current_val', 'key=new_val');

// If not, append
} else {
     location.href = location.href + '&key=new_val';
}

よろしく

0
Nicolas Finelli

これを行う別の方法として、Samuel Santosの簡単なreg exコードを使用します here このようにします：

/*
 * queryParameters -> handles the query string parameters
 * queryString -> the query string without the fist '?' character
 * re -> the regular expression
 * m -> holds the string matching the regular expression
 */
var queryParameters = {}, queryString = location.search.substring(1),
        re = /([^&=]+)=([^&]*)/g, m;

// Creates a map with the query string parameters
while (m = re.exec(queryString)) {
    queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}

// Update w and h
queryParameters['w'] = 200;
queryParameters['h'] = 200;

これで、新しいURLを作成できます。

var url = window.location.protocol + '//' + window.location.hostname + window.location.pathname;

// Build new Query String
var params = $.param(queryParameters);
if (params != '') {
    url = url + '?' + params;
}

または、paramsを使用して、ブラウザをすぐに再読み込みすることもできます。

location.search = params;

またはあなたがしたいことを何でもしてください:)

0
PanPipes

URI.jsは私にとって最善のアプローチのようです http://medialize.github.io/URI.js/

let uri = URI("http://test.com/foo.html").addQuery("a", "b");
// http://test.com/foo.html?a=b
uri.addQuery("c", 22);
// http://test.com/foo.html?a=b&c=22
uri.hash("h1");
// http://test.com/foo.html?a=b&c=22#h1
uri.hash("h2");
// http://test.com/foo.html?a=b&c=22#h2
0
vinnyjames