webdevqa.jp.net

URLパラメータを変更する

私はこのURLを持っています:

site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc

必要なのは 'rows'のurlパラメータの値を私が指定したものに変更できるようにすることです。例えば、10としましょう。値はすでに指定しています(10)。

171
Sindre Sorhus

多くのことを学んだ後、4年後に私自身の質問に答えるために。特にあなたがすべてのためにjQueryを使うべきではないということ。私はクエリ文字列を解析/文字列化できる単純なモジュールを作成しました。これにより、クエリ文字列を簡単に変更できます。

次のように query-string を使うことができます。

// parse the query string into an object
var q = queryString.parse(location.search);
// set the `row` property
q.rows = 10;
// convert the object to a query string
// and overwrite the existing query string
location.search = queryString.stringify(q);
59
Sindre Sorhus

私はSujoyのコードを拡張して関数を作りました。

/**
 * http://stackoverflow.com/a/10997390/11236
 */
function updateURLParameter(url, param, paramVal){
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";
    if (additionalURL) {
        tempArray = additionalURL.split("&");
        for (var i=0; i<tempArray.length; i++){
            if(tempArray[i].split('=')[0] != param){
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }
    }

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}

関数呼び出し

var newURL = updateURLParameter(window.location.href, 'locId', 'newLoc');
newURL = updateURLParameter(newURL, 'resId', 'newResId');

window.history.replaceState('', '', updateURLParameter(window.location.href, "param", "value"));

URLのアンカーも処理するアップデート版。

function updateURLParameter(url, param, paramVal)
{
    var TheAnchor = null;
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";

    if (additionalURL) 
    {
        var tmpAnchor = additionalURL.split("#");
        var TheParams = tmpAnchor[0];
            TheAnchor = tmpAnchor[1];
        if(TheAnchor)
            additionalURL = TheParams;

        tempArray = additionalURL.split("&");

        for (var i=0; i<tempArray.length; i++)
        {
            if(tempArray[i].split('=')[0] != param)
            {
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }        
    }
    else
    {
        var tmpAnchor = baseURL.split("#");
        var TheParams = tmpAnchor[0];
            TheAnchor  = tmpAnchor[1];

        if(TheParams)
            baseURL = TheParams;
    }

    if(TheAnchor)
        paramVal += "#" + TheAnchor;

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}
99
Adil Malik

query plugin が欲しいと思います。

例えば。:

window.location.search = jQuery.query.set("rows", 10);

これは現在の行の状態に関係なく機能します。

89

Ben Almanは良いjqueryクエリ文字列/ URLプラグインを持っています ここ これでクエリ文字列を簡単に操作できます。

要求どおり -

彼のテストページに移動します ここ

Firebugでは、コンソールに次のように入力してください。

jQuery.param.querystring(window.location.href, 'a=3&newValue=100');

それはあなたに次の修正されたURL文字列を返します

http://benalman.com/code/test/js-jquery-url-querystring.html?a=3&b=Y&c=Z&newValue=100#n=1&o=2&p=

Aのクエリ文字列の値がXから3に変わり、新しい値が追加されていることに注目してください。

そうすれば、例えばdocument.location = newUrlを使用したり、アンカーリンクを変更したりするなどして、新しいURL文字列を使用できます。

62
redsquare

純粋なjsで素早く簡単な解決策、プラグインは不要:

function replaceQueryParam(param, newval, search) {
    var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
    var query = search.replace(regex, "$1").replace(/&$/, '');

    return (query.length > 2 ? query + "&" : "?") + (newval ? param + "=" + newval : '');
}

このようにそれを呼ぶ:

 window.location = '/mypage' + replaceQueryParam('rows', 55, window.location.search)

あるいは、同じページに留まり、複数のパラメータを置き換えたい場合は、次のようにします。

 var str = window.location.search
 str = replaceQueryParam('rows', 55, str)
 str = replaceQueryParam('cols', 'no', str)
 window.location = window.location.pathname + str

編集、ありがとうルーク:パラメータを完全に削除するには、値にfalseまたはnullを渡します:replaceQueryParam('rows', false, params)0これも偽造です なので、'0'を指定してください。

54
bronson

普通のJSでもできます

var url = document.URL
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var aditionalURL = tempArray[1]; 
var temp = "";
if(aditionalURL)
{
var tempArray = aditionalURL.split("&");
for ( var i in tempArray ){
    if(tempArray[i].indexOf("rows") == -1){
            newAdditionalURL += temp+tempArray[i];
                temp = "&";
            }
        }
}
var rows_txt = temp+"rows=10";
var finalURL = baseURL+"?"+newAdditionalURL+rows_txt;
27
Posto

これに対する最新のアプローチは、ネイティブ標準ベースの RLSearchParams を使用することです。ポリフィルであるIEを除くすべての主要ブラウザでサポートされています 利用可能

const paramsString = "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc"
const searchParams = new URLSearchParams(paramsString);
searchParams.set('rows', 10);
console.log(searchParams.toString()); // return modified string.
26
Alister

文字列操作に代わる有効な方法は、HTML formを設定し、rows要素の値を変更することだけですか?

htmlを使うと、それは次のようになります。

<form id='myForm' target='site.fwx'>
    <input type='hidden' name='position' value='1'/>
    <input type='hidden' name='archiveid' value='5000'/>
    <input type='hidden' name='columns' value='5'/>
    <input type='hidden' name='rows' value='20'/>
    <input type='hidden' name='sorting' value='ModifiedTimeAsc'/>
</form>

次のJavaScriptでフォームを送信する

var myForm = document.getElementById('myForm');
myForm.rows.value = yourNewValue;
myForm.submit();

おそらくすべての状況に適しているわけではありませんが、URL文字列を解析するよりも良いかもしれません。

10
Harry Lime

あなたは仕事をするためにこの私のライブラリを使用することができます。 https://github.com/Mikhus/jsurl

var url = new Url('site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc');
url.query.rows = 10;
alert( url);
6
Mikhus

これは、URLパラメータを変更するための最新の方法です。

function setGetParam(key,value) {
  if (history.pushState) {
    var params = new URLSearchParams(window.location.search);
    params.set(key, value);
    var newUrl = window.location.protocol + "//" + window.location.Host + window.location.pathname + '?' + params.toString();
    window.history.pushState({path:newUrl},'',newUrl);
  }
}
5
TjerkW

私はどんなselectでも動作する小さなヘルパー関数を書きました。あなたがする必要があるのは、任意のselect要素にクラス "redirectOnChange"を追加することだけです、そしてこれはselectのidと値に等しい、新しい/変更されたクエリ文字列パラメータでページをリロードさせるでしょう。

<select id="myValue" class="redirectOnChange"> 
    <option value="222">test222</option>
    <option value="333">test333</option>
</select>

上記の例では、 "?myValue = 222"または "?myValue = 333"を追加し(または他のパラメータが存在する場合は "&"を使用して)、ページをリロードします。

jQuery:

$(document).ready(function () {

    //Redirect on Change
    $(".redirectOnChange").change(function () {
        var href = window.location.href.substring(0, window.location.href.indexOf('?'));
        var qs = window.location.href.substring(window.location.href.indexOf('?') + 1, window.location.href.length);
        var newParam = $(this).attr("id") + '=' + $(this).val();

        if (qs.indexOf($(this).attr("id") + '=') == -1) {
            if (qs == '') {
                qs = '?'
            }
            else {
                qs = qs + '&'
            }
            qs = qs + newParam;

        }
        else {
            var start = qs.indexOf($(this).attr("id") + "=");
            var end = qs.indexOf("&", start);
            if (end == -1) {
                end = qs.length;
            }
            var curParam = qs.substring(start, end);
            qs = qs.replace(curParam, newParam);
        }
        window.location.replace(href + '?' + qs);
    });
});
3
Paul Grimshaw

ここで私はAdil Malikの答えを取り、私がそれで識別した3つの問題を修正しました。

/**
 * Adds or updates a URL parameter.
 *
 * @param {string} url  the URL to modify
 * @param {string} param  the name of the parameter
 * @param {string} paramVal  the new value for the parameter
 * @return {string}  the updated URL
 */
self.setParameter = function (url, param, paramVal){
  // http://stackoverflow.com/a/10997390/2391566
  var parts = url.split('?');
  var baseUrl = parts[0];
  var oldQueryString = parts[1];
  var newParameters = [];
  if (oldQueryString) {
    var oldParameters = oldQueryString.split('&');
    for (var i = 0; i < oldParameters.length; i++) {
      if(oldParameters[i].split('=')[0] != param) {
        newParameters.Push(oldParameters[i]);
      }
    }
  }
  if (paramVal !== '' && paramVal !== null && typeof paramVal !== 'undefined') {
    newParameters.Push(param + '=' + encodeURI(paramVal));
  }
  if (newParameters.length > 0) {
    return baseUrl + '?' + newParameters.join('&');
  } else {
    return baseUrl;
  }
}
2
Jonathan Aquino

私は同じものを探していて見つけました: https://github.com/medialize/URI.js これはかなりいいです:)

- アップデート

私はより良いパッケージを見つけました。 https://www.npmjs.org/package/qs それはまたget paramsの中の配列を扱います。

0
Chris

これが私のやり方です。私のeditParams()関数を使用して、任意のパラメータを追加、削除、または変更してから、組み込みのreplaceState()関数を使用してURLを更新できます。

window.history.replaceState('object or string', 'Title', 'page.html' + editParams('sorting', ModifiedTimeAsc));


// background functions below:

// add/change/remove URL parameter
// use a value of false to remove parameter
// returns a url-style string
function editParams (key, value) {
  key = encodeURI(key);

  var params = getSearchParameters();

  if (Object.keys(params).length === 0) {
    if (value !== false)
      return '?' + key + '=' + encodeURI(value);
    else
      return '';
  }

  if (value !== false)
    params[key] = encodeURI(value);
  else
    delete params[key];

  if (Object.keys(params).length === 0)
    return '';

  return '?' + $.map(params, function (value, key) {
    return key + '=' + value;
  }).join('&');
}

// Get object/associative array of URL parameters
function getSearchParameters () {
  var prmstr = window.location.search.substr(1);
  return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}

// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
  var params = {},
      prmarr = prmstr.split("&");

  for (var i = 0; i < prmarr.length; i++) {
    var tmparr = prmarr[i].split("=");
    params[tmparr[0]] = tmparr[1];
  }
  return params;
}
0
Bobb Fwed

私も JavaScriptでURLクエリパラメータを取得および設定するためのライブラリ を書きました。

これがその使用例です。

var url = Qurl.create()
  , query
  , foo
  ;

クエリのパラメータをオブジェクトとしてキーで取得するか、追加/変更/削除します。

// returns { foo: 'bar', baz: 'qux' } for ?foo=bar&baz=qux
query = url.query();

// get the current value of foo
foo = url.query('foo');

// set ?foo=bar&baz=qux
url.query('foo', 'bar');
url.query('baz', 'qux');

// unset foo, leaving ?baz=qux
url.query('foo', false); // unsets foo
0
rb-

Sujoyの答えに対する別のバリ​​エーション。変数名を変更し、ネームスペースラッパーを追加しただけです。

window.MyNamespace = window.MyNamespace  || {};
window.MyNamespace.Uri = window.MyNamespace.Uri || {};

(function (ns) {

    ns.SetQueryStringParameter = function(url, parameterName, parameterValue) {

        var otherQueryStringParameters = "";

        var urlParts = url.split("?");

        var baseUrl = urlParts[0];
        var queryString = urlParts[1];

        var itemSeparator = "";
        if (queryString) {

            var queryStringParts = queryString.split("&");

            for (var i = 0; i < queryStringParts.length; i++){

                if(queryStringParts[i].split('=')[0] != parameterName){

                    otherQueryStringParameters += itemSeparator + queryStringParts[i];
                    itemSeparator = "&";
                }
            }
        }

        var newQueryStringParameter = itemSeparator + parameterName + "=" + parameterValue;

        return baseUrl + "?" + otherQueryStringParameters + newQueryStringParameter;
    };

})(window.MyNamespace.Uri);

使用法は今です:

var changedUrl = MyNamespace.Uri.SetQueryStringParameter(originalUrl, "CarType", "Ford");
0
Appetere

私の解決策:

const setParams = (data) => {
    if (typeof data !== 'undefined' && typeof data !== 'object') {
        return
    }

    let url = new URL(window.location.href)
    const params = new URLSearchParams(url.search)

    for (const key of Object.keys(data)) {
        if (data[key] == 0) {
            params.delete(key)
        } else {
            params.set(key, data[key])
        }
    }

    url.search = params
    url = url.toString()
    window.history.replaceState({ url: url }, null, url)
}

それから、単に "setParams"を呼び出して、設定したいデータを持つオブジェクトを渡してください。

例:

$('select').on('change', e => {
    const $this = $(e.currentTarget)
    setParams({ $this.attr('name'): $this.val() })
})

私の場合は、HTML選択入力が変更されたときにそれを更新する必要があり、値が "0"の場合はパラメーターを削除します。オブジェクトキーが "null"の場合も、関数を編集してURLからパラメータを削除できます。

これがお役に立てば幸いです

0
Benjamin