У меня есть URL с некоторыми параметрами GET следующим образом:
www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5
Мне нужно получить все значение c. Я попытался прочитать URL-адрес, но я получил только m2. Как это сделать с помощью JavaScript?
Как получить значение из параметров GET?
Ответ 1
В самом JavaScript нет ничего встроенного для обработки параметров строки запроса.
Код, работающий в (современном) браузере, вы можете использовать объект URL (который является частью API, предоставляемого браузерами для JS):
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);Ответ 2
Большинство реализаций, которые я видел, пропускают 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);
Ответ 3
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')
Ответ 4
Это простой способ проверить только один параметр:
Пример 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-адрес заполнен параметрами.
Ответ 5
Поставщики браузеров реализовали собственный способ сделать это через 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
Эрик Бидельман (Eric Bidelman), инженер из Google, рекомендует использовать это заполнение для неподдерживаемых браузеров.
Ответ 6
Я нашел это много лет назад, очень легко:
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
Затем назовите его следующим образом:
var fType = getUrlVars()["type"];
Ответ 7
Вы можете получить строку запроса в 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;
Ответ 8
Я написал более простое и элегантное решение.
var arr = document.URL.match(/room=([0-9]+)/)
var room = arr[1];
Ответ 9
Вот рекурсивное решение, не имеющее регулярного выражения и имеющее минимальную мутацию (только объект params мутирован, что, по моему мнению, неизбежно в JS).
Это потрясающе, потому что это:
- Рекурсивный
- Обрабатывает несколько параметров с тем же именем
- Хорошо работает с неверными строками параметров (отсутствующие значения и т.д.)
- Не разрывается, если значение "=" находится в значении
- Выполняет декодирование URL
- И, наконец, это потрясающе, потому что это... argh !!!
Код:
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'];
Ответ 10
Я сделал функцию, которая делает это:
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 {}
Обновление 26.03.2008, вот реализация 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
},
{}
)
Обновление 13.02.2009, вот обновленная реализация TypeScript, которая работает с TypeScript 3.
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, {})
Ответ 11
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";
}
}
Ответ 12
Супер простой способ с использованием URLSearchParams.
function getParam(param){
return new URLSearchParams(window.location.search).get(param);
}
В настоящее время поддерживается в Chrome, Firefox, Safari, Edge и других.
Ответ 13
Решение 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())
Ответ 14
Я использую библиотеку 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'
Ответ 15
Я использую
function getVal(str) {
var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)'));
return v ? v[1] : null;
}
Ответ 16
Вот мое решение. Как посоветовал 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".
Ответ 17
Для Единого значения параметра, например this.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
}
}
Ответ 18
В этом вопросе слишком много ответов, поэтому я добавляю еще один.
/**
* 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.
Ответ 19
Или, если вы не хотите изобретать механизм синтаксического анализа URI, URI.js
Чтобы получить значение параметра с именем foo:
new URI((''+document.location)).search(true).foo
Что это значит,
- Преобразование document.location в строку (это объект)
- Подайте эту строку в URI-класс URI.js
- Вызвать функцию поиска() для получения части запроса (запроса) URL-адреса (передача true указывает на вывод объекта)
- Получите доступ к свойству foo в результирующем объекте, чтобы получить значение
Вот сценарий для этого.... http://jsfiddle.net/m6tett01/12/
Ответ 20
Здесь я отправляю один пример. Но это в 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>
Ответ 21
Самый короткий путь:
new URL(location.href).searchParams.get("my_key");
Ответ 22
// Read a page 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
Ответ 23
Простой способ
function getParams(url){
var regex = /[?&]([^=#]+)=([^&#]*)/g,
params = {},
match;
while(match = regex.exec(url)) {
params[match[1]] = match[2];
}
return params;
}
тогда назовите его как getParams (url)
Ответ 24
Еще одно предложение.
Уже есть хорошие ответы, но я нашел их бесполезно сложными и трудными для понимания. Это короткий, простой и возвращает простой ассоциативный массив с именами ключей, соответствующими именам токенов в 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".
Ответ 25
// 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"
Ответ 26
Самый простой способ, используя метод replace():
Из строки urlStr:
paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');
или с текущего URL:
paramVal = document.URL.replace(/.*param_name=([^&]*).*|(.*)/, '$1');
Объяснение:
document.URL- интерфейс возвращает местоположение документа (URL страницы) в виде строки.replace()- метод возвращает новую строку, в которой некоторые или все совпадения шаблона заменены заменой./.*param_name=([^&]*).*/- шаблон регулярного выражения, заключенный между косыми чертами, что означает:.*- ноль или более символов,param_name=- имя параметра, которое указано,()- группа в регулярном выражении,[^&]*- один или несколько любых символов, кроме&,|- чередование,$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}'');Ответ 27
Вот исходный код angularJs для анализа параметров запроса url в Object:
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')));Ответ 28
Мне нужно было прочитать переменную GET URL и выполнить действие, основанное на параметре url. Я искал высоко и низко для решения и наткнулся на этот маленький кусок кода. Он в основном читает текущий URL-адрес страницы, выполняет некоторое регулярное выражение по URL-адресу, а затем сохраняет параметры url в ассоциативном массиве, к которому мы можем легко получить доступ.
Итак, в качестве примера, если у нас был следующий URL-адрес с javascript внизу на месте.
http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July
Все, что нужно сделать, чтобы получить идентификаторы параметров и страницы, должны вызвать это:
Код будет:
<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>
Ответ 29
Этот Gist 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"));Ответ 30
Вот что я делаю:
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;
}