Analice fácilmente las URL en JavaScript con parse-url

En esta guía práctica y sencilla, aprenda cómo analizar fácilmente las URL en JavaScript usando parse-url. ¡Obtenga el dominio, el nombre de host, los parámetros de consulta y más en una sola línea de código!

Introducción

El análisis de URL es una tarea común durante el desarrollo web, y también una que parece simple pero puede volverse compleja. No es frecuente que te encuentres con un módulo que hace que el análisis sea tan fácil que no tengas que pensar mucho por ti mismo.

A pesar de ser relativamente joven (publicado en junio de 2021), con casi 3 millones de descargas semanales, analizar-url es uno de los principales módulos para analizar URL en JavaScript.

En este artículo, vamos a echar un vistazo a todas sus posibilidades y cómo nos hace la vida más fácil.

Partes de una URL

Una URL tiene muchas partes, por lo que dividirla en partes sin un análisis puro de cadenas es una herramienta poderosa. Cada URL tiene las mismas partes principales, y otras partes son opcionales según la consulta o la acción.

Los elementos constitutivos de una URL son:

  • Esquema: se utiliza para identificar el protocolo que se utiliza para obtener el recurso en Internet.
    • Some of the more popular protocols are: HTTP, HTTPS, IP, ICMP, TCP, UDP, etc.
  • Host - el nombre del host que tiene el recurso que estamos obteniendo (www.somehost.com)
  • Ruta: la ruta al recurso ubicado en el host (www.somehost.com/path/to/index.html)
  • Cadena de consulta: cadena que contiene pares clave-valor (www.somehost.com/index?key=value&key2=value2)

Estos son los fragmentos principales de la URL, pero veremos que podemos recuperar aún más con parse-url, en un formato muy legible y de nuevo, analizable.

Instalación y configuración del módulo parse-url

Comenzamos creando una carpeta para nuestro mini proyecto llamada parse_url. En la carpeta, podemos instalar el módulo usando npm:

1
$ npm i parse-url

Para usar el módulo en nuestro código (en el archivo index.js), debemos requerirlo:

1
const parseUrl = require('parse-url');

¡Eso es todo, estamos listos para irnos! Veamos qué ofrece este módulo.

Analizando la URL

Para comenzar, tomemos una URL simple: https://wikihtp.com. El constructor de parseUrl toma dos parámetros, string_url y normalize, siendo normalize opcional.

De forma predeterminada, se establece en falso y se supone que las URL que se proporcionan ya están normalizadas. Cuando es verdadero, transforma una URL no normalizada en una normalizada. Por ejemplo:

1
someRandomUrl.com:80 --> http://someRandomUrl.com

Esto se llama normalización de URL. El módulo parse-url basa su normalización en el módulo normalize-url y el módulo normalize-url funciona exactamente como se muestra arriba.

Analicemos una URL:

1
2
3
4
const url = 'https://wikihtp.com/';
const parsedUrl = parseUrl(url);

console.log(parsedUrl)

La salida del código estará en formato JSON, que consta de los elementos de esa URL:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  protocols: [ 'https' ],
  protocol: 'https',
  port: null,
  resource: 'www.wikihtp.com',
  user: '',
  pathname: '',
  hash: '',
  search: '',
  href: 'https://wikihtp.com',
  query: [Object: null prototype] {}
}

Como puede ver, se extrajeron muchas cosas, aunque algunas están vacías ya que la URL que proporcionamos es bastante simple. Echemos un vistazo a los elementos en este JSON:

  • protocolos - lista de protocolos usados ​​en la URL (puede ser más uno)
  • protocolo - primero de protocolos
  • port - un puerto (si se proporciona)
  • recurso - el host
  • user - user at the host's server ([correo electrónico protegido])
  • pathname - ruta al recurso
  • hash - si se proporciona, información después del # (hash) - generalmente se ancla en una página web
  • buscar - una cadena de consulta
  • href - la URL completa

Se encuentra un ejemplo interesante usando los enlaces de GitHub, que fueron una de las razones por las que se creó este módulo en primer lugar. Los enlaces de GitHub pueden volverse bastante complejos y complicados en comparación con otras URL que ve a diario, y pueden incluir múltiples protocolos y usuarios:

1
2
3
4
const url = 'git+ssh://[correo electrónico protegido]/path/to/resource.git';
const parsedUrl = parseUrl(url);

console.log(parsedUrl)

Esto resulta en:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  protocols: [ 'git', 'ssh' ],
  protocol: 'git',
  port: null,
  resource: 'somehost.com',
  user: 'git',
  pathname: '/path/to/resource.git',
  hash: '',
  search: '',
  href: 'git+ssh://[correo electrónico protegido]/path/to/resource.git',
  query: [Object: null prototype] {}
}

El protocolo de lista aquí ha cambiado, ya que hay múltiples protocolos en uso. Sin embargo, se hace referencia al primero al imprimir la información de la URL. También podemos ver que pathname ahora está lleno con la ruta al recurso.

{.icon aria-hidden=“true”}

Uno de los puntos de venta de parse-url es el hecho de que funciona tan bien con las URL de Git.

Subamos realmente la URL e incluyamos un hash y un par de consultas clave-valor:

1
2
3
4
const url = 'git+ssh://[correo electrónico protegido]:30/path/to/resource.git?key1=value1&key2=value2#anchor';
const parsedUrl = parseUrl(url);

console.log(parsedUrl)

Este ejemplo difiere del anterior solo un poco, lo suficiente para llenar los valores vacíos en el ejemplo anterior. La salida será:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  protocols: [ 'git', 'ssh' ],
  protocol: 'git',
  port: 30,
  resource: 'somehost.com',
  user: 'git',
  pathname: '/path/to/resource.git',
  hash: 'anchor',
  search: 'key1=value1&key2=value2',
  href: 'git+ssh://[correo electrónico protegido]:30/path/to/resource.git?key1=value1&key2=value2#anchor',
  query: [Object: null prototype] { key1: 'value1', key2: 'value2' }
}

El puerto, el hash y la consulta están presentes ahora, ¡e incluso tenemos las claves y los valores para la consulta! Tener los datos analizados estructurados en un formato legible por humanos, que también es universalmente aceptado y fácil de analizar, es una gran ayuda al analizar las URL.

Sin embargo, esta es solo la salida bastante impresa del objeto devuelto. Lo que nos permite realmente trabajar con estos elementos analizados es el hecho de que todos son campos del objeto devuelto, a los que podemos acceder fácilmente:

1
2
3
4
5
6
7
8
console.log("The protocols used in the URL are " + parsedUrl.protocols);
console.log("The port used in the URL is " + parsedUrl.port);
console.log("The resource in the URL is " + parsedUrl.resource);
console.log("The user in the URL is " + parsedUrl.user);
console.log("The pathname in the URL is " + parsedUrl.pathname);
console.log("The hash in the URL is " + parsedUrl.hash);
console.log("The search part in the URL is " + parsedUrl.search);
console.log("Full URL is " + parsedUrl.href);

Ejecutar este código da como resultado:

1
2
3
4
5
6
7
8
The protocols used in the URL are git,ssh
The port used in the URL is 30
The resource in the URL is somehost.com
The user in the URL is git
The pathname in the URL is /path/to/resource.git
The hash in the URL is anchor
The search part in the URL is key1=value1&key2=value2
Full URL is git+ssh://[correo electrónico protegido]:30/path/to/resource.git?key1=value1&key2=value2#anchor

Finalmente, veamos los resultados de la normalización de URL. Si pasamos una URL no normalizada, como wikihtp.com:3000/path/to/index.html#anchor, como una cadena de URL:

1
2
3
const url = 'wikihtp.com:3000/path/to/index.html#anchor';
const parsedUrl = parseUrl(url, true);
console.log(parsedUrl);

Esto resulta en:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  protocols: [ 'http' ],
  protocol: 'http',
  port: 3000,
  resource: 'wikihtp.com',
  user: '',
  pathname: '/path/to/index.html',
  hash: 'anchor',
  search: '',
  href: 'https://wikihtp.com:3000/path/to/index.html#anchor',
  query: [Object: null prototype] {}
}

Podemos ver que el analizador asignó automáticamente http como protocolo y completó la propiedad href correctamente. Las partes que faltan no se completan, ya que, para empezar, no se suministraron.

Si tuviéramos que deshabilitar la función de normalización, mientras proporcionamos una URL no normalizada, los resultados estarían mal:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  protocols: [],
  protocol: 'file',
  port: null,
  resource: '',
  user: '',
  pathname: 'wikihtp.com:3000/path/to/index.html',
  hash: 'anchor',
  search: '',
  href: 'wikihtp.com:3000/path/to/index.html#anchor',
  query: [Object: null prototype] {}
}

{.icon aria-hidden=“true”}

Nota: Si estableces normalize en true y proporcionas una URL ya normalizada, en realidad no sucede nada y se analiza correctamente. Dado esto, normalmente querrá establecer el parámetro en verdadero.

Dado que parsedUrl es un objeto, sus propiedades se pueden cambiar. Simplemente podemos acceder a cualquier propiedad y cambiarla:

1
2
3
console.log(parsedUrl.port) // 3000
parsedUrl.port = 4000
console.log(parsedUrl.port) // 4000

Sin embargo, este no es el comportamiento deseado y no debe hacerse, ya que este módulo se usa únicamente para analizar las URL. La única vez que debe modificar el objeto parsedUrl de esta manera es cuando está seguro del valor de alguna propiedad, de lo contrario, podría estar disparándose a sí mismo.

Conclusión

Hemos visto que parse-url nos permite analizar URL con bastante facilidad sin ningún procesamiento adicional y hace que el proceso de análisis de URL sea extremadamente simple y legible.

Divide todo según lo deseado y crea un objeto parsedUrl al que se puede acceder como cualquier otro objeto, así como modificarlo. El módulo es tan simple como parece, con un resultado y una sintaxis prolijos y lo más sencillo posible, lo que da como resultado resultados rápidos y precisos. cisos.