javascript получить параметры из url

Что это такое?

— это набор символов, следующих в конце адреса после символа ? (вопросительный знак) и до # (хэш-символ) при наличии

Несколько параметров соединяются символом & (амперсанд) [w3.org]

Параметр может иметь значение через символ = (равно)

Страницы с разными параметрами в URL-адресе рассматриваются поисковыми системами как разные веб-документы (проиндексируются все 4-ре адреса)

Чтобы их склеить, нужно чтобы основной URL был указан в качестве значения атрибута href тега
с атрибутом rel=»canonical» , расположенного внутри . В исходном коде всех четырёх присутствует

Если часть URL с параметрами должны быть в индексе, а часть — нет (например, при наличии параметров статистики), то можно Google запретить индексировать страницы прямо в Вебмастере.

Получить строку параметров из URL, href ссылки, строки в JS

location.search: строка параметров из URL-адреса

HTMLHyperlinkElementUtils.search: строка параметров из атрибута href ссылки

HTMLHyperlinkElementUtils.search: строка параметров из произвольной строки

URLSearchParams : получить, добавить, удалить параметр URL или его значение

Как закодировать и раскодировать URL

*'()aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ закодировать кроме 012345678-_.!

*'()aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ=&+ закодировать кроме 012345678-_.!

*'()aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ=&+;,/?:@$# раскодировать раскодировать кроме =&+;,/?:@$#

Варианты применения параметров URL-адреса

Передать параметры из формы можно с помощью объекта new FormData в рамках new XMLHttpRequest() ([javascript.ru], полноценный пример). Менять адрес текущей страницы, изменяя параметры URL, можно с помощью Window.history [developer.mozilla.org], чтобы не перезагружать документ.

Смена содержимого страницы

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

Участок кода, который претерпел изменения:

Сбор статистики

Можно более точно собирать статистику источников переходов на страницу, если сайтам А и Б предложить разные адреса ссылок и считать количество посетителей URL по отдельности (UTM метки)

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

Жизнь Идет У меня вопрос немного не по теме. Может подскажите как сделать так чтобы при создании статьи они автоматически выходили со ссылками в твитере и др.соц сетях NMitra Некоторые сервисы позволяют добавлять RSS ленту. В Feedburner есть кнопка, активировав которую в твитер будет уходить анонс http://shpargalkablog.ru/2010/07/zarabotok-na-rss-s-nulya.html#feedburner Для кросспостинга в Facebook есть приложения. Я давно этой темой не интересовалась, может что поменялось. BlogAdmin Наталия! Извините, что не по теме, скажите пожалуйста, как вам удалось убрать внешние ссылки из комментариев, читал вашу статью (shpargalkablog.ru/2010/11/zapretit-indeksirovat-kommentarii.html), но там нужно переключить на не древовидные, что сейчас не выходит. Огромное спасибо! NMitra Попробуйте запретить канал комментариев http://shpargalkablog.ru/2010/10/comments-blogger.html#otvet BlogAdmin NMitra, пробовал не получается. Как отключить древовидные комментарии в современном варианте Блоггера? Спасибо! NMitra Других вариантов я не знаю — у меня везде по умолчанию без древовидных идёт. NMitra Попробуйте привести к коду

NMitra Подчищайте из кода всё, что связано с threaded-comment (только резервную копию делайте).

Как получить get-параметры
Из url типа http://site.com?a=1&b=2&c=3

Причем, если параметры необязательные?

Самый простой вариант:
var url = new URL(‘http://site.com?a=1&b=2&c=3’);
var a = url.searchParams.get(‘a’);

То же для b и с — независимо от их наличия.

НО! Это не работает в старых браузерах и IE!
Для них можно, например, такой вариант:

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.

Параметры в URL могут содержать кучу полезной информации: данные о товаре, пользовательские настройки, идентификатор партнёра. В этой статье посмотрим как через JS можно извлечь данную информацию.

Извлечение параметров из URL

Скажем, у нас есть следующий URL:

А вот функция с помощью которой мы сможем извлечь параметры из URL:

Теперь мы сможем извлекать параметры следующим образом:

Особенности

• Наша функция рассчитана на работу с URL где параметры разделены знаком & согласно спецификации W3C. Однако существуют и другие варианты, где параметры разделяются знаками ; или & .
• Наша функция работает в случае отсутствия знаков равенства или пустых значений параметров.
• Дублирующие параметры преобразуются в массив.

Принципы работы

Функция извлекает строку запроса: между знаками ? и # .

Если представлена строка запроса, то будет анализироваться именно она. В противном случае извлекаем URL объекта window .

Далее создаём объект куда будем складывать параметры.

Начинаем разбор строки запроса. Отсекаем всё что находится после знака # .

Далее разделяем параметры.

В результате получим массив следующего вида:

Далее проходимся по элементам данного массива, разделяем ключи и значения.

Далее нам нужно научить функции работать с дублирующимися параметрами или массивами:

Для начала задаём индекс по умолчанию: undefined . Далее разбираем значения между [] . Записываем индекс если он задан.

Далее задаём значение параметра. Если значение отсутствует, то записываем true .

Далее мы преобразуем параметры и значения к нижнему регистру чтобы избежать непредвиденных ситуаций:

Если название текущего параметра уже задано, то помещаем его в массив:

Если же такой параметр ещё не задан, то просто напросто передаём значение.

Если в URL были переданы закодированные символы, то мы из декодируем:

Поздравляем! Теперь вы знаете как извлечь параметры из URL.

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

Так же существует немало специализированных плагинов: jQuery URL или Medialize URI.js.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://www.sitepoint.com/get-url-parameters-with-javascript/
Перевел: Станислав Протасевич
Урок создан: 21 Августа 2016
Просмотров: 23248
Правила перепечатки

5 последних уроков рубрики «jQuery»

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.