четверг, 22 декабря 2011 г.

JavaScript: URL-декодирование и массив GET

Понадобились в работе аналоги функций PHP urlencode() и urldecode() для JavaScrip. Немного погуглив, понял, что люди конструируют различные велосипеды, хотя мне казалось, что должен быть простой путь. Так и оказалось. В JavaScript есть пара аналогичных функций: encodeURIComponent() и decodeURIComponent().

И в придачу, чтобы не забыть, функция для преобразования URL-строки в ассоциативный массив, аналог $_GET в PHP.
function getUrlVars()  
{  
    var vars = {}, hash;  
    var hashes = decodeURIComponent(window.location.href)
                   .slice(window.location.href.indexOf('?') + 1).split('&');  
  
    for(var i = 0; i < hashes.length; i++)  
    {  
        hash = hashes[i].split('=');  
        vars[hash[0]] = hash[1];  
    }  
  
    return vars;  
}      

// использование
_get = getUrlVars();
a = _get['a'];

9 комментариев:

  1. видимо желание собрать что-то самому порой выше, чем найти что-то готовое )

    $_GET = getUrlVars();

    и обращаешься к массиву гет как к php =)

    ОтветитьУдалить
    Ответы
    1. А в чем суть вашего комментария?
      Вы предлагаете использовать функцию, которую я описал.
      Именно так я ее и применял.

      Удалить
    2. Я считаю, что использование функций не должно быть замедлено временем узнавания того, как с ними работать. Добавив строку $_GET = getUrlVars(); становится очевидно, что и обращение к элементам массива идет полностью, как в php - т.е. $_GET['id'] (я, прежде чем это понять, выводил массив по цифрам, затем - получаемый массив целиком). Это может быть очевидно для многих, с другой стороны - добавляет удобства для тех, для кого php привычнее, нежели js. Я не пользовался в js таким методом - но если создавать подобие, то имеет смысл создавать подобие целиком, иначе - какой в этом всем смысл, кроме как привычности и удобности?

      Смысл коммента - в экономии времени другим.

      если считаете этот комментарий флудом или спамом - возможность его удаления никто не отменял ;)

      Удалить
    3. Да нет, не в флуде дело. Просто для меня действительно очевидно, результат работы функции - ассоциативный массив, как его не назови. Удобство не в том, чтобы назвать как в PHP ($_GET), а в том, чтобы получить значения отдельных параметров.
      Добавил в пост пример использования.

      Удалить
  2. Этот комментарий был удален автором.

    ОтветитьУдалить
  3. Первый параметр (тот, что сразу после ? идет) нельзя получить таким кодом. Возвращается undefined.

    ОтветитьУдалить
  4. Этот код работает только если каждому параметру в URL присвоено значение - xxx.com&a=1&b=2c=3.

    ОтветитьУдалить
    Ответы
    1. Я не понял вашего ответа. Конечно, это и имелось в виду.

      Вот пример кода, когда не работает.
      file:///C:/test2.html?r=test&result2=%D0%98%D0%B2%D0%B0%D0%BD%D0%BE%D0%B2%20%D0%98%D0%B2%D0%B0%D0%BD%20%D0%98%D0%B2%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%87&result3=test777


      Если строку "var hashes = decodeURIComponent(window.location.href).slice(window.location.href.indexOf('?') + 1).split('&'); " переделать на

      "var ahref = window.location.href;
      var hashes = decodeURIComponent( ahref.slice(ahref.indexOf('?')+1) ).split('&');", то все работает на 100%

      Спасибо за пример! Полезная вещь!

      Удалить
  5. Или если в вашем коде делать не +1, а -3... но это опасно... Честно говоря, я не понял почему - наверное из-за протокола... В моем случае, более универсально...

    Еще мысль в том, что decodeURI у вас возвращает декодированную строку, а indexOf работает с исходной... Скорей всего, тут проблема.

    ОтветитьУдалить

Спасибо за ваш комментарий!