👨🏿‍🤝‍👨🏽 🐍 🤰🏻 Como analiso um URL em JavaScript? 🙊 ☝🏻 🗼

Bom dia amigos!

Apresento a sua atenção a tradução do artigo "Como analisar URL em JavaScript: hostname, pathname, query, hash" de Dmitri Pavlutin.

O Uniform Resource Locator ou URL para abreviar é um link para um recurso da web (página da web, imagem, arquivo). A URL define a localização do recurso e como ele é recebido - protocolo (http, ftp, mailto).

Por exemplo, este é o URL deste artigo:

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

Freqüentemente, é necessário recuperar certos elementos de um URL. Pode ser um nome de host (hostname, dmitripavlutin.com) ou um caminho (pathname, /parse-url-javascript).

Uma maneira conveniente de obter os componentes individuais de um URL é com o construtor URL().

Neste artigo, falaremos sobre a estrutura e os principais componentes de um URL.

1. Estrutura de URL

Uma imagem vale mais que mil palavras. Na imagem acima, você pode ver os principais componentes do URL:

2. Construtor de URL ()

Um construtor URL()é uma função que permite analisar (analisar) componentes de URL:

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

O argumento relativeOrAbsolutepode ser um URL absoluto ou relativo. Se o primeiro argumento for um link relativo, o segundo argumento ,, absoluteBaseserá obrigatório e será a URL absoluta que é a base para o primeiro argumento.

Por exemplo, inicialize URL()com um URL absoluto:

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

url.href // 'http://example.com/path/index.html'

Agora vamos combinar os URLs relativos e absolutos:

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

url.href // 'http://example.com/path/index.html'

A propriedade da hrefinstância URL()retorna a string de URL passada.

Depois de criar uma instância URL(), você pode acessar os componentes do URL. Para referência, aqui está a interface da instância URL():

interface URL {
  href:     USVString;
  protocol: USVString;
  username: USVString;
  password: USVString;
  host:     USVString;
  hostname: USVString;
  port:     USVString;
  pathname: USVString;
  search:   USVString;
  hash:     USVString;

  readonly origin: USVString;
  readonly searchParams: URLSearchParams;

  toJSON(): USVString;
}

Aqui, o tipo USVStringsignifica que o JavaScript deve retornar uma string.

3. String de consulta

A propriedade url.searchpermite que você obtenha uma string de consulta de URL começando com um prefixo ?:

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

url.search // '?message=hello&who=world'

Se não houver string de consulta, ele url.searchretornará uma string vazia (''):

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. Analisando (analisando) uma string de consulta

Em vez de obter a string de consulta original, podemos obter seus parâmetros.

Uma maneira fácil de fazer isso é fornecida pela propriedade url.searchParams. O valor desta propriedade é uma instância da interface URLSeachParams.

O objeto URLSearchParamsfornece muitos métodos para trabalhar com parâmetros de string de consulta ( get(param), has(param)e assim por diante).

Vamos dar um exemplo:

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')retorna o valor do parâmetro da messagestring de consulta.

Acessar um parâmetro inexistente url.searchParams.get('missing')retorna null.

4. Nome do host (nome do host)

O valor da propriedade url.hostnameé o nome do host do URL:

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

url.hostname // 'example.com'

5. Caminho (nome do caminho)

A propriedade url.pathnamecontém o caminho do URL:

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

url.pathname // '/path/index.html'

Se o URL não tiver caminho, ele url.pathnameretornará o caractere /:

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

url.pathname; // '/'

6. Hash

Por fim, o hash pode ser obtido por meio de uma propriedade url.hash:

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

url.hash // '#bottom'

Se não houver hash, ele url.hashretorna uma string vazia (''):

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

url.hash // ''

7. Verificando (validando) URL

Chamar o construtor new URL()não apenas cria uma instância, mas também valida a URL passada. Se o URL não for válido, ele é jogado fora TypeError.

Por exemplo, http ://example.comnão é um URL válido porque httphá um espaço depois .

Vamos tentar usar este URL:

try {
    const url = new URL('http ://example.com')
} catch (error) {
    error // TypeError, "Failed to construct URL: Invalid URL"
}

Como o 'http ://example.com'url errado está sendo new URL('http ://example.com')exibido conforme o esperado TypeError.

8. Trabalhando com URL

Propriedades como search, hostname, pathname, hashsão graváveis.

Por exemplo, vamos alterar o nome do host de um URL existente de red.compara 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'

As propriedades origin, searchParamssão somente leitura.

9. Conclusão

Um construtor URL()é uma maneira muito conveniente de analisar (analisar) e validar um URL em JavaScript.

new URL(relativeOrAbsolute, [, absoluteBase]usa um URL absoluto ou relativo como o primeiro parâmetro. Se o primeiro parâmetro for um URL relativo, o segundo parâmetro deve ser um URL absoluto - a base para o primeiro argumento.

Uma vez instanciado URL(), você pode acessar os principais componentes do URL:

url.search - string de consulta original
url.searchParams- uma instância URLSearchParamspara obter parâmetros de string de consulta
url.hostname - nome de anfitrião
url.pathname - caminho
url.hash - valor hash

Como analiso um URL em JavaScript?