😕 🐆 🤽🏿 ¿Cómo analizo una URL en JavaScript? 👨🏼‍🏭 🕘 ⌨️

¡Buen dia amigos!

Presento a su atención la traducción del artículo "Cómo analizar URL en JavaScript: nombre de host, nombre de ruta, consulta, hash" de Dmitri Pavlutin.

El localizador uniforme de recursos o URL para abreviar es un enlace a un recurso web (página web, imagen, archivo). La URL define la ubicación del recurso y cómo se recibe: el protocolo (http, ftp, mailto).

Por ejemplo, aquí está la URL de este artículo:

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

A menudo es necesario recuperar ciertos elementos de una URL. Puede ser un nombre de host (nombre de host dmitripavlutin.com) o un nombre de ruta (nombre de ruta /parse-url-javascript).

Una forma conveniente de obtener los componentes individuales de una URL es con el constructor URL().

En este artículo, hablaremos sobre la estructura y los componentes principales de una URL.

1. Estructura de la URL

Una imagen vale mas que mil palabras. En la imagen de arriba, puede ver los componentes principales de la URL:

2. Constructor de URL ()

Un constructor URL()es una función que le permite analizar (analizar) componentes de URL:

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

El argumento relativeOrAbsolutepuede ser una URL absoluta o relativa. Si el primer argumento es un enlace relativo, entonces absoluteBasese requiere el segundo argumento ,, y es la URL absoluta que es la base del primer argumento.

Por ejemplo, inicialicemos URL()con una URL absoluta:

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

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

Ahora combinemos las URL relativas y absolutas:

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

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

La propiedad de la hrefinstancia URL()devuelve la cadena de URL pasada.

Después de crear una instancia URL(), puede acceder a los componentes de la URL. Como referencia, aquí está la interfaz de la instancia 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;
}

Aquí, tipo USVStringsignifica que JavaScript debe devolver una cadena.

3. Cadena de consulta

La propiedad le url.searchpermite obtener una cadena de consulta de URL que comience con un prefijo ?:

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

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

Si no hay una cadena de consulta, url.searchdevuelve una cadena vacía (''):

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. Analizar (analizar) una cadena de consulta

En lugar de obtener la cadena de consulta original, podemos obtener sus parámetros.

La propiedad proporciona una manera fácil de hacer esto url.searchParams. El valor de esta propiedad es una instancia de la interfaz URLSeachParams.

El objeto URLSearchParamsproporciona muchos métodos para trabajar con parámetros de cadenas de consulta ( get(param), has(param)y así sucesivamente).

Tomemos un ejemplo:

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')devuelve el valor del parámetro de messagecadena de consulta.

Se url.searchParams.get('missing')vuelve a acceder a un parámetro inexistente null.

4. Nombre de host (nombre de host)

El valor de la propiedad url.hostnamees el nombre de host de la URL:

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

url.hostname // 'example.com'

5. Ruta (nombre de ruta)

La propiedad url.pathnamecontiene la ruta URL:

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

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

Si la URL no tiene ruta, url.pathnamedevuelve el carácter /:

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

url.pathname; // '/'

6. Hash

Finalmente, el hash se puede obtener a través de una propiedad url.hash:

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

url.hash // '#bottom'

Si no hay hash, url.hashdevuelve una cadena vacía (''):

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

url.hash // ''

7. Comprobando (validando) la URL

Llamar al constructor new URL()no solo crea una instancia, sino que también valida la URL pasada. Si la URL no es válida, se desecha TypeError.

Por ejemplo, http ://example.comno es una URL válida porque httphay un espacio después .

Intentemos usar esta URL:

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

Como la 'http ://example.com'URL incorrecta se new URL('http ://example.com')arroja como se esperaba TypeError.

8. Trabajar con URL

Propiedades como las que se search, hostname, pathname, hashpueden escribir.

Por ejemplo, cambiemos el nombre de host de una URL existente de red.coma 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'

Las propiedades origin, searchParamsson de solo lectura.

9. Conclusión

Un constructor URL()es una forma muy conveniente de analizar (analizar) y validar una URL en JavaScript.

new URL(relativeOrAbsolute, [, absoluteBase]toma una URL absoluta o relativa como primer parámetro. Si el primer parámetro es una URL relativa, el segundo parámetro debe ser una URL absoluta, la base del primer argumento.

Una vez instanciada URL(), puede acceder a los componentes principales de la URL:

url.search - cadena de consulta original
url.searchParams- una instancia URLSearchParamspara obtener parámetros de cadena de consulta
url.hostname - nombre de host
url.pathname - camino
url.hash - valor hash

¿Cómo analizo una URL en JavaScript?