URLパラメータを変更する
私はこのURLを持っています：
site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc
必要なのは 'rows'のurlパラメータの値を私が指定したものに変更できるようにすることです。例えば、10としましょう。値はすでに指定しています（10）。
多くのことを学んだ後、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);
私は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;
}
query plugin が欲しいと思います。
例えば。：
window.location.search = jQuery.query.set("rows", 10);
これは現在の行の状態に関係なく機能します。
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文字列を使用できます。
純粋な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'を指定してください。
普通の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;
これに対する最新のアプローチは、ネイティブ標準ベースの 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.
文字列操作に代わる有効な方法は、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文字列を解析するよりも良いかもしれません。
あなたは仕事をするためにこの私のライブラリを使用することができます。 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);
これは、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);
}
}
私はどんな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);
});
});
ここで私は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;
}
}
私は同じものを探していて見つけました： https://github.com/medialize/URI.js これはかなりいいです:)
- アップデート
私はより良いパッケージを見つけました。 https://www.npmjs.org/package/qs それはまたget paramsの中の配列を扱います。
これが私のやり方です。私の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;
}
私も 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
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");
私の解決策：
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からパラメータを削除できます。
これがお役に立てば幸いです