Extraer partes de una URL en Javascript

21/Sep/2017 JavaScript

Vamos a utilizar expresiones regulares y la desestructuración de arrays para poder extraer partes de una URL en Javascript de una forma sencilla.

Lo primero será tener una cadena que contenga la URL:

  1. var url = 'https://www.manualweb.net/java/tipos-datos-primitivos/';

De esta URL vamos a extraer 3 partes: la primera será el protocolo de la URL, segunda será el nombre del servidor y la tercera el path dentro del servidor.

La expresión regular que nos va a ayudar a analizar la URL será la siguiente:

  1. /^(\w+):\/\/([^\/]+)([^]+)$/

Los grupos que queramos extraer serán aquellos que van entre paréntesis. Para ello indicamos que nos extraiga cualquier palabra antes del :// para obtener el protocolo, esto lo haremos mediante el código (\w+), todo lo que vaya hasta la primera barra / será el nombre del servidor, como el nombre del servidor puede tener números, letras, guiones, puntos,... indicaremos que será cualquier carácter hasta la barra: ([^\/]+). La parte final, que podrá tener cualquier carácter será la que nos deje el path: ([^]+).

Tras ejecutar esta expresión regular mediante el comando .exec():

  1. var url_analizada = /^(\w+):\/\/([^\/]+)([^]+)$/.exec(url);

Veremos que la salida es un array de la siguiente forma:

[ 'https://www.manualweb.net/java/tipos-datos-primitivos/',
'https',
'www.manualweb.net',
'/java/tipos-datos-primitivos/',
index: 0,
input: 'https://www.manualweb.net/java/tipos-datos-primitivos/' ]

Veremos que obviando la primera posición, en las siguientes tenemos los datos que vamos buscando. Es por ello que mediante la desestructuración del array en Javascript vamos a obtener estas variables:

  1. var [,protocolo,servidor,path] = url_analizada;

Estas variables las podemos analizar y utilizar de forma separada dentro de nuestro código fuente:

  1. console.log('Protocolo: ' + protocolo);
  2. console.log('Servidor: ' + servidor);
  3. console.log('Path: ' + path);

De esta forma tan sencilla hemos conseguido extraer partes de una URL en Javascript.

Vídeos sobre Javascript