Как с помощью js получить данные из url?
Как из: https://www.site.com/name?v=M1hM67mxy8YWA Как получить значение v=?
Отслеживать
задан 17 июн 2018 в 15:43
223 2 2 серебряных знака 12 12 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
var params = window .location .search .replace('?','') .split('&') .reduce( function(p,e)< var a = e.split('='); p[ decodeURIComponent(a[0])] = decodeURIComponent(a[1]); return p; >, <> ); console.log( params['v']);Отслеживать
ответ дан 17 июн 2018 в 15:47
3,189 2 2 золотых знака 23 23 серебряных знака 45 45 бронзовых знаков
Как извлечь get параметр с url?
Предположим что после перехода на наш сайт в url передано несколько параметров например https://test.test/?lpkey1=12&lpkay2=45. как мне извлечь эти данные в параметрах lpkay1 и lpkay2 не используя php
- Вопрос задан более двух лет назад
- 557 просмотров
1 комментарий
Простой 1 комментарий
edward_freedom @edward_freedom
Как получить get параметр js
Для получения параметра лучше всего использовать объект URL — в нём есть свойство searchParams с методами взаимодействия с параметрами:
const url = new URL('http://mysite/?param=value'); console.log(url.searchParams.get('param')); // => value Метод searchParams.get() принимает имя параметра, который нужно получить.
Объекты URL
Встроенный класс URL предоставляет удобный интерфейс для создания и разбора URL-адресов.
Нет сетевых методов, которые требуют именно объект URL , обычные строки вполне подходят. Так что, технически, мы не обязаны использовать URL . Но иногда он может быть весьма удобным.
Создание URL
Синтаксис создания нового объекта URL :
new URL(url, [base])- url – полный URL-адрес или только путь, если указан второй параметр,
- base – необязательный «базовый» URL: если указан и аргумент url содержит только путь, то адрес будет создан относительно него (пример ниже).
let url = new URL('https://javascript.info/profile/admin');Эти два URL одинаковы:
let url1 = new URL('https://javascript.info/profile/admin'); let url2 = new URL('/profile/admin', 'https://javascript.info'); alert(url1); // https://javascript.info/profile/admin alert(url2); // https://javascript.info/profile/adminМожно легко создать новый URL по пути относительно существующего URL-адреса:
let url = new URL('https://javascript.info/profile/admin'); let newUrl = new URL('tester', url); alert(newUrl); // https://javascript.info/profile/testerОбъект URL даёт доступ к компонентам URL, поэтому это отличный способ «разобрать» URL-адрес, например:
let url = new URL('https://javascript.info/url'); alert(url.protocol); // https: alert(url.host); // javascript.info alert(url.pathname); // /urlВот шпаргалка по компонентам URL:
- href это полный URL-адрес, то же самое, что url.toString()
- protocol – протокол, заканчивается символом двоеточия :
- search строка параметров, начинается с вопросительного знака ?
- hash начинается с символа #
- также есть свойства user и password , если используется HTTP-аутентификация: http://login:password@site.com (не нарисованы сверху, так как редко используются).
Можно передавать объекты URL в сетевые методы (и большинство других) вместо строк
Мы можем использовать объект URL в методах fetch или XMLHttpRequest и почти во всех других, где ожидается URL-строка.
Вообще, объект URL можно передавать почти куда угодно вместо строки, так как большинство методов сконвертируют объект в строку, при этом он станет строкой с полным URL-адресом.
SearchParams «?…»
Допустим, мы хотим создать URL-адрес с заданными параметрами, например, https://google.com/search?query=JavaScript .
Мы можем указать их в строке:
new URL('https://google.com/search?query=JavaScript')…Но параметры должны быть правильно закодированы, чтобы они могли содержать не-латинские буквы, пробелы и т.п. (об этом подробнее далее).
Так что для этого есть свойство url.searchParams – объект типа URLSearchParams.
Он предоставляет удобные методы для работы с параметрами:
- append(name, value) – добавить параметр по имени,
- delete(name) – удалить параметр по имени,
- get(name) – получить параметр по имени,
- getAll(name) – получить все параметры с одинаковым именем name (такое возможно, например: ?user=John&user=Pete ),
- has(name) – проверить наличие параметра по имени,
- set(name, value) – задать/заменить параметр,
- sort() – отсортировать параметры по имени, используется редко,
- …и является перебираемым, аналогично Map .
Пример добавления параметров, содержащих пробелы и знаки препинания:
let url = new URL('https://google.com/search'); url.searchParams.set('q', 'test me!'); // добавим параметр, содержащий пробел и ! alert(url); // https://google.com/search?q=test+me%21 url.searchParams.set('tbs', 'qdr:y'); // параметр с двоеточием : // параметры автоматически кодируются alert(url); // https://google.com/search?query=test+me%21&tbs=qdr%3Ay // перебрать параметры (в исходном виде) for(let [name, value] of url.searchParams) < alert(`$=$`); // q=test me!, далее tbs=qdr:y >Кодирование
Существует стандарт RFC3986, который определяет список разрешённых и запрещённых символов в URL.
Запрещённые символы, например, нелатинские буквы и пробелы, должны быть закодированы – заменены соответствующими кодами UTF-8 с префиксом % , например: %20 (исторически сложилось так, что пробел в URL-адресе можно также кодировать символом + , но это исключение).
К счастью, объекты URL делают всё это автоматически. Мы просто указываем параметры в обычном, незакодированном, виде, а затем конвертируем URL в строку:
let url = new URL('https://ru.wikipedia.org/wiki/Тест'); url.searchParams.set('key', 'ъ'); alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8AКак видно, слово Тест в пути URL-адреса и буква ъ в параметре закодированы.
URL стал длиннее, так как каждая кириллическая буква представляется двумя байтами в кодировке UTF-8.
Кодирование в строках
Раньше, до того как появились объекты URL , люди использовали для URL-адресов обычные строки.
Сейчас URL часто удобнее, но строки всё ещё можно использовать. Во многих случаях код с ними короче.
Однако, если мы используем строку, то надо самим позаботиться о кодировании специальных символов.
Для этого есть встроенные функции:
- encodeURI – кодирует URL-адрес целиком.
- decodeURI – декодирует URL-адрес целиком.
- encodeURIComponent – кодирует компонент URL, например, параметр, хеш, имя пути и т.п.
- decodeURIComponent – декодирует компонент URL.
Возникает естественный вопрос: «Какая разница между encodeURIComponent и encodeURI ? Когда использовать одну и другую функцию?»
Это легко понять, если мы посмотрим на URL-адрес, разбитый на компоненты на рисунке выше:
http://site.com:8080/path/page?p1=v1&p2=v2#hashКак мы видим, в URL-адресе разрешены символы : , ? , = , & , # .
…С другой стороны, если взглянуть на один компонент, например, URL-параметр, то в нём такие символы должны быть закодированы, чтобы не поломать форматирование.
- encodeURI кодирует только символы, полностью запрещённые в URL.
- encodeURIComponent кодирует эти же символы плюс, в дополнение к ним, символы # , $ , & , + , , , / , : , ; , = , ? и @ .
Так что для URL целиком можно использовать encodeURI :
let url = encodeURI('http://site.com/привет'); alert(url); // http://site.com/%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82…А для параметров лучше будет взять encodeURIComponent :
let music = encodeURIComponent('Rock&Roll'); let url = `https://google.com/search?q=$`; alert(url); // https://google.com/search?q=Rock%26RollСравните с encodeURI :
let music = encodeURI('Rock&Roll'); let url = `https://google.com/search?q=$`; alert(url); // https://google.com/search?q=Rock&RollКак видим, функция encodeURI не закодировала символ & , который является разрешённым в составе полного URL-адреса.
Но внутри параметра поиска символ & должен быть закодирован, в противном случае мы получим q=Rock&Roll , что значит q=Rock плюс непонятный параметр Roll . Не то, что предполагалось.
Чтобы правильно вставить параметр поиска в строку URL, мы должны использовать для него только encodeURIComponent . Наиболее безопасно кодировать и имя, и значение, за исключением случаев, когда мы абсолютно уверены в том, что они содержат только разрешённые символы.
Разница в кодировании с URL
Классы URL и URLSearchParams базируются на последней спецификации URI, описывающей устройство адресов: RFC3986, в то время как функции encode* – на устаревшей версии стандарта RFC2396.
Различий мало, но они есть, например, по-разному кодируются адреса IPv6:
// допустимый URL-адрес IPv6 let url = 'http://[2607:f8b0:4005:802::1007]/'; alert(encodeURI(url)); // http://%5B2607:f8b0:4005:802::1007%5D/ alert(new URL(url)); // http://[2607:f8b0:4005:802::1007]/Как мы видим, функция encodeURI заменила квадратные скобки [. ] , сделав адрес некорректным. Причина: URL-адреса IPv6 не существовали в момент создания стандарта RFC2396 (август 1998).
Тем не менее, такие случаи редки. По большей части функции encode* работают хорошо.