Работа с URL в javascript

Статья для новичков.

Работая с URL в javascript мы хотим решить следующие задачи

  1. понять: есть ли строка запроса в URL
  2. сколько ключей и значений в строке запроса
  3. получить объект состоящий из ключей и соответствующих им значений
  4. получить значение по ключу


Наш URL будет строкой следующего вида: 

var url = 'http://site.com/index.php?id=123&page=home&boss=me';

Мы потренируемся использовать

  • функции работы со строкой в javascript
  • регулярные выражения в javascript
  • объекты в javascript

Для решения наших задач нам необходимо разбить наш URL на две части:

  1. адрес до строки запроса
  2. сама строка запроса

Сделать это мы можем двумя способами 

var questr = url.split('?')

или 

var questr = url.match(/^(.*?)\?(.*?)$/im);

Правда результаты будут немого отличаться:

  • в первом случае мы получим массив, в котором первым элементом , с индексом 0, будет часть URL до символа ?, а вторым элементом, с индексом 1, будет сама строка запроса.
  • а во втором, первым элементом , с индексом 0, будет весь наш URL, вторым символом, с индексом 1, будет часть URL до символа ?, а третьим элементом, с индексом 2, будет сама строка запроса.

Итак.

Ответ на первый вопрос: есть ли строка запроса в нашем URL 

if(questr === null){
    console.log('строки запроса НЕТ!');
}else{
    console.log('строка запроса ЕСТЬ!');
}

Ответ на второй вопрос: сколько пар ключ-значение в строке запроса 

if(questr !== null){
    var cou = questr[2].split('&').length;
    console.log('количество пар ключ-значение = ' + cou);
};

Решение третьего вопроса: получить объект, состоящий из ключей и соответствующих им значений.

Для этого нам придется написать функцию, которая переберет строку запроса и запишет в объект ключ и соответствующее ему значение. Наша функция будет принимать на вход один аргумент: строку запроса, а возвращать объект с нужными нам параметрами. 

function getParam(questr){
    var obj = {};
    // разбираем строку запроса в массив
    // по разделителю &
    var arr = questr.split('&');
    for(i = 0; i < arr.length; i++){
        // формируем массив для ключ-значение
        var pair = arr[i].split('=');
        var key = pair[0];
        var val = pair[1];
        // записываем в объект значение по ключу
        obj[key] = val;
    }
    return obj;
}

Заставляем нашу функцию работать, передавая в нее строку запроса 

if(questr !== null){
    console.log(getParam(questr[2]));
}

И наконец, четвертый вопрос: получение значения по ключу.

Нам поможет написанная нами функция. 

if(questr !== null){
    console.log(getParam(questr[2]).id);
    // или
    console.log(getParam(questr[2])['id']);
}

Вот и все!