Получить 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');
