Artículos
Javascript

Extraer partes de una URL en Javascript

21/Sep/2017

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:

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:

/^(\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():

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:

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

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

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

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

Código Fuente

Descárgate el código fuente de Extraer partes de una URL en Javascript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Suscribir
Notificar de
guest
0 Comentarios
Opiniones integradas
Ver todos los comentarios