Trabajo con URL en JavaScript

En JavaScript, a veces es necesario trabajar con direcciones de enlaces. Para ello, está diseñada la clase URL, que permite obtener y modificar partes de las direcciones.

Veamos su funcionamiento con el ejemplo de la siguiente dirección:

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

Creemos un objeto de la clase URL, pasándole como parámetro nuestra dirección:

javascriptlet url = new URL(path);

Veamos qué propiedades tiene el objeto creado.

Protocolo

Usando la propiedad protocol se puede obtener el protocolo:

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

Host

Usando la propiedad host se puede obtener el nombre del dominio con el puerto:

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

Nombre del host

Usando la propiedad hostname se puede obtener el nombre del dominio:

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

Puerto

Usando la propiedad port se puede obtener el puerto:

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

Ruta

Usando la propiedad pathname se puede descartar el nombre del dominio, obteniendo la ruta:

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

Hash

Usando la propiedad hash se puede obtener el valor del hash:

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

Parámetros GET

Usando la propiedad search se puede obtener la cadena de parámetros GET:

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

Usando la propiedad searchParams se puede obtener los parámetros GET en forma de objeto de la clase URLSearchParams:

javascriptlet res = url.searchParams;
console.log(res); // mostrará un objeto de la clase URLSearchParams