Trabalhando com URL em JavaScript

Em JavaScript, às vezes é necessário trabalhar com endereços de links. Para isso, existe a classe URL, que permite obter e alterar partes dos endereços.

Vamos ver como ela funciona usando o seguinte endereço como exemplo:

javascriptlet path = 'http://site.ru:3000/dir/eee/page.html#show?a=1&b=2&c=3';

Vamos criar um objeto da classe URL, passando nosso endereço como parâmetro:

javascriptlet url = new URL(path);

Vamos ver quais propriedades o objeto criado possui.

Protocolo

A propriedade protocol permite obter o protocolo:

javascriptlet res = url.protocol;
console.log(res); // exibirá 'http://'

Host

A propriedade host permite obter o nome de domínio com a porta:

javascriptlet res = url.host;
console.log(res); // exibirá 'site.ru:3000'

Nome do host

A propriedade hostname permite obter o nome de domínio:

javascriptlet res = url.hostname;
console.log(res); // exibirá 'site.ru'

Porta

A propriedade port permite obter a porta:

javascriptlet res = url.port;
console.log(res); // exibirá '3000'

Caminho

A propriedade pathname permite remover o nome de domínio, obtendo o caminho:

javascriptlet res = url.pathname;
console.log(res); // exibirá '/dir/eee/page.html#show?a=1&b=2&c=3'

Hash

A propriedade hash permite obter o valor do hash:

javascriptlet res = url.hash;
console.log(res); // exibirá 'show'

Parâmetros GET

A propriedade search permite obter a string de parâmetros GET:

javascriptlet res = url.search;
console.log(res); // exibirá 'a=1&b=2&c=3'

A propriedade searchParams permite obter os parâmetros GET como um objeto da classe URLSearchParams:

javascriptlet res = url.searchParams;
console.log(res); // exibirá um objeto da classe URLSearchParams