JavaScript: obtenga la URL y los componentes actuales (protocolo, dominio, puerto, ruta, consulta, hash)

En este tutorial, veremos cómo obtener la URL actual en JavaScript, incluidos sus componentes, como el protocolo, el dominio, el puerto, la ruta, la consulta y el hash.

Introducción

En este tutorial, veremos cómo obtener la URL actual de una página HTML cargada, usando JavaScript.

En primer lugar, echemos un vistazo a una URL:

1
https://wikihtp.com:8080/category/article-title.html?searchterm=Example+title#2

Es una URL inventada, que contiene varios componentes - el protocolo, dominio, puerto, ruta, consulta y hash.

Si desea evitar manejar el análisis de URL manualmente, especialmente con formatos de URL más complejos como el de Git, siga leyendo Cómo analizar fácilmente URL en JavaScript con parse-url!

Componentes de URL

La URL que hemos definido consta de diferentes segmentos, divididos por ciertos caracteres especiales como /, ? y #. Cada uno de estos segmentos es un componente de URL:

  • Protocolo: el protocolo de una URL se refiere al segmento de URL que define qué protocolo se utiliza para la transferencia de datos. En nuestro caso, estamos usando https://, lo que significa el protocolo HTTPS.

  • Dominio - El dominio, también conocido como el nombre de host de una URL, se refiere a la sección anterior de una URL: www.wikihtp.com.

  • Puerto: la sección de puerto de una URL se especifica después del dominio, precedida por :. La mayoría de las veces, el puerto no es público, por lo que rara vez lo verá en las aplicaciones implementadas, pero muy comúnmente en la fase de desarrollo.

  • Ruta: la sección de ruta de una URL sigue al nombre de dominio y al puerto. Especifica un solo recurso en un sitio web, una página HTML, una imagen o algún otro tipo de archivo o directorio. En nuestro ejemplo, la ruta hace referencia al segmento /category/article-title.html, lo que significa que apunta al archivo article-title.html en el servidor.

  • Consulta: la consulta es una cadena que generalmente se usa para habilitar búsquedas internas en un sitio web. La sección de consulta hace referencia a la sección ?articleTitle=Example+title de la URL de ejemplo y es el resultado de que el usuario ingrese el término de búsqueda Example title en la página article-title.html del sitio web.

  • Almohadilla: la sección hash generalmente se usa para representar un ancla en la página, que comúnmente es un encabezado, pero puede ser cualquier otro <div> o etiqueta, dado que apuntamos a su atributo id . En nuestro caso, apuntamos a #2, desplazando la vista del usuario a la etiqueta con id=2.

En términos generales, las URL tienen una estructura bastante estandarizada, donde ciertos elementos son opcionales, mientras que otros no lo son:

1
<protocol>//<domain>:<port>/<path>/<query><hash>

Ahora, podemos echar un vistazo más de cerca a cómo acceder a la URL actual, así como a cada uno de sus componentes usando JavaScript.

Cómo obtener la URL actual en JavaScript

En JavaScript, el objeto Ubicación contiene la información sobre la URL de la página web actualmente cargada. Pertenece a ventana, sin embargo, podemos acceder a ella directamente porque ventana está ubicada jerárquicamente en la parte superior del alcance

Para obtener la URL actual, aprovecharemos el objeto Ubicación y recuperaremos su propiedad href:

1
2
var url = window.location.href
console.log(url)

Esto resulta en:

1
https://wikihtp.com:8080/python/article-title.html?searchterm=Example+title#2

La propiedad href contiene la URL completa del recurso cargado actualmente. Si desea recuperar algunos componentes determinados, en lugar de la URL completa, el objeto “Ubicación” también tiene varias propiedades.

Obtener URL de origen

La propiedad window.location.origin devuelve la URL base (protocolo + nombre de host + número de puerto) de la URL actual:

1
console.log(window.location.origin)
1
https://wikihtp.com:8080

Obtener protocolo URL

La propiedad window.location.protocol devuelve el protocolo utilizado por la URL actual:

1
console.log(window.location.protocol)
1
https://

Obtener host de URL y nombre de host

La propiedad window.location.host devuelve el nombre de host y el número de puerto de la URL actual:

1
console.log(window.location.host)
1
www.wikihtp.com:8080

Por otro lado, la propiedad window.location.hostname devuelve el nombre de host de la URL actual:

1
console.log(window.location.hostname)
1
www.wikihtp.com

Obtener puerto URL

La propiedad window.location.port devuelve el número de puerto de la URL actual:

1
console.log(window.location.port)
1
8080

OBTENER URL Ruta

La propiedad window.location.pathname devuelve la sección de ruta de la URL actual:

1
console.log(window.location.pathname)
1
/category/article-title.html

Obtener consulta de URL y hash

La propiedad window.location.search devuelve **la sección de consulta ** de la URL actual:

1
console.log(window.location.search)
1
?searchterm=Example+title

La propiedad window.location.hash devuelve la sección hash de la URL actual:

1
console.log(window.location.hash)
1
#2

Conclusión

Como hemos visto, JavaScript proporciona una forma poderosa, pero simple, de acceder a la URL actual. El objeto ‘Ubicación’, al que se accede mediante la interfaz ‘Ventana’, nos permite obtener no solo la representación de cadena de la URL actual, sino también cada sección de la misma.

The Location object also can change and manipulate the current URL, así como redirigir la página a la nueva URL.