Как получить значение из параметров GET?
У меня есть URL-адрес с некоторыми параметрами GET следующим образом:
www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
мне нужно получить все значение c
. Я попытался прочитать URL, но я получил только m2
. Как это сделать с помощью JavaScript?
30 ответов:
сам JavaScript не имеет ничего встроенного для обработки параметров строки запроса.
в (современном) браузере вы можете использовать
URL
объект;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')
Это простой способ проверить только один параметр:
пример 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. С поддержкой края в ближайшее время.
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://developer.mozilla.org/en-US/docs/Web/API/URL/URL
Эрик Bidelman, инженер в Google, рекомендует используя этот полифилл для неподдерживаемых браузеров.
Вы можете получить строку запроса в
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"; } }
решение 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; };
обновление 26.05.2017, вот реализация 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 }, {} )
супер простой способ использования URLSearchParams.
function getParam(param){ return new URLSearchParams(window.location.search).get(param); }
в настоящее время он поддерживается в Chrome, Firefox, Safari, Edge и другие.
Я использую 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; }
вот мое решение. Как посоветовал Энди Е при ответе этот вопрос, это не хорошо для производительности вашего скрипта, если он неоднократно строит различные строки регулярных выражений, запускает циклы и т. д., Чтобы получить одно значение. Таким образом, я придумал более простой скрипт, который возвращает все параметры в одном объекте. Вы должны вызвать его только один раз, назначить результат переменной, а затем в любой момент в будущем получить любое значение, которое вы хотите от этой переменной, используя соответствующий ключ. Обратите внимание, что он также заботится о декодировании 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".
на Значение Одного Параметра такой индекс.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 } }
этот вопрос слишком много ответов, поэтому я добавляю еще один.
/** * 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.
или если вы не хотите изобретать колесо синтаксического анализа URI, используйте URI.js
чтобы получить значение параметра с именем foo:
new URI((''+document.location)).search(true).foo
это
- преобразовать документ.расположение к строке (это объект)
- передать эту строку в URI.JS URI class construtor
- вызовите функцию search (), чтобы получить часть поиска (запроса) url
(передача true говорит ему вывести объект)- доступ к свойству foo на результирующий объект, чтобы получить значение
вот скрипка для этого.... http://jsfiddle.net/m6tett01/12/
здесь я публикую один пример. Но это в 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>
// 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
простой способ
function getParams(url){ var regex = /[?&]([^=#]+)=([^&#]*)/g, params = {}, match; while(match = regex.exec(url)) { params[match[1]] = match[2]; } return params; }
тогда назовите его как getParams (url)
// 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 ($.каждый) для своего цикла, который я рекомендую вместо forEach. Я считаю, что это проще обеспечить кросс-браузерная совместимость с использованием jQuery по всем направлениям, а не подключением отдельных исправлений для поддержки любых новых функций, которые не поддерживаются в старых браузерах.
Edit: после того, как я написал это, я заметил ответ Эрика Эллиота, который почти такой же, хотя он использует 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'] );
...что бы напечатать "Мюррей".
здесь angularJs исходный код для разбора параметров url-запроса в объект:
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-адреса в ассоциативном массиве, к которому мы можем легко получить доступ.
Так что в качестве примера, если бы у нас был следующий url-адрес с javascript внизу на месте.
http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July
все, что нам понадобится чтобы сделать, чтобы получить параметры id и страницы, чтобы вызвать это:
код будет такой:
<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>
вот что я делаю:
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.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
function getParamValue(param) { var urlParamString = location.search.split(param + "="); if (urlParamString.length <= 1) return ""; else { var tmp = urlParamString[1].split("&"); return tmp[0]; } }
Это должно работать для вашего случая независимо от того, является ли param последним или нет.
мы можем получить 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"**)