次のように、いくつかの GET パラメータを含む URL があります。
www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
の値全体を取得する必要がありますc
。URLを読み取ろうとしましたが、しか取得できませんでしm2
た。JavaScript を使用してこれを行うにはどうすればよいですか?
次のように、いくつかの 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 を含む) の場合、このポリフィルまたはこの回答の元のバージョンのコードより前のコードを使用でき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')
これは、1 つのパラメーターのみを確認する簡単な方法です。
URL の例:
http://myserver/action?myParam=2
JavaScript の例:
var myParam = location.search.split('myParam=')[1]
URL に「myParam」が存在する場合...変数 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/URLSearchParams https://developer.mozilla.org/en-US/docs/Web/API/URL/URL
Google のエンジニアである Eric Bidelman は、サポートされていないブラウザーにこのポリフィルを使用することを推奨しています。
でクエリ文字列を取得し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;
よりシンプルでエレガントなソリューションを作成しました。
var arr = document.URL.match(/room=([0-9]+)/)
var room = arr[1];
これは、正規表現を持たず、最小限の変異しか持たない再帰的なソリューションです (params オブジェクトのみが変異しますが、これは JS では避けられないと思います)。
それが素晴らしい理由:
コード:
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";
}
}
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())
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;
}
この質問には回答が多すぎるため、別の回答を追加します。
/**
* 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 コンポーネントのデコードに対処します。
これが私の解決策です。この質問に答えているときに 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".
ここでは、一例を掲載しています。しかし、それは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>
さらに別の提案。
すでにいくつかの良い答えがありますが、それらは不必要に複雑で理解しにくいことがわかりました。これは短く単純で、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」と出力されます。
または、URI 解析ホイールを再発明したくない場合は、URI.jsを使用します
foo という名前のパラメータの値を取得するには:
new URI((''+document.location)).search(true).foo
それがすることは
これはフィドルです.... http://jsfiddle.net/m6tett01/12/
この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];
}
すべてのパラメータ値については、次のコードを使用します。
$(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
}
}
// 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
これを行うためのクリーンな方法を探しているのは、N++ の時間です。
戻ってきた場合に備えて、これをここに保存します...
const parseUrlQuery = (value) => {
var urlParams = new URL(value).searchParams
return Array.from(urlParams.keys()).reduce((acc, key) => {
acc[key] = urlParams.getAll(key)
return acc
}, {})
}
console.log(parseUrlQuery('http://url/path?param1=A¶m1=B¶m2=ABC¶m3=61569'))
これが私がすることです:
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;
}
window.location.search.slice(1).split('&').reduce((res, val) => ({...res, [val.split('=')[0]]: val.split('=')[1]}), {})
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 オブジェクトとしてマップされたすべてのパラメーターが含まれます
これは、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"
入力ボックスを追加して、ユーザーに値をそこにコピーするように依頼することができます...その方法は本当に簡単です:
<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();
1 つのライナーと IE11 フレンドリー:
> (window.location.href).match('c=([^&]*)')[1]
> "m2-m3-m4-m5"
私は可能な限り速記を書くのが好きです:
URL: example.com/mortgage_calc.htm?pmts=120&intr=6.8&prin=10000
バニラ Javascript:
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"}
PHPparse_str
のコピーキャット.. :)
// 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] =>
)*/
もう少し読みやすいと思う解決策を次に示しますが、.forEach()
IE8未満の場合はシムが必要です。
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;
}
道場を使う。ここには、これほど短い、または十分にテストされたソリューションは他にありません。
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
});
これは機能します:
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}
他の上位の回答は得られませんでした。
$_GET: function (param) {
var regex = new RegExp("(?:[?&]+" + param + "=)([^&]*)?", "i");
var match = regex.exec(window.location.href);
return match === null ? match : match[1];
}
これを 1 つの簡単なステップで行うための JavaScript ツールを開発しました。
まず、このスクリプト リンクを HTML の head にコピーします。
<script src="https://booligoosh.github.io/urlParams/urlParams.js"></script>
次に、またはをc
使用して値を取得します。単純!urlParams.c
urlParams['c']
また、私がこれを開発したことを覚えておいてください。しかし、これはあなたの問題に対する簡単で気楽な解決策です。このツールには 16 進文字のデコードも含まれており、これはしばしば役立ちます。
私はさまざまな方法を試しましたが、URL でパラメーター値を探しているときに、この試行済みの真の正規表現関数が機能します。これが役立つことを願っています。
var text = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5'
function QueryString(item, text){
var foundString = text.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)","i"));
return foundString ? foundString[1] : foundString;
}
console.log(QueryString('c', text));
likeQueuryString('param_name', url)
を使用すると、値が返されます
m2-m3-m4-m5
この機能を実行できます
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;
}
var source = getUrlVars()["lm_supplier"];
var el = source.toString();
var result= decodeURI(el);
console.log(result)
この関数は、URL から必要なものを取得します。 var source = getUrlVars()["URL から取得したいものを入力"];
function gup() {
var qs = document.location.search;
qs = qs.split('+').join(' ');
var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs))
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
return params;
}
のように使う
var params = gup()
その後
params.param1
params.param2