CoderNotes - заметки программиста

Публикации  »  JavaScript + jQuery
Бесплатный хостинг + SSL-сертификат

Зарегистрируйте домен и получите 2 месяца бесплатного хостинга и SSL-сертификат на 1 год в подарок

Подробнее
Skillbox

Получить значение переменной из адресной строки на JavaScript

Иногда бывает нужно получить переменную из текущего url в программе JavaScript. Получить значение всего url можно легко, просто прочитав document.location, но что если в адресе есть много переменных, а нужна одна конкретная.

Получить значение нужной переменной из текущего адреса на JavaScript

Выполнить эту задачу можно с помощью нехитрой простой функции:

var test = getURLVar('test');

function getURLVar(key) {
  var query = String(document.location.href).split('?');
  if (query[1]) {
    var part = query[1].split('&');
    for (i = 0; i < part.length; i++) {
      var data = part[i].split('=');
      if (data[0] == key && data[1]) return data[1];
    }
  }
  return '';
}

Если переменной в запросе нет или ее значение не задано, функция вернет пустую строку.

Другой вариант, более продвинутый, так сказать, получения переменной из url:

var test = getURLVar('test');

function getURLVar(key) {
  var vars = location.search.substr(1).split('&').reduce(function(res, a) {
    var t = a.split('=');
    res[decodeURIComponent(t[0])] = t.length == 1 ? null : decodeURIComponent(t[1]);
    return res;
  }, {});
  return vars[key] ? vars[key] : ''; 
}

Получить get переменные из текущего адреса в виде массива на JavaScript

Очень полезная функция, код которой предложил Андрей в комментариях ниже, за что ему спасибо.

function getURLVarArr() {
  var data = [];
  var query = String(document.location.href).split('?');
  if (query[1]) {
    var part = query[1].split('&');
    for (i = 0; i < part.length; i++) {
      var dat = part[i].split('=');
      data[dat[0]] = dat[1];
    }
  }
  return data;
}

Эту же функцию с пояснениями можете посмотреть ниже в комментарии Андрея.

Бывает еще обратная задача, когда нужно получить не конкретную переменную, а наоборот, все кроме указанной:

Получить адресную строку без указанной переменной на JavaScript

Код функции будет такой:

var url = getURLWithoutVar('test');

function getURLWithoutVar(key) {
  var url = '';
  var vars = location.search.substr(1).split('&').reduce(function(res, a) {
    var t = a.split('=');
    if (key != decodeURIComponent(t[0])) url += '&' + a;
  }, {});
  return url != '' ? location.origin + location.pathname + '?' + url.substr(1) : location.href;
}

Если переменной в адресной строке нет, тогда функция вернет всю строку со всеми переменными.

 

 

Категория: JavaScript + jQuery

Книги по теме:

Посмотреть все книги по программированию

Комментарии к статье:

12.09.20   Андрей Не понял, как это:
'Если переменной в адресной строке нет, тогда функция вернет всю строку со всеми переменными'
13.09.20   Андрей Немного изменил ваш первый вариант. Если гет-переменные неизвестны, то
<script>
var aus = aus(getURLVar());
document.getElementById('aus').innerHTML = aus;

// получаем массив с переменными в ключе и значением в значении
function getURLVar() {
  // получаем гет переменные типа 'var=var&grg=44'
  var query = String(document.location.href).split('?');
  //разбиваем значение query по разделителю '&'
  if (query[1]) {
    var part = query[1].split('&'); // массив part[0]='var=var' part[1]='grg=44'
	var data = [];
    for (i = 0; i < part.length; i++) {
      var dat = part[i].split('=');
	  data[dat[0]] = dat[1]; // массив data[переменная]=значение
    }
	return data;
  }
  else {
	return '';
  }
}

function aus(arr) {
  var aus = '';
  for (var key in arr) {
    aus = aus+'переменная: '+key+'='+arr[key]+'<br>';
  }
  return aus;
}
</script>
13.09.20   Администратор Последнее предложение "Если переменной в адресной строке нет..." - это про функцию getURLWithoutVar - её смысл в том, чтобы получить адресную строку без какой-то переменной.
Например, если у нас адресная строка содержит aa=1&bb=2&page=3 и мы хотим получить все переменные без переменной page, то функция getURLWithoutVar как раз для этого, она вернет aa=1&bb=2.
Но что будет, если для нашего примера мы передадим в функцию, скажем переменную cc, которой нет в адресной строке? функция вернет всю строку со всеми переменными, т.к. ей нечего исключить.
Об этом про функцию getURLWithoutVar и говорит предложение "Если переменной в адресной строке нет, тогда функция вернет всю строку со всеми переменными".
13.09.20   Администратор За пример с получением переменных в виде массива - отдельное большое спасибо!

Добавить комментарий: