How to get query params javascript

URLSearchParams

The URLSearchParams interface defines utility methods to work with the query string of a URL.

An object implementing URLSearchParams can directly be used in a for. of structure to iterate over key/value pairs in the same order as they appear in the query string, for example the following two lines are equivalent:

for (const [key, value] of mySearchParams)  > for (const [key, value] of mySearchParams.entries())  > 

Note: This feature is available in Web Workers

Constructor

Returns a URLSearchParams object instance.

Instance properties

Indicates the total number of search parameter entries.

Instance methods

Appends a specified key/value pair as a new search parameter.

Deletes search parameters that match a name, and optional value, from the list of all search parameters.

Returns an iterator allowing iteration through all key/value pairs contained in this object in the same order as they appear in the query string.

Allows iteration through all values contained in this object via a callback function.

Returns the first value associated with the given search parameter.

Returns all the values associated with a given search parameter.

Returns a boolean value indicating if a given parameter, or parameter and value pair, exists.

Returns an iterator allowing iteration through all keys of the key/value pairs contained in this object.

Sets the value associated with a given search parameter to the given value. If there are several values, the others are deleted.

Sorts all key/value pairs, if any, by their keys.

Returns a string containing a query string suitable for use in a URL.

Returns an iterator allowing iteration through all values of the key/value pairs contained in this object.

Examples

const paramsString = "q=URLUtils.searchParams&topic=api"; const searchParams = new URLSearchParams(paramsString); // Iterating the search parameters for (const p of searchParams)  console.log(p); > console.log(searchParams.has("topic")); // true console.log(searchParams.has("topic", "fish")); // false console.log(searchParams.get("topic") === "api"); // true console.log(searchParams.getAll("topic")); // ["api"] console.log(searchParams.get("foo") === null); // true console.log(searchParams.append("topic", "webdev")); console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=api&topic=webdev" console.log(searchParams.set("topic", "More webdev")); console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=More+webdev" console.log(searchParams.delete("topic")); console.log(searchParams.toString()); // "q=URLUtils.searchParams" 

// Search parameters can also be an object const paramsObj =  foo: "bar", baz: "bar" >; const searchParams = new URLSearchParams(paramsObj); console.log(searchParams.toString()); // "foo=bar&baz=bar" console.log(searchParams.has("foo")); // true console.log(searchParams.get("foo")); // "bar" 

Duplicate search parameters

const paramStr = "foo=bar&foo=baz"; const searchParams = new URLSearchParams(paramStr); console.log(searchParams.toString()); // "foo=bar&foo=baz" console.log(searchParams.has("foo")); // true console.log(searchParams.get("foo")); // bar, only returns the first value console.log(searchParams.getAll("foo")); // ["bar", "baz"] 

No URL parsing

The URLSearchParams constructor does not parse full URLs. However, it will strip an initial leading ? off of a string, if present.

const paramsString1 = "http://example.com/search?query=%40"; const searchParams1 = new URLSearchParams(paramsString1); console.log(searchParams1.has("query")); // false console.log(searchParams1.has("http://example.com/search?query")); // true console.log(searchParams1.get("query")); // null console.log(searchParams1.get("http://example.com/search?query")); // "@" (equivalent to decodeURIComponent('%40')) const paramsString2 = "?query=value"; const searchParams2 = new URLSearchParams(paramsString2); console.log(searchParams2.has("query")); // true const url = new URL("http://example.com/search?query=%40"); const searchParams3 = new URLSearchParams(url.search); console.log(searchParams3.has("query")); // true 

Preserving plus signs

The URLSearchParams constructor interprets plus signs ( + ) as spaces, which might cause problems. In the example below, we use hexadecimal escape sequences to mimic a string containing binary data (where every byte carries information) that needs to be stored in the URL search params. Note how the encoded string produced by btoa() contains + and isn’t preserved by URLSearchParams .

const rawData = "\x13à\x17@\x1F\x80"; const base64Data = btoa(rawData); // 'E+AXQB+A' const searchParams = new URLSearchParams(`bin=$base64Data>`); // 'bin=E+AXQB+A' const binQuery = searchParams.get("bin"); // 'E AXQB A', '+' is replaced by spaces console.log(atob(binQuery) === rawData); // false 

You can avoid this by encoding the data with the encodeURIComponent() .

const rawData = "\x13à\x17@\x1F\x80"; const base64Data = btoa(rawData); // 'E+AXQB+A' const encodedBase64Data = encodeURIComponent(base64Data); // 'E%2BAXQB%2BA' const searchParams = new URLSearchParams(`bin=$encodedBase64Data>`); // 'bin=E%2BAXQB%2BA' const binQuery = searchParams.get("bin"); // 'E+AXQB+A' console.log(atob(binQuery) === rawData); // true 

Empty value vs. no value

URLSearchParams doesn’t distinguish between a parameter with nothing after the = , and a parameter that doesn’t have a = altogether.

const emptyVal = new URLSearchParams("foo=&bar=baz"); console.log(emptyVal.get("foo")); // returns '' const noEquals = new URLSearchParams("foo&bar=baz"); console.log(noEquals.get("foo")); // also returns '' console.log(noEquals.toString()); // 'foo=&bar=baz' 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 26, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Как разобрать URL в JavaScript?

Представляю Вашему вниманию перевод заметки «How to Parse URL in JavaScript: hostname, pathname, query, hash» автора Dmitri Pavlutin.

Унифицированный указатель ресурса или, сокращенно, URL — это ссылка на веб-ресурс (веб-страницу, изображение, файл). URL определяет местонахождения ресурса и способ его получения — протокол (http, ftp, mailto).

Например, вот URL данной статьи:

https://dmitripavlutin.com/parse-url-javascript 

Часто возникает необходимость получить определенные элементы URL. Это может быть название хоста (hostname, dmitripavlutin.com ) или путь (pathname, /parse-url-javascript ).

Удобным способом получить отдельные компоненты URL является конструктор URL() .

В этой статье мы поговорим о структуре и основных компонентах URL.

1. Структура URL

Изображение лучше тысячи слов. На представленном изображении Вы можете видеть основные компоненты URL:

2. Конструктор URL()

Конструктор URL() — это функция, позволяющая разбирать (парсить) компоненты URL:

const url = new URL(relativeOrAbsolute [, absoluteBase]) 

Аргумент relativeOrAbsolute может быть абсолютным или относительным URL. Если первый аргумент — относительная ссылка, то второй аргумент, absoluteBase , является обязательным и представляет собой абсолютный URL — основу для первого аргумента.

Например, инициализируем URL() с абсолютным URL:

const url = new URL('http://example.com/path/index.html') url.href // 'http://example.com/path/index.html' 

Теперь скомбинируем относительный и абсолютный URL:

const url = new URL('/path/index.html', 'http://example.com') url.href // 'http://example.com/path/index.html' 

Свойство href экземпляра URL() возвращает переданную URL-строку.

После создания экземпляра URL() , Вы можете получить доступ к компонентам URL. Для справки, вот интерфейс экземпляра URL() :

Здесь тип USVString означает, что JavaScript должен возвращать строку.

3. Строка запроса (query string)

Свойство url.search позволяет получить строку запроса URL, начинающуюся с префикса ? :

const url = new URL( 'http://example.com/path/index.html?message=hello&who=world' ) url.search // '?message=hello&who=world' 

Если строка запроса отсутствует, url.search возвращает пустую строку (»):

const url1 = new URL('http://example.com/path/index.html') const url2 = new URL('http://example.com/path/index.html?') url1.search // '' url2.search // '' 

3.1. Разбор (парсинг) строки запроса

Вместо получения исходной строки запроса, мы можем получать ее параметры.

Легкий способ это сделать предоставляет свойство url.searchParams . Значением данного свойства является экземпляр интерфейса URLSeachParams.

Объект URLSearchParams предоставляет множество методов для работы с параметрами строки запроса ( get(param), has(param) и т.д.).

Давайте рассмотрим пример:

const url = new Url( 'http://example.com/path/index.html?message=hello&who=world' ) url.searchParams.get('message') // 'hello' url.searchParams.get('missing') // null 

url.searchParams.get(‘message’) возвращает значение параметра message строки запроса.

Доступ к несуществующему параметру url.searchParams.get(‘missing’) возвращает null .

4. Название хоста (hostname)

Значением свойства url.hostname является название хоста URL:

const url = new URL('http://example.com/path/index.html') url.hostname // 'example.com' 

5. Путь (pathname)

Свойство url.pathname содержит путь URL:

const url = new URL('http://example.com/path/index.html?param=value') url.pathname // '/path/index.html' 

Если URL не имеет пути, url.pathname возвращает символ / :

const url = new URL('http://example.com/'); url.pathname; // '/' 

6. Хеш (hash)

Наконец, хеш может быть получен через свойство url.hash :

const url = new URL('http://example.com/path/index.html#bottom') url.hash // '#bottom' 

Если хеш отсутствует, url.hash возвращает пустую строку (»):

const url = new URL('http://example.com/path/index.html') url.hash // '' 

7. Проверка (валидация) URL

При вызове конструктора new URL() не только создается экземпляр, но также осуществляется проверка переданного URL. Если URL не является валидным, выбрасывается TypeError .

Например, http ://example.com не валидный URL, поскольку после http имеется пробел.

Попробуем использовать этот URL:

Поскольку ‘http ://example.com’ неправильный URL, как и ожидалось, new URL(‘http ://example.com’) выбрасывает TypeError .

8. Работа с URL

Такие свойства, как search, hostname, pathname, hash доступны для записи.

Например, давайте изменим название хоста существующего URL с red.com на blue.io :

const url = new URL('http://red.com/path/index.html') url.href // 'http://red.com/path/index.html' url.hostname = 'blue.io' url.href // 'http://blue.io/path/index.html' 

Свойства origin, searchParams доступны только для чтения.

9. Заключение

Конструктор URL() является очень удобным способом разбора (парсинга) и проверки (валидации) URL в JavaScript.

new URL(relativeOrAbsolute, [, absoluteBase] в качестве первого параметра принимает абсолютный или относительный URL. Если первый параметр является относительным URL, вторым параметром должен быть абсолютный URL — основа для первого аргумента.

После создания экземпляра URL() , Вы можете получить доступ к основным компонентам URL:

• url.search — исходная строка запроса
• url.searchParams — экземпляр URLSearchParams для получения параметров строки запроса
• url.hostname — название хоста
• url.pathname — путь
• url.hash — значение хеша

Источник