URL

La interfaz URL se usa para analizar, construir, normalizar y codificar las URL. Funciona proporcionando propiedades que le permiten leer y modificar fácilmente los componentes de una URL.

Normalmente creas un nuevo objeto URL especificando la URL como una cadena cuando llamas a su constructor, o proporcionando una URL relativa y una URL base. A continuación, puede leer fácilmente los componentes analizados de la URL o realizar cambios en la URL.

Si un navegador aún no es compatible con el constructor URL(), puede acceder a un objeto de URL usando la propiedad domxref("URL")}} de la interfaz Window. Asegúrese de verificar si alguno de sus navegadores de destino requiere que esto tenga un prefijo.

Nota: Esta característica está disponible en Web Workers

Constructor

URL(): Crea y devuelve un objeto URL que hace referencia a la URL especificada utilizando una cadena de URL absoluta o una cadena de URL relativa y una cadena de URL base.

Propiedades de instancia

hash (en-US): Una cadena que contiene un '#' seguido del identificador de fragmento de la URL.
host: Una cadena que contiene el dominio (que es el hostname) seguido de (si se especificó un puerto) un ':' y el puerto de la URL.
hostname (en-US): Una cadena que contiene el dominio de la URL.
href (en-US): Un stringifier (en-US) que devuelve una cadena que contiene la URL completa.
origin (en-US) Read only: Devuelve una cadena que contiene el origen de la URL, es decir, su esquema, su dominio y su puerto.
password (en-US): Una cadena que contiene la contraseña especificada antes del nombre de dominio.
pathname (en-US): Una cadena que contiene un '/' inicial seguido de la ruta de la URL, sin incluir la cadena de consulta o el fragmento.
port: Una cadena que contiene el número de puerto de la URL.
protocol (en-US): Una cadena que contiene el esquema de protocolo de la URL, incluido el ':' final.
search (en-US): Una cadena que indica la cadena de parámetros de la URL; si se proporciona algún parámetro, esta cadena los incluye a todos, comenzando con el carácter ? inicial.
searchParams (en-US) Read only: Un objeto URLSearchParams que se puede usar para acceder a los parámetros de consulta individuales que se encuentran en la búsqueda.
username (en-US): Una cadena que contiene el nombre de usuario especificado antes del nombre de dominio.

Métodos estáticos

canParse() (en-US): Devuelve un valor booleano que indica si una URL definida a partir de una cadena de URL y una cadena de URL base opcional es analizable y válida.
createObjectURL(): Devuelve una cadena que contiene una URL de un blob única, es decir, una URL con blob: como esquema, seguida de una cadena opaca que identifica de forma única el objeto en el navegador.
revokeObjectURL() (en-US): Revoca una URL de objeto creada previamente usando URL.createObjectURL().

Métodos de instancia

toString() (en-US): Devuelve una cadena que contiene la URL completa. Es un sinónimo de URL.href (en-US), aunque no se puede usar para modificar el valor.
toJSON() (en-US): Devuelve una cadena que contiene la URL completa. Devuelve la misma cadena que la propiedad href.

Notas de uso

El constructor toma un parámetro url y un parámetro base opcional para usar como base si el parámetro url es una URL relativa:

const url = new URL("../cats", "http://www.example.com/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"

El constructor generará una excepción si la URL no se puede analizar como una URL válida. Puede llamar al código anterior en un bloque try...catch o usar el método estático canParse() (en-US) para comprobar primero que la URL es válida:

if (URL.canParse("../cats", "http://www.example.com/dogs")) {
  const url = new URL("../cats", "http://www.example.com/dogs");
  console.log(url.hostname); // "www.example.com"
  console.log(url.pathname); // "/cats"
} else {
  console.log("URL invalida"); //URL invalida
}

Las propiedades de URL se pueden configurar para construir la URL:

url.hash = "tabby";
console.log(url.href); // "http://www.example.com/cats#tabby"

Las URL se codifican de acuerdo con las reglas que se encuentran en el RFC 3986. Por ejemplo:

url.pathname = "démonstration.html";
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"

La interfaz URLSearchParams se puede utilizar para crear y manipular la cadena de consulta de URL.

Para obtener los parámetros de búsqueda de la URL de la ventana actual, puede hacer esto:

// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"

El método toString() (en-US) de URL solo devuelve el valor de la propiedad href (en-US), por lo que El constructor se puede usar para normalizar y codificar una URL directamente.

const response = await fetch(
  new URL("http://www.example.com/démonstration.html"),
);

Especificaciones

Specification
URL Standard # api

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también

Polyfill de URL en core-js
API de URL (en-US)
¿Qué es una URL?
Propiedad para obtener un objeto URL: URL.
URLSearchParams.