Получить адрес ссылки javascript

Get the full URI from the href property of a link

I would like to have a confirmation on some point. My goal is to always get the same string (which is the URI in my case) while reading the href property from a link. Example: with base_url = http://domain.name/ with base_url = http://domain.name/domain/ with base_url = any folder from http://domain.name/ I need to get http://domain.name/test.htm from the 3 situations above (or any other identical string). After some tests, it appears that my_a_dom_node.href always return the full-qualified URI, including the http://domaine.name, which should be okay for what I want. jQuery has a different behaviour and $(my_a_dom_node).attr(‘href’) returns the content (text) that appears inside the HTML. So my trick is to use $(my_a_dom_node).get(0).href to get the full URI. The question is: can I rely on this?

4 Answers 4

Once when people was using simple javascript (no jQuery) many asked the opposite of what you are asking, they wanted to get the real url as written in the href attribute and not the full one, in such case they used to simply do:

my_a_dom_node.getAttribute('href', 2); //works both IE/FF 

Then it came jQuery that helped people not to waste their time in finding out they would need such code and jQuery always returns the real url as written in the href attribute.

It’s funny that now someone is asking how to get the full url because jQuery returns the one written in the href attribute.

Источник

Объекты URL

Встроенный класс URL предоставляет удобный интерфейс для создания и разбора URL-адресов.

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

Создание URL

Синтаксис создания нового объекта URL :

• url – полный URL-адрес или только путь, если указан второй параметр,
• base – необязательный «базовый» URL: если указан и аргумент url содержит только путь, то адрес будет создан относительно него (пример ниже).

let url = new URL('https://javascript.info/profile/admin');

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 в методах 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

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 и 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* работают хорошо.

Источник

Как получить url текущей страницы на JavaScript

Рассмотрим как получить URL текущей страницы в JS целиком, а также по отдельности — протокол, доменное имя сайта, GET параметры и значение после решётки (хеша). Полная информация об адресе содержится в объекте « document.location ». Доступ к отдельным элементам получаем через его свойства.

Разберём адрес: https://realadmin.ru/saytostroy/?page=4#top

Получение значений GET параметров

Javascript предоставляет специальный объект для работы с GET параметрами. С его помощью можно проверить существование параметра по названию и получить значение.

Для примера возьмем адрес:

https://realadmin.ru/saytostroy/?page=4&limit=10&sortby=desc

Извлечём значения «page» и «sortby»:

var paramsString = document.location.search; // ?page=4&limit=10&sortby=desc var searchParams = new URLSearchParams(paramsString); searchParams.get("page"); // 4 searchParams.get("sortby"); // desc

URLSearchParams — объект не доступен в устаревших версиях браузеров, например во всех версиях IE.

Для проверки существования параметров, воспользуйтесь методом «has».

searchParams.has("limit"); // true searchParams.has("sortby"); // true searchParams.has("orderby"); // false

Для перебора всех пар ключ/значение используем метод «entries».

for(var pair of searchParams.entries())

Разбор URL из строки

Кроме всех вышеприведённых примеров, можно воспользоваться объектом URL.

var addr = new URL('https://realadmin.ru/saytostroy/?page=4&limit=10&sortby=desc#top');

Интересно, что этот объект содержит свойство «searchParams» типа «URLSearchParams», который можно использовать для извлечения GET параметров.

var addr = new URL('https://realadmin.ru/saytostroy/?page=4&limit=10&sortby=desc#top'); if (addr.searchParams.has('limit')) < let limit = addr.searchParams.get('limit'); // 10 >

Обновил статью, добавил новый способ работы с параметрами через объект URLSearchParams. Пользуйтесь 🙂

а где данные https://realadmin.ru/saytostroy/?page=4#top
которые нах. между / и ?page…?
как определить адрес конкретного файла\страницы?

Может кому пригодится
append(name, value) – добавить параметр по имени,
delete(name) – удалить параметр по имени,
get(name) – получить параметр по имени,
getAll(name) – получить все параметры с одинаковым именем name (такое возможно, например: ?user=John&user=Pete),
has(name) – проверить наличие параметра по имени,
set(name, value) – задать/заменить параметр,
sort() – отсортировать параметры по имени, используется редко

Источник