GETパラメータから値を取得する方法
次のように、いくつかのGETパラメータを含むURLがあります。
www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
cの値全体を取得する必要があります。私はそのURLを読もうとしましたが、私はm2しか得られませんでした。 JavaScriptを使ってこれを行うにはどうすればよいですか。
JavaScriptの 自身 には、クエリ文字列パラメータを処理するためのものは何も組み込まれていません。
（現代の）ブラウザで実行しているコードでは、 URLオブジェクト を使用できます（これは、ブラウザからJSまでのAPIブラウザの一部です）。
var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("c");
console.log(c);古いブラウザ（Internet Explorerを含む）では、 このpolyfill またはこの回答のオリジナルバージョンのURLより前のコードを使用できます。
location.searchにアクセスすると、?文字からURLの末尾、またはフラグメント識別子の先頭（#foo）のどちらか早いほうにアクセスできます。
それからこれでこれを解析することができます：
function parse_query_string(query) {
var vars = query.split("&");
var query_string = {};
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
var key = decodeURIComponent(pair[0]);
var value = decodeURIComponent(pair[1]);
// If first entry with this name
if (typeof query_string[key] === "undefined") {
query_string[key] = decodeURIComponent(value);
// If second entry with this name
} else if (typeof query_string[key] === "string") {
var arr = [query_string[key], decodeURIComponent(value)];
query_string[key] = arr;
// If third or later entry with this name
} else {
query_string[key].Push(decodeURIComponent(value));
}
}
return query_string;
}
var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);現在のページのURLからクエリ文字列を取得できます。
var query = window.location.search.substring(1);
var qs = parse_query_string(query);
私が見たほとんどの実装は名前と値のURLデコードを見逃しています。
これは、適切なURLデコードを行う一般的なユーティリティ関数です。
function getQueryParams(qs) {
qs = qs.split('+').join(' ');
var params = {},
tokens,
re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
}
return params;
}
//var query = getQueryParams(document.location.search);
//alert(query.foo);
function gup( name, url ) {
if (!url) url = location.href;
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( url );
return results == null ? null : results[1];
}
gup('q', 'hxxp://example.com/?q=abc')
これはただ一つのパラメータをチェックする簡単な方法です：
URLの例：
http://myserver/action?myParam=2
Javascriptの例：
var myParam = location.search.split('myParam=')[1]
"myParam"がURLに存在する場合...変数myParamは "2"を含みます。それ以外の場合は未定義です。
たぶんあなたはデフォルト値が欲しいです、その場合：
var myParam = location.search.split('myParam=')[1] ? location.search.split('myParam=')[1] : 'myDefaultValue';
更新： /これはもっとうまくいく：
var url = "http://www.example.com/index.php?myParam=384&login=admin"; // or window.location.href for current url
var captured = /myParam=([^&]+)/.exec(url)[1]; // Value is in [1] ('384' in our case)
var result = captured ? captured : 'myDefaultValue';
URLがパラメータでいっぱいになっている場合でも正しく機能します。
ブラウザベンダーは、URLおよびURLSearchParamsを介してこれを行うネイティブな方法を実装しています。
let url = new URL('http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5');
let searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('c')); // outputs "m2-m3-m4-m5"
現在、Firefox、Opera、Safari、ChromeおよびEdgeでサポートされています。ブラウザサポートのリストについては、 こちらをご覧ください 。
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParamshttps://developer.mozilla.org/en-US/docs/Web/ API/URL/URL
GoogleのエンジニアであるEric Bidelman、 推奨 これを使用 polyfill サポートされていないブラウザ用。
クエリ文字列はlocation.searchで取得できます。疑問符の後の部分はすべて分割できます。
var params = {};
if (location.search) {
var parts = location.search.substring(1).split('&');
for (var i = 0; i < parts.length; i++) {
var nv = parts[i].split('=');
if (!nv[0]) continue;
params[nv[0]] = nv[1] || true;
}
}
// Now you can get the parameters you want like so:
var abc = params.abc;
私はこの年齢の前に見つけました、とても簡単です：
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
それを次のように呼びます。
var fType = getUrlVars()["type"];
私はもっとシンプルでエレガントな解決策を書きました。
var arr = document.URL.match(/room=([0-9]+)/)
var room = arr[1];
これは正規表現を持たず、最小限の突然変異しか持たない再帰的な解です（paramsオブジェクトだけが突然変異されています。これはJSでは不可避です）。
それはそれが素晴らしいのでそれは：
- 再帰的です
- 同じ名前の複数のパラメータを処理します
- 不正な形式のパラメータ文字列（欠損値など）を適切に処理します。
- 値に「=」が含まれていても壊れません
- URLデコードを実行します
- そして最後に、それがすごいから…すごい！
コード：
var get_params = function(search_string) {
var parse = function(params, pairs) {
var pair = pairs[0];
var parts = pair.split('=');
var key = decodeURIComponent(parts[0]);
var value = decodeURIComponent(parts.slice(1).join('='));
// Handle multiple parameters of the same name
if (typeof params[key] === "undefined") {
params[key] = value;
} else {
params[key] = [].concat(params[key], value);
}
return pairs.length == 1 ? params : parse(params, pairs.slice(1))
}
// Get rid of leading ?
return search_string.length == 0 ? {} : parse({}, search_string.substr(1).split('&'));
}
var params = get_params(location.search);
// Finally, to get the param you want
params['c'];
function getURLParameters(paramName)
{
var sURL = window.document.URL.toString();
if (sURL.indexOf("?") > 0)
{
var arrParams = sURL.split("?");
var arrURLParams = arrParams[1].split("&");
var arrParamNames = new Array(arrURLParams.length);
var arrParamValues = new Array(arrURLParams.length);
var i = 0;
for (i = 0; i<arrURLParams.length; i++)
{
var sParam = arrURLParams[i].split("=");
arrParamNames[i] = sParam[0];
if (sParam[1] != "")
arrParamValues[i] = unescape(sParam[1]);
else
arrParamValues[i] = "No Value";
}
for (i=0; i<arrURLParams.length; i++)
{
if (arrParamNames[i] == paramName)
{
//alert("Parameter:" + arrParamValues[i]);
return arrParamValues[i];
}
}
return "No Parameters Found";
}
}
URLSearchParams を使った超簡単な方法。
function getParam(param){
return new URLSearchParams(window.location.search).get(param);
}
現在Chrome、Firefox、Safari、Edge、および その他 でサポートされています。
ECMAScript 6ソリューション：
var params = window.location.search
.substring(1)
.split("&")
.map(v => v.split("="))
.reduce((map, [key, value]) => map.set(key, decodeURIComponent(value)), new Map())
私はこれを行う機能を作りました：
var getUrlParams = function (url) {
var params = {};
(url + '?').split('?')[1].split('&').forEach(function (pair) {
pair = (pair + '=').split('=').map(decodeURIComponent);
if (pair[0].length) {
params[pair[0]] = pair[1];
}
});
return params;
};
2017年5月26日更新、ES7の実装です（babelプリセットステージ0、1、2、または3で実行）。
const getUrlParams = url => `${url}?`.split('?')[1]
.split('&').reduce((params, pair) =>
((key, val) => key ? {...params, [key]: val} : params)
(...`${pair}=`.split('=').map(decodeURIComponent)), {});
いくつかのテスト：
console.log(getUrlParams('https://google.com/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('https://google.com/')); // Will log {}
console.log(getUrlParams('a=1&b=2&c')); // Will log {}
更新3/26/2018、これがTypeScriptの実装です。
const getUrlParams = (search: string) => `${search}?`
.split('?')[1]
.split('&')
.reduce(
(params: object, pair: string) => {
const [key, value] = `${pair}=`
.split('=')
.map(decodeURIComponent)
return key.length > 0 ? { ...params, [key]: value } : params
},
{}
)
更新2/13/2019、これはTypeScript 3で動作する更新されたTypeScript実装です。
interface IParams { [key: string]: string }
const paramReducer = (params: IParams, pair: string): IParams => {
const [key, value] = `${pair}=`.split('=').map(decodeURIComponent)
return key.length > 0 ? { ...params, [key]: value } : params
}
const getUrlParams = (search: string): IParams =>
`${search}?`.split('?')[1].split('&').reduce<IParams>(paramReducer, {})
parseUri ライブラリを使います。それはあなたが正確にあなたが求めていることをすることを可能にします
var uri = 'www.test.com/t.html&a=1&b=3&c=m2-m3-m4-m5';
var c = uri.queryKey['c'];
// c = 'm2-m3-m4-m5'
私が使う
function getVal(str) {
var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)'));
return v ? v[1] : null;
}
これが私の解決策です。 この質問 に答えている間Andy Eが忠告したように、単一の値を取得するためだけにさまざまな正規表現文字列の作成、ループの実行などを繰り返すと、スクリプトのパフォーマンスに良くありません。それで、私は単一のオブジェクトの中のすべてのGETパラメータを返すより簡単なスクリプトを思い付きました。あなたはそれを一度だけ呼び出し、結果を変数に代入し、そして将来のいつかの時点で、適切なキーを使用してその変数からあなたが望む値を得るべきです。これはまたURIデコード（すなわち％20のようなもの）を引き受け、+をスペースに置き換えます。
function getUrlQueryParams(url) {
var queryString = url.split("?")[1];
var keyValuePairs = queryString.split("&");
var keyValue = [];
var queryParams = {};
keyValuePairs.forEach(function(pair) {
keyValue = pair.split("=");
queryParams[keyValue[0]] = decodeURIComponent(keyValue[1]).replace(/\+/g, " ");
});
return queryParams;
}
だから、ここであなたが見るためのスクリプトのいくつかのテストがあります：
// Query parameters with strings only, no special characters.
var currentParams = getUrlQueryParams("example.com/foo?number=zero");
alert(currentParams["number"]); // Gives "zero".
// For the URL you stated above...
var someParams = getUrlQueryParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ");
alert(someParams["c"]); // Gives "m2-m3-m4-m5".
// For a query params with URI encoding...
var someParams = getUrlQueryParams("www.example.com/t.html?phrase=a%20long%20shot&location=Silicon+Valley%2C+USA");
alert(someParams["phrase"]); // Gives "a long shot".
alert(someParams["location"]); // Gives "Silicon Valley, USA".
単一のパラメータ値 like this index.html？msg = 1のように、次のコードを使用します。
$(window).load(function(){
queryString();
});
function queryString()
{
var queryString = window.location.search.substring(1);
var varArray = queryString.split("="); //eg. index.html?msg=1
var param1 = varArray[0];
var param2 = varArray[1];
}
すべてのパラメータ Valueは以下のコードを使用します。
$(window).load(function(){
queryString();
});
function queryString()
{
var queryString = window.location.search;
var varArray = queryString.split("&");
for (var i=0;i<varArray.length;i++) {
var param = varArray[i].split("=");
//parameter-value pair
}
}
この質問にはあまりにも多くの答えがあるので、私は別のものを追加しています。
/**
* parses and returns URI query parameters
*
* @param {string} param parm
* @param {bool?} asArray if true, returns an array instead of a scalar
* @returns {Object|Array}
*/
function getURIParameter(param, asArray) {
return document.location.search.substring(1).split('&').reduce(function(p,c) {
var parts = c.split('=', 2).map(function(param) { return decodeURIComponent(param); });
if(parts.length == 0 || parts[0] != param) return (p instanceof Array) && !asArray ? null : p;
return asArray ? p.concat(parts.concat(true)[1]) : parts.concat(true)[1];
}, []);
}
使用法：
getURIParameter("id") // returns the last id or null if not present
getURIParameter("id", true) // returns an array of all ids
これは空のパラメータ（"=value"なしで存在するキー）、スカラーと配列ベースの値検索APIの両方の公開、そして適切なURIコンポーネントのデコードに対処します。
ここに私は一例を投稿しています。しかし、それはjQueryの中です。他の人に役立つことを願っています。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>
<!-- URL: www.example.com/correct/?message=done&year=1990-->
<script type="text/javascript">
$(function(){
$.url.attr('protocol') // --> Protocol: "http"
$.url.attr('path') // --> Host: "www.example.com"
$.url.attr('query') // --> path: "/correct/"
$.url.attr('message') // --> query: "done"
$.url.attr('year') // --> query: "1990"
});
</script>
あるいは、URI解析ツールを再発明したくない場合は URI.js を使用してください。
Fooという名前のパラメータの値を取得するには、次の手順に従います。
new URI((''+document.location)).search(true).foo
それは何ですか
- Document.locationを文字列に変換します（それはオブジェクトです）。
- その文字列をURI.jsのURIクラスコンストラクタに渡します
- Search（）関数を呼び出して、URLの検索（クエリ）部分を取得します。
（trueを渡すとオブジェクトを出力するように指示します） - 結果のオブジェクトのfooプロパティにアクセスして値を取得します。
これはこれのためのフィドルです.... http://jsfiddle.net/m6tett01/12/ /
簡単な方法
function getParams(url){
var regex = /[?&]([^=#]+)=([^&#]*)/g,
params = {},
match;
while(match = regex.exec(url)) {
params[match[1]] = match[2];
}
return params;
}
それからgetParams（url）のようにそれを呼び出します
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.Push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
// Usage for URL: http://my.site.com/location?locationId=53cc272c0364aefcb78756cd&shared=false
var id = getUrlVars()["locationId"];
ここから手に入れた： http://jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html
// http:localhost:8080/path?param_1=a¶m_2=b
var getParamsMap = function () {
var params = window.location.search.split("&");
var paramsMap = {};
params.forEach(function (p) {
var v = p.split("=");
paramsMap[v[0]]=decodeURIComponent(v[1]);
});
return paramsMap;
};
// -----------------------
console.log(getParamsMap()["param_1"]); // should log "a"
さらに別の提案。
いくつかの良い答えがすでにありますが、私はそれらが必要以上に複雑で理解しにくいと感じました。これは短くて単純で、URL内のトークン名に対応するキー名を持つ単純な連想配列を返します。
私は学びたい人のために以下のコメント付きのバージョンを追加しました。
これは、そのループがjQuery（$ .each）に依存していることに注意してください。forEachの代わりにこれをお勧めします。古いブラウザではサポートされていない新しい機能をサポートするために個々の修正を適用するよりも、jQueryを使用してブラウザ間の互換性を全面的に保証する方が簡単です。
編集：私がこれを書いた後、私はエリックエリオットの答えに気づいた、それはほとんど同じだが、それはforEachを使うが、私は一般に反対している（上記の理由で）。
function getTokens(){
var tokens = [];
var query = location.search;
query = query.slice(1);
query = query.split('&');
$.each(query, function(i,value){
var token = value.split('=');
var key = decodeURIComponent(token[0]);
var data = decodeURIComponent(token[1]);
tokens[key] = data;
});
return tokens;
}
コメント版
function getTokens(){
var tokens = []; // new array to hold result
var query = location.search; // everything from the '?' onward
query = query.slice(1); // remove the first character, which will be the '?'
query = query.split('&'); // split via each '&', leaving us an array of something=something strings
// iterate through each something=something string
$.each(query, function(i,value){
// split the something=something string via '=', creating an array containing the token name and data
var token = value.split('=');
// assign the first array element (the token name) to the 'key' variable
var key = decodeURIComponent(token[0]);
// assign the second array element (the token data) to the 'data' variable
var data = decodeURIComponent(token[1]);
tokens[key] = data; // add an associative key/data pair to our result array, with key names being the URI token names
});
return tokens; // return the array
}
以下の例では、このアドレスを仮定します。
http://www.example.com/page.htm?id=4&name=murray
あなたはあなた自身の変数にURLトークンを割り当てることができます：
var tokens = getTokens();
次に、各URLトークンを次のように名前で参照します。
document.write( tokens['id'] );
これは「4」を印刷します。
関数から直接トークン名を直接参照することもできます。
document.write( getTokens()['name'] );
「Murray」と表示されます。
これはURLクエリパラメータをObjectに解析するための angularJs ソースコードです。
function tryDecodeURIComponent(value) {
try {
return decodeURIComponent(value);
} catch (e) {
// Ignore any invalid uri component
}
}
function isDefined(value) {return typeof value !== 'undefined';}
function parseKeyValue(keyValue) {
keyValue = keyValue.replace(/^\?/, '');
var obj = {}, key_value, key;
var iter = (keyValue || "").split('&');
for (var i=0; i<iter.length; i++) {
var kValue = iter[i];
if (kValue) {
key_value = kValue.replace(/\+/g,'%20').split('=');
key = tryDecodeURIComponent(key_value[0]);
if (isDefined(key)) {
var val = isDefined(key_value[1]) ? tryDecodeURIComponent(key_value[1]) : true;
if (!hasOwnProperty.call(obj, key)) {
obj[key] = val;
} else if (isArray(obj[key])) {
obj[key].Push(val);
} else {
obj[key] = [obj[key],val];
}
}
}
};
return obj;
}
alert(JSON.stringify(parseKeyValue('?a=1&b=3&c=m2-m3-m4-m5')));この関数をwindow.locationに追加することができます。
window.location.query = function query(arg){
q = parseKeyValue(this.search);
if (!isDefined(arg)) {
return q;
}
if (q.hasOwnProperty(arg)) {
return q[arg];
} else {
return "";
}
}
// assuming you have this url :
// http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
console.log(window.location.query())
// Object {a: "1", b: "3", c: "m2-m3-m4-m5"}
console.log(window.location.query('c'))
// "m2-m3-m4-m5"
URL GET変数を読み取り、urlパラメータに基づいてアクションを完了する必要がありました。私は高低を問わず解決策を探し、この小さなコードを見つけました。それは基本的に現在のページのURLを読み込み、URLに何らかの正規表現を実行し、URLパラメータを連想配列に保存します。これは簡単にアクセスできます。
そのため、例として、下部にJavaScriptを配置した次のURLがあるとします。
http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July
パラメータidとpageを取得するために必要なことは、これを呼び出すことだけです。
コードは次のようになります。
<script type="text/javascript">
var first = getUrlVars()["year"];
var second = getUrlVars()["Month"];
alert(first);
alert(second);
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
window.location.href.split("?")
それから最初のインデックスを無視します
Array.prototype.slice.call(window.location.href.split("?"), 1)
uRLパラメータの配列を返します
var paramArray = Array.prototype.slice.call(window.location.href.split(/[?=]+/), 1);
var paramObject = paramArray.reduce(function(x, y, i, a){ (i%2==0) ? (x[y] = a[i+1]) : void 0; return x; }, {});
もう少し冗長/ハックですが機能的なparamObjectは、jsオブジェクトとしてマップされたすべてのパラメータを含みます。
すべてのパラメータをループすることなく、 c パラメータ値をより簡単な方法で取得できます。パラメータを取得するには、以下のjQueryを参照してください。
1.パラメータ値を取得するには、 /
var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";
url.match(**/(c=)[0-9A-Za-z-]+/ig**)[0].replace('c=',"")
（または）
url.match(**/(c=)[0-z-]+/ig**)[0].replace('c=',"")
文字列として返す
"m2-m3-m4-m5"
2.パラメータ値を置き換えます。
var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";
url.replace(**/(c=)[0-9A-Za-z-]+/ig, "c=m2345"**)
function getParamValue(param) {
var urlParamString = location.search.split(param + "=");
if (urlParamString.length <= 1) return "";
else {
var tmp = urlParamString[1].split("&");
return tmp[0];
}
}
これは、パラメータが最後であるかどうかにかかわらず、あなたのケースではうまくいくはずです。
これが私がしていることです：
var uriParams = getSearchParameters();
alert(uriParams.c);
// background functions:
// 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;
}
最短の方法：
new URL(location.href).searchParams.get("my_key");
このGld by Eldon McGuinness は、これまで見た中で最も完全なJavaScriptクエリ文字列パーサの実装です。
残念ながら、これはjQueryプラグインとして書かれています。
私はそれをVanilla JSに書き直し、いくつかの改良を加えました。
function parseQuery(str) {
var qso = {};
var qs = (str || document.location.search);
// Check for an empty querystring
if (qs == "") {
return qso;
}
// Normalize the querystring
qs = qs.replace(/(^\?)/, '').replace(/;/g, '&');
while (qs.indexOf("&&") != -1) {
qs = qs.replace(/&&/g, '&');
}
qs = qs.replace(/([\&]+$)/, '');
// Break the querystring into parts
qs = qs.split("&");
// Build the querystring object
for (var i = 0; i < qs.length; i++) {
var qi = qs[i].split("=");
qi = qi.map(function(n) {
return decodeURIComponent(n)
});
if (typeof qi[1] === "undefined") {
qi[1] = null;
}
if (typeof qso[qi[0]] !== "undefined") {
// If a key already exists then make this an object
if (typeof (qso[qi[0]]) == "string") {
var temp = qso[qi[0]];
if (qi[1] == "") {
qi[1] = null;
}
qso[qi[0]] = [];
qso[qi[0]].Push(temp);
qso[qi[0]].Push(qi[1]);
} else if (typeof (qso[qi[0]]) == "object") {
if (qi[1] == "") {
qi[1] = null;
}
qso[qi[0]].Push(qi[1]);
}
} else {
// If no key exists just set it as a string
if (qi[1] == "") {
qi[1] = null;
}
qso[qi[0]] = qi[1];
}
}
return qso;
}
// DEMO
console.log(parseQuery("?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab"));this Fiddle も参照してください。
Dojoを使ってください。ここでの他の解決策は、これほど短くてよくテストされていません。
require(["dojo/io-query"], function(ioQuery){
var uri = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ";
var query = uri.substring(uri.indexOf("?") + 1, uri.length);
var queryObject = ioQuery.queryToObject(query);
console.log(queryObject.c); //prints m2-m3-m4-m5
});
PHPのparse_str copycat .. :)
// Handles also array params well
function parseQueryString(query) {
var pars = (query != null ? query : "").replace(/&+/g, "&").split('&'),
par, key, val, re = /^([\w]+)\[(.*)\]/i, ra, ks, ki, i = 0,
params = {};
while ((par = pars.shift()) && (par = par.split('=', 2))) {
key = decodeURIComponent(par[0]);
// prevent param value going to be "undefined" as string
val = decodeURIComponent(par[1] || "").replace(/\+/g, " ");
// check array params
if (ra = re.exec(key)) {
ks = ra[1];
// init array param
if (!(ks in params)) {
params[ks] = {};
}
// set int key
ki = (ra[2] != "") ? ra[2] : i++;
// set array param
params[ks][ki] = val;
// go on..
continue;
}
// set param
params[key] = val;
}
return params;
}
var query = 'foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last';
var params = parseQueryString(query);
console.log(params)
console.log(params.foo) // 1
console.log(params.bar) // The bar!
console.log(params.arr[0]) // a0
console.log(params.arr[1]) // a1
console.log(params.arr.s) // as
console.log(params.arr.none) // undefined
console.log("isset" in params) // true like: isset($_GET['isset'])
/*
// in php
parse_str('foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last', $query);
print_r($query);
Array
(
[foo] => 1
[bar] => The bar!
[arr] => Array
(
[0] => a0
[1] => a1
[s] => as
[2] => last
)
[isset] =>
)*/
replace()メソッドを使用する最も簡単な方法：
urlStr文字列から：
paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');
または現在のURL：から
paramVal = document.URL.replace(/.*param_name=([^&]*).*|(.*)/, '$1');
説明：
document.URL-インターフェイスはドキュメントの場所（ページのURL）を文字列として返します。replace()-メソッドは、patternの一部またはすべての一致をreplacementに置き換えた新しい文字列を返します。/.*param_name=([^&]*).*/- 正規表現 スラッシュで囲まれたパターン：.*-1つ以上の任意の文字、param_name=-検索されるパラメーター名、()-正規表現のグループ、[^&]*-&を除く任意の1つ以上の文字、|-交互、$1-正規表現の最初のグループへの参照。
var urlStr = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
var c = urlStr.replace(/.*c=([^&]*).*|(.*)/, '$1');
var notExisted = urlStr.replace(/.*not_existed=([^&]*).*|(.*)/, '$1');
console.log(`c === '${c}'`);
console.log(`notExisted === '${notExisted}'`);入力ボックスを追加してから、その中に値をコピーするようにユーザーに依頼することができます。
<h1>Hey User! Can you please copy the value out of the location bar where it says like, &m=2? Thanks! And then, if you could...paste it in the box below and click the Done button?</h1>
<input type='text' id='the-url-value' />
<input type='button' value='This is the Done button. Click here after you do all that other stuff I wrote.' />
<script>
//...read the value on click
わかりました、でも真剣に...私はこのコードを見つけました、そしてそれはうまくいくようです：
http://www.developerdrive.com/2013/08/turning-the-querystring-into-a-json-object-using-javascript/ /
function queryToJSON() {
var pairs = location.search.slice(1).split('&');
var result = {};
pairs.forEach(function(pair) {
pair = pair.split('=');
result[pair[0]] = decodeURIComponent(pair[1] || '');
});
return JSON.parse(JSON.stringify(result));
}
var query = queryToJSON();
私はできるだけ速記を書くのが好きです。
URL：example.com/mortgage_calc.htm?pmts=120&intr=6.8&prin=10000
バニラジャバスクリプト：
for ( var vObj = {}, i=0, vArr = window.location.search.substring(1).split('&');
i < vArr.length; v = vArr[i++].split('='), vObj[v[0]] = v[1] ){}
// vObj = {pmts: "120", intr: "6.8", prin: "10000"}
エレガントで機能的なスタイルのソリューション
キーとしてURLパラメーター名を含むオブジェクトを作成してみましょう。そうすれば、名前でパラメーターを簡単に抽出できます。
// URL: https://example.com/?test=true&orderId=9381
// Build an object containing key-value pairs
const urlParams = window.location.search
.split('?')[1]
.split('&')
.map(keyValue => keyValue.split('='))
.reduce((params, [key, value]) => {
params[key] = value;
return params;
}, {});
// Return URL parameter called "orderId"
return urlParams.orderId;
簡単な手順でこれを行うためのJavaScriptツールを開発しました
まず、このスクリプトリンクをあなたのHTMLの頭の中にコピーします。
<script src="https://booligoosh.github.io/urlParams/urlParams.js"></script>
urlParams.cまたはurlParams['c']を使ってcの値を取得するだけです。
私はこれを開発したことも覚えておいてください、しかしそれはあなたの問題に対する簡単で気楽な解決策です。このツールには16進文字のデコードも含まれています。
これらのパラメータを解析する方法を再発明するよりも、利用可能なリソースを使用することを好みます。
- URLをオブジェクトとして解析します
- 検索パラメーター部分を抽出する
- SearchParamsをイテレーターから配列に拡張して配列に変換します。
- キー値配列をオブジェクトに縮小します。
const url = 'http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
const params = [... new URL(url).searchParams.entries()]
.reduce((a, c) => Object.assign(a, {[c[0]]:c[1]}), {})
console.log(params);1つのライナーとIE11フレンドリー：
> (window.location.href).match('c=([^&]*)')[1]
> "m2-m3-m4-m5"
これは私がもう少し読みやすい解決策です - しかしそれは<IE8のために.forEach()シムを必要とするでしょう：
var getParams = function () {
var params = {};
if (location.search) {
var parts = location.search.slice(1).split('&');
parts.forEach(function (part) {
var pair = part.split('=');
pair[0] = decodeURIComponent(pair[0]);
pair[1] = decodeURIComponent(pair[1]);
params[pair[0]] = (pair[1] !== 'undefined') ?
pair[1] : true;
});
}
return params;
}
これが私の解決策です： jsfiddle
以下のメソッドは与えられたURLのパラメータを含む辞書を返します。パラメータがない場合はnullになります。
function getParams(url){
var paramsStart = url.indexOf('?');
var params = null;
//no params available
if(paramsStart != -1){
var paramsString = url.substring(url.indexOf('?') + 1, url.length);
//only '?' available
if(paramsString != ""){
var paramsPairs = paramsString.split('&');
//preparing
params = {};
var empty = true;
var index = 0;
var key = "";
var val = "";
for(i = 0, len = paramsPairs.length; i < len; i++){
index = paramsPairs[i].indexOf('=');
//if assignment symbol found
if(index != -1){
key = paramsPairs[i].substring(0, index);
val = paramsPairs[i].substring(index + 1, paramsPairs[i].length);
if(key != "" && val != ""){
//extend here for decoding, integer parsing, whatever...
params[key] = val;
if(empty){
empty = false;
}
}
}
}
if(empty){
params = null;
}
}
}
return params;
}
多くの答えから学ぶこと（ VaMoose 、 Gnarf 、 Blixt など）。
あなたはオブジェクトを作成することができ（またはLocationオブジェクトを使用する）、デコードされたJSスタイルでURLパラメータを取得することを可能にするメソッドを追加することができます：
Url = {
params: undefined,
get get(){
if(!this.params){
var vars = {};
if(url.length!==0)
url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value){
key=decodeURIComponent(key);
if(typeof vars[key]==="undefined") {
vars[key]= decodeURIComponent(value);
}
else {
vars[key]= [].concat(vars[key], decodeURIComponent(value));
}
});
this.params = vars;
}
return this.params;
}
};
これにより、Url.getを使用してメソッドを呼び出すことができます。
最初にURLからオブジェクトを取得するとき、次に保存されたものをロードするときがあります。
例
?param1=param1Value¶m2=param2Value¶m1=param1Value2のようなURLでは、パラメータは次のように取得できます。
Url.get.param1 //["param1Value","param1Value2"]
Url.get.param2 //"param2Value"
Window.locationの検索オブジェクトからすべてのURLパラメータをjsonとして抽出する
export const getURLParams = location => {
const searchParams = new URLSearchParams(location.search)
const params = {}
for (let key of searchParams.keys()) {
params[key] = searchParams.get(key)
}
return params
}
console.log(getURLParams({ search: '?query=someting&anotherquery=anotherthing' }))
// --> {query: "someting", anotherquery: "anotherthing"}