Javascript link url href

The URL interface is used to parse, construct, normalize, and encode URLs. It works by providing properties which allow you to easily read and modify the components of a URL.

You normally create a new URL object by specifying the URL as a string when calling its constructor, or by providing a relative URL and a base URL. You can then easily read the parsed components of the URL or make changes to the URL.

If a browser doesn’t yet support the URL() constructor, you can access a URL object using the Window interface’s URL property. Be sure to check to see if any of your target browsers require this to be prefixed.

Note: This feature is available in Web Workers

Constructor

Creates and returns a URL object referencing the URL specified using an absolute URL string, or a relative URL string and a base URL string.

Instance properties

A string containing a ‘#’ followed by the fragment identifier of the URL.

A string containing the domain (that is the hostname) followed by (if a port was specified) a ‘:’ and the port of the URL.

A string containing the domain of the URL.

A stringifier that returns a string containing the whole URL.

Returns a string containing the origin of the URL, that is its scheme, its domain and its port.

A string containing the password specified before the domain name.

A string containing an initial ‘/’ followed by the path of the URL, not including the query string or fragment.

A string containing the port number of the URL.

A string containing the protocol scheme of the URL, including the final ‘:’ .

A string indicating the URL’s parameter string; if any parameters are provided, this string includes all of them, beginning with the leading ? character.

A URLSearchParams object which can be used to access the individual query parameters found in search .

A string containing the username specified before the domain name.

Static methods

Returns a boolean indicating whether or not a URL defined from a URL string and optional base URL string is parsable and valid.

Returns a string containing a unique blob URL, that is a URL with blob: as its scheme, followed by an opaque string uniquely identifying the object in the browser.

Revokes an object URL previously created using URL.createObjectURL() .

Instance methods

Returns a string containing the whole URL. It is a synonym for URL.href , though it can’t be used to modify the value.

Returns a string containing the whole URL. It returns the same string as the href property.

Usage notes

The constructor takes a url parameter, and an optional base parameter to use as a base if the url parameter is a relative URL:

const url = new URL("../cats", "http://www.example.com/dogs"); console.log(url.hostname); // "www.example.com" console.log(url.pathname); // "/cats"

The constructor will raise an exception if the URL cannot be parsed to a valid URL. You can either call the above code in a try. catch block or use the canParse() static method to first check the URL is valid:

if (URL.canParse("../cats", "http://www.example.com/dogs"))  const url = new URL("../cats", "http://www.example.com/dogs"); console.log(url.hostname); // "www.example.com" console.log(url.pathname); // "/cats" > else  console.log("Invalid URL"); //Invalid URL >

URL properties can be set to construct the URL:

.hash = "tabby"; console.log(url.href); // "http://www.example.com/cats#tabby"

URLs are encoded according to the rules found in RFC 3986. For instance:

.pathname = "démonstration.html"; console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"

The URLSearchParams interface can be used to build and manipulate the URL query string.

To get the search params from the current window’s URL, you can do this:

// https://some.site/?id=123 const parsedUrl = new URL(window.location.href); console.log(parsedUrl.searchParams.get("id")); // "123"

The toString() method of URL just returns the value of the href property, so the constructor can be used to normalize and encode a URL directly.

const response = await fetch( new URL("http://www.example.com/démonstration.html"), );

Specifications

Browser compatibility

BCD tables only load in the browser

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Объекты 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* работают хорошо.

Источник

Javascript link url href