JavaScriptを使用して、存在しない場合、または存在する場合、現在の値を更新するために、クエリ文字列パラメーターをURLにどのように追加できますか?クライアント側の開発にjqueryを使用しています。
JavaScriptを使用して、存在しない場合、または存在する場合、現在の値を更新するために、クエリ文字列パラメーターをURLにどのように追加できますか?クライアント側の開発にjqueryを使用しています。
回答:
私が達成したいことを達成する次の関数を書きました:
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;
}
}
[?|&]
する必要があります[?&]
var
セパレーター宣言の直前に追加して、セパレーター変数のスコープをローカル関数に制限します 。
value = encodeURIComponent(value);
最初の行を追加する必要があると思います。そうしないと、改行が正しくエスケープされません。
私はソリューションを拡張し、ユーザー入力に基づいてクエリ文字列パラメーターを置き換え/更新/削除し、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ステートメントでのハッシュ変数の宣言の削除
value
、あなたが0にその値を設定する場合、これはクエリ文字列から変数を削除する原因となりますので、代わりにif (value) {}
あなたが使用する必要がありますif (typeOf value !== 'undefined' && value !== null) {}
hash
は2回宣言されます;)
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の最新バージョンでのみ使用されているため、ブラウザーのサポートは不十分です。使用する場合は、ポリフィルと一緒に使用してください。
更新:元の回答以降、ブラウザーのサポートが改善されました。
Unable to set property '__URLSearchParams__:0.8503766759030615' of undefined or null reference
ie11でそのエラーが発生します。フォールバックとして機能しない場合、それはpollyfillではありません。
newRelativePathQuery
:var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString() + window.location.hash;
@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/で実際の動作を確認してください
var separator
行をリターンの真上に移動すると、「/ app#/ cool?fun = true」のバグが修正されます。これは、実際のクエリ文字列パラメータがまだない場合でも、セパレータとして「&」を選択します。クライアントのもののみ。
[?|&]
ません[?&]
(そうでなければ一致します|
)。
"([?|&])"
良くない。これをいずれかとして修正してください(var re = new RegExp("(?|&)" + key + "=.*?(&|#|$)", "i");
またはvar re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
他の方法で優れた拡張機能です)
var re = new RegExp("(?|&)" + key + "=.*?(&|#|$)", "i");
これを行うための私のライブラリは次のとおりです。https://github.com/Mikhus/jsurl
var u = new Url;
u.query.param='value'; // adds or replaces the param
alert(u)
この質問は古く、答えは死にましたが、ここに私の突き刺しがあります。現在受け入れられている回答を使用していて、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;
}
window.location.searchは読み取り/書き込み可能です。
ただし、クエリ文字列を変更すると、現在のページがリダイレクトされ、サーバーから更新されます。
実行しようとしているのがクライアント側の状態を維持する(そしてブックマーク可能にする)場合は、クエリ文字列ではなくURLハッシュを変更して、同じページ(window.location。ハッシュは読み取り/書き込みです)。これは、twitter.comなどのWebサイトがこれを行う方法です。
また、戻るボタンを機能させたい場合は、JavaScriptイベントをハッシュ変更イベントにバインドする必要があります。これに適したプラグインは、http://benalman.com/projects/jquery-hashchange-plugin/です。
設定されていない場合、または新しい値で更新したい場合は、以下を使用できます。
window.location.search = 'param=value'; // or param=new_value
ちなみに、これは単純なJavascriptです。
編集
jquery クエリオブジェクトプラグインを使用してみてください
window.location.search = jQuery.query.set( "param"、5);
これが私のアプローチです: location.params()
関数(以下に表示)は、ゲッターまたはセッターとして使用できます。例:
URLがのhttp://example.com/?foo=bar&baz#some-hash
場合、
location.params()
すべてのクエリパラメータを持つオブジェクトを返します:{foo: 'bar', baz: true}
。location.params('foo')
戻ります 'bar'
ます。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('&');
};
これは私の好みであり、私が考えることができるケースをカバーしています。誰かがそれを単一の置き換えに減らす方法を考えることができますか?
function setParam(uri, key, val) {
return uri
.replace(RegExp("([?&]"+key+"(?=[=&#]|$)[^#&]*|(?=#|$))"), "&"+key+"="+encodeURIComponent(val))
.replace(/^([^?&]+)&/, "$1?");
}
私はこれがかなり古いことを知っていますが、ここで作業バージョンを起動したいと思います。
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の変更バージョンです
ここからの私の見解(「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()));
});
@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
、同じことを意味し、より簡潔です。
これは、処理する短いバージョンです
コード:
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の回答に基づいていますが、多くの改善点があります。
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
正規表現を使用しない別のアプローチ。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
}
この関数を使用して、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
使用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/
window.location.search
Galと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;
特定のクエリ文字列を見つけてその値を置き換える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;
}
})
});
ええ、クエリ文字列がオーバーフローして重複するという問題がありましたが、これは私自身の遅さが原因でした。だから少し遊んで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から動的にクエリを簡単に追加できます。
次に、アンカー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;
};
複数のパラメータを一度に設定したい場合:
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
)が割り当てられていないパラメーターを処理しません。
このページには、厄介で不必要に複雑な答えがたくさんあります。最高評価の@ 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] || '');
}
}
separator
で定義されていませんupdateQueryStringParamsNoHash
。ではupdateQueryStringParameter
、置き換えるパラメータに値が割り当てられていない場合(たとえばhttp://abc.def/?a&b&c
)、すべてが機能しなくなります。
これは目的を果たすはずです:
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("&");
}
String#split
最大分割の2番目のパラメーターを取ります。jQuerymap
も役立ちます。