Печать

Получить URL параметры и значения с помощью JQuery

В этой статье я хотел бы поделиться небольшим отрывком кода JQuery, который делает получение URL параметров и их значений более удобным.

Недавно, во время работы на одном из моих проектов, я должен был получить значения параметров из URL строки на текущей странице, которая была построена и присланна сценарием PHP.

// Считывает GET переменные из URL страницы и возвращает их как ассоциативный массив.
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;
}
Функцию getUrlVars() можно записать с использованием регулярных выражений:
function getUrlVars()
{
return window.location.href.slice(window.location.href.indexOf('?')).split(/[&?]{1}[\w\d]+=/);
} 

Функция возвращает массив / объект с URL параметров и их значений. Для примера рассмотрим URL:

http://www.example.com/?me=myValue&name2=SomeOtherValue

Вызов функции getUrlVars() вернет вам следующий массив:

{
    "me"    : "myValue",
    "name2" : "SomeOtherValue"
}

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

var first = getUrlVars()["me"];

// Для получения второго параметра
var second = getUrlVars()["name2"];

Для того, чтобы синтаксис сценария был более похож на код JQuery я переписал его как расширение для JQuery:

$.extend({
  getUrlVars: function(){
    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;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
  }
});

Теперь, если вы добавить выше предоставленный код в файл JavaScript, вы можете получить URL значения параметров в следующем виде:

//Получить объект с URL параметрами
var allVars = $.getUrlVars(); // Получит параметр URL по его имени
var byName = $.getUrlVar('name');
Интересная статья? Поделись ей с другими: