Extraer partes de una URL en Javascript

21/Sep/2017 JavaScript Deja un comentario

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


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*