Как получить все или конкретные параметры получения из URL с помощью JavaScript

Содержание

1 Получить единственный параметр get
- 1.1 А. Использование регулярного выражения
- 1.2 Б. Разделение URL
2 Получить все параметры получения

Работали ли вы когда-нибудь в каком-либо внешнем приложении, и вдруг вам нужно изменить какой-то серверный код, однако вы не можете его изменить, потому что просто не можете или у вас нет разрешения, хотя это необходимо сделать? Нету ? Мы сделали, это действительно катастрофа, поверьте нам. Не просто потому, что вы не можете работать так, как хотите, а потому, что вы не можете заставить свои вещи работать правильно. Например, согласно существованию или значению параметра get, а именно viewType в URL мы покажем некоторый элемент пользователю двумя различными способами, это означает, что мы будем отображать 2 вида представлений в документе, а некоторые представления будут скрываться, когда определенный тип представления запрашивается через параметр GET в URL.

Эту проблему можно легко решить на стороне сервера, добавив пару операторов if в соответствии с параметром viewType в запросе, однако иногда вы вынуждены проверять это в представлении. Стоит сказать, что этот проект не существует, и это действительно преувеличенный пример, который поможет вам понять, о чем мы говорим.

Если вы действительно проанализировали логику своего проекта и другого способа сделать это не можете, или вам просто нужно получить доступ к параметру GET из URL-адреса в представлении по неизвестным причинам, то мы покажем вам, как это легко сделать с помощью JavaScript. ,

Компьютерщик заметка (может быть важно)

Любой из методов в этой статье не расшифрует + (плюс) из URL, поскольку все они полагаются на функцию JavaScript decodeURIComponent, Есть много сайтов, которые используют символ плюса в качестве пробела в URL вместо своего представления кодировки URL %20 (даже Google), однако его следует использовать только для контента с типом ответа application/x-www-form-urlencoded, Это интересная тема для обсуждения между разработчиками, так как кажется, что вам не следует использовать символ плюс для обозначения пробела в каком-либо параметре GET, однако это делает строку действительно удобной для пользователя, так как ее легче читать с помощью символов плюс.

Получить единственный параметр get

Обычно с языковым сервером в виде PHP вы можете легко получить параметр GET и сделать что-то в соответствии с их значением:

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

Читайте также:  Как использовать composer с Plesk (используйте другую версию PHP для запуска Composer)

Чтобы извлечь отдельный параметр из URL-адреса в документе, у нас есть 2 метода, которые вы можете использовать для этого:

`А. Использование регулярного выражения`

Следующие _get Функция использует регулярное выражение для получения вашего параметра get и возвращает неопределенное значение в случае, если параметр не существует. Он написан двумя способами, первый позволяет вам сделать это непосредственно из документа (URL-адрес, который будет использоваться, будет текущим местоположением документа), а второй ожидает URL-адрес, который будет обработан как второй аргумент:

/**
* Function to retrieve a get parameter from the current document (using location.href)
*
* @param parameter {String} Key of the get parameter to retrieve
*/
function _get(parameter) {
var reg = new RegExp( '[?&]' + parameter + '=([^&#]*)', 'i' );
var string = reg.exec(window.location.href);
return string ? string[1] : undefined;
};
/**
* Function to retrieve a get parameter from a String URL providen as second argument
*
* @param parameter {String} Key of the get parameter to retrieve
* @param URL {String} The URL to search for the get parameter
*/
function _get(parameter , URL) {
var reg = new RegExp( '[?&]' + parameter + '=([^&#]*)', 'i' );
var string = reg.exec(URL);
return string ? string[1] : undefined;
};

И их можно использовать следующим образом:

// First method
// Current document URL = http://site.com/search?q=How%20are%20you
console.log(_get("q")); // How are you
// Second method
console.log(_get("q", "http://site.com/search?q=How%20are%20you"));// How are you

`Б. Разделение URL`

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

В первом методе мы будем искать в location.search строка, которая возвращает все параметры запроса в виде строки ?q=12&otp=421, Тогда строка будет разделена на символ, который указывает, что будет использоваться новый параметр запроса. Во втором параметре мы разделим, используя тот же метод, но с полным URL, указанным в качестве второго аргумента:

/**
* Retrieves the get parameter with the providen key in the current location of the document.
*
* @param identifier {String} Key of the get parameter
*/
function _getParameter(identifier) {
var result = undefined, tmp = [];
var items = window.location.search.substr(1).split("&");
for (var index = 0; index < items.length; index++) {
tmp = items[index].split("=");
if (tmp[0] === identifier){
result = decodeURIComponent(tmp[1]);
}
}
return result;
}
/**
* Retrieves the get parameter with the providen key on the providen URL as second argument.
*
* @param identifier {String} Key of the get parameter
* @param URL {String} The URL to process
*/
function _getParameter(identifier , URL) {
var result = null, tmp = [];
var usefulParam = URL.split("?")[1] || "";
var items = usefulParam.split("&");
for (var index = 0; index < items.length; index++) {
tmp = items[index].split("=");
if (tmp[0] === identifier){
result = decodeURIComponent(tmp[1]);
}
}
return result;
}

Их можно использовать следующим образом:

// First method
// Current document URL = http://site.com/search?q=How%20are%20you
console.log(_getParameter("q")); // How are you
// Second method
console.log(_getParameter("q", "http://site.com/search?q=How%20are%20you"));// How are you

`Получить все параметры получения`

Хотя для вашего приложения было бы более безопасно определить, какие параметры получения ожидаются, поскольку любой может изменить параметры получения из URL-адреса, вы можете извлечь в одном объекте все параметры получения URL-адреса, если это необходимо. Как уже было сказано, важно, чтобы ваш код проверял конкретные параметры запроса, а не автоматически их просматривал.

Читайте также:  Как конвертировать вебм видео в mp4 с помощью FFMpeg в Symfony 3

Следующий фрагмент объявит объект в окне, а именно QueryString, В этом объекте будет объявлен новый элемент для каждого параметра GET, доступного в URL (с тем же ключом, что и у параметра). Второй фрагмент - это функция, которая делает то же самое, что и первая, но вместо того, чтобы объявить ее в окне, позволяет вам использовать ее как функцию, которая возвращает объект в переменную:

/**
* Declares a new object in the window namely QueryString that contains every get parameter from the current URL as a property
*/
window.QueryString = function () {
// This function is anonymous, is executed immediately and
// the return value is assigned to QueryString!
var query_string = {};
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined") {
query_string[pair[0]] = decodeURIComponent(pair[1]);
// If second entry with this name
} else if (typeof query_string[pair[0]] === "string") {
var arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
query_string[pair[0]] = arr;
// If third or later entry with this name
} else {
query_string[pair[0]].push(decodeURIComponent(pair[1]));
}
}
return query_string;
}();
/**
* This function returns an object that contains every get parameter from a URL (first argument) as a property
*
* @param URL {String}
*/
function QueryString(URL) {
// This function is anonymous, is executed immediately and
// the return value is assigned to QueryString!
var query_string = {};
var usefulParam = URL.split("?")[1] || "";
var query = usefulParam || "";
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined") {
query_string[pair[0]] = decodeURIComponent(pair[1]);
// If second entry with this name
} else if (typeof query_string[pair[0]] === "string") {
var arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
query_string[pair[0]] = arr;
// If third or later entry with this name
} else {
query_string[pair[0]].push(decodeURIComponent(pair[1]));
}
}
return query_string;
}

Представьте этот объект как $_GET массив PHP, так что вы можете просто получить доступ к ключу в объекте, и в случае, если он не существует, он просто будет неопределенным:

// Current URL: https://www.google.de/?gfe_rd=cr&ei=JFkHWdqAFafPXq3goBA&gws_rd=ssl&q=Our+Code+World
QueryString["q"]; // Our+Code+World
QueryString["gfe_rd"]; // cr
QueryString["ei"]; //JFkHWdqAFafPXq3goBA
QueryString["gws_rd"]; // ssl
// {
//      "gfe_rd": "cr",
//      "ei": "JFkHWdqAFafPXq3goBA",
//      "gws_rd": "ssl",
//      "q": "Our+Code+World"
// }
var $_GET = QueryString("https://www.google.de/?gfe_rd=cr&ei=JFkHWdqAFafPXq3goBA&gws_rd=ssl&q=Our+Code+World");