Cómo construir un acortador de URL simple con solo HTML y JavaScript

Es posible que haya utilizado un acortador de URL antes, como bit.ly, goo.gl. Son útiles para acortar URL largas para que pueda compartirlas fácilmente con sus amigos, familiares o compañeros de trabajo.

Quizás se pregunte cómo funcionan estas cosas. Para entender cómo, debemos analizar más de cerca un acortador de URL, ¡así que crearemos uno simple! Con esa tarea, aprenderemos algunas cosas nuevas y comprenderemos cómo funciona un acortador de URL.

Hoy, crearemos un acortador de URL simple que no necesita un sistema de base de datos para alojarlo. En su lugar, usaremos jsonstore.io. Asumiré que ya sabe algo de HTML y JavaScript básicos.

Entonces, sin más preámbulos, comencemos a construir. . .

Comience con el HTML

Solo necesitaremos un cuadro de entrada de texto, un botón y una etiqueta de secuencia de comandos para crear nuestro acortador de URL.

Primero cree un archivo HTML llamado index.html, ya que solo se necesitan esos dos elementos (un cuadro de entrada de texto y un botón).

Así que comencemos a agregar nuestros tres elementos principales:

   Short The URL  

Como les mostré en el código anterior, he creado un archivo HTML simple. Dentro de las etiquetas corporales, solo hay tres elementos: una input, una buttony una script.

El primer elemento es inputdonde escribiremos / pegaremos nuestra URL larga. Le di un nombre de identificación urlinputpara que fuera fácil de acceder en JavaScript.

El siguiente elemento es a button. Cuando hacemos clic en este botón, nuestra URL larga se acortará ya que tiene una onclickfunción que se ejecutará cuando hagamos clic en el botón. Y dentro de la shorturl()función habrá comandos necesarios para acortar la URL.

Al final tenemos un scriptllamado main.jsdonde estará todo nuestro código JavaScript principal. La shorturl()función mencionada anteriormente también estará allí.

Entonces, por ahora, nuestra parte HTML está completa. Comencemos a escribir algo de JavaScript

Empiece a escribir JavaScript

Como mostramos anteriormente, necesitaremos algo de JavaScript para crear nuestro acortador de URL.

Paso 0: como mencioné, usaremos jsonstore.io para almacenar información sobre nuestra URL larga. Necesitaremos una URL de punto final jsonstore.io para almacenar datos, por lo que puede visitar jsonstore.io donde verá algo como a continuación:

Debajo del texto Este es su punto final , puede ver un cuadro de texto con una URL larga como esta:

//www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1

Haga clic en el botón COPY violeta .

Así que ahora, comencemos a escribir algo de JavaScript. . .

Cree un archivo JavaScript llamado main.jsy comience a seguir los pasos a continuación.

Primero, debemos mantener el enlace copiado como variable:

var endpoint = "//www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1";

Luego, necesitamos generar una cadena aleatoria para que podamos crear un enlace entre la URL corta y la URL larga.

Supongamos que tenemos una URL aleatoria abcd, nuestro acortador de URL simple está alojado en //shortner.com y hemos acortado la URL //google.com con esa URL aleatoria. Por lo tanto, siempre que vayamos a //shortner.com/#abcd, seremos redirigidos a //google.com.

Entonces, ahora crearemos una función llamada getrandom():

function getrandom(){ var random_string = Math.random().toString(32).substring(2, 5) + Math.random().toString(32).substring(2, 5); return random_string()}

No se preocupe, lo ayudaré a comprender el código anterior.

Primero, iniciamos una función llamada getrandom. Luego inicializamos una variable llamada random_stringy le dimos un valor.

Mathes un objeto Javascript integrado que nos permite realizar tareas matemáticas con números. Primero llamamos a la randomfunción de Math, Math.random()devuelve un número aleatorio entre 0 (inclusive) y 1 (exclusivo).

Puede obtener más información sobre el Mathobjeto desde aquí.

Luego transformamos el número devuelto en una cadena usando toString()y le damos un argumento de 32 para que obtengamos una cadena adecuada, no binaria, hexadecimal u octal.

Luego usamos substring(2,5)también para cortar la cuerda y mantener el tamaño de la cuerda. Luego, nuevamente seguimos el mismo procedimiento para obtener otro fragmento de una cadena aleatoria, y finalmente agregamos ambos fragmentos de la cadena usando +.

Y no olvide agregar una returndeclaración que devuelva nuestra cadena aleatoria.

Recuerde, esta no es la única forma de generar cadenas aleatorias. También puede utilizar el método mencionado a continuación para lograr el objetivo:
function getrandom() { var text = “”; var possible = “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789”; 
 for (var i = 0; i < 5; i++) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text;}

Ahora regrese index.htmly agregue JQuery porque será más fácil lograr nuestros objetivos si usamos JQuery. Agréguelo al final de la etiqueta del cuerpo pero antes de la main.jsetiqueta del script.

Ahora vuelve de nuevo a main.js.

Creemos una función llamada geturlque tomará el valor del cuadro de entrada, lo verificará y devolverá el valor:

function geturl(){ var url = document.getElementById(“urlinput”).value; var protocol_ok = url.startsWith(“//”) || url.startsWith(“//”) || url.startsWith(“ftp://”); if(!protocol_ok){ newurl = “//”+url; return newurl; }else{ return url; }

En la geturlfunción, primero almacenamos el valor del cuadro de entrada en la urlvariable. Luego verificamos si los protocolos de URL están bien o no. Si el protocolo no comienza con //, //o ftp://lo agregamos //al principio de la URL, devuelve la URL.

En realidad, este no es un método seguro. ¡Debería usar una expresión regular para validar sus URL! Pero quiero que este artículo sea fácil de entender.

Ahora necesitaremos otra función para cambiar el hash en la barra de ubicación, así que vamos a crearla:

function genhash(){ if (window.location.hash == “”){ window.location.hash = getrandom(); }}

Al principio, verificamos si la ubicación del hash está vacía. Si está vacío, agregamos un hash aleatorio a la barra de ubicación.

Example: if our URL is //example.com/#abcd then the value of window.location.hash will be #abcd.

Next, we’ll work on our main function shorturl() , so let’s go…

function shorturl(){ var longurl = geturl(); genhash(); send_request(longurl);}

First we store the long URL in the longurl variable. Then we add a random hash to the location bar so that we can use the URL as the short URL. Next we call the send_request() with an argument longurl. In this function we send a JSON request to jsonstore to store the long URL with a link to short URL. So now let’s create the send_request() function.

function send_request(url) { this.url = url; $.ajax({ ‘url’: endpoint + “/” + window.location.hash.substr(1), ‘type’: ‘POST’, ‘data’: JSON.stringify(this.url), ‘dataType’: ‘json’, ‘contentType’: ‘application/json; charset=utf-8’ })}

Here we use JQuery to send the JSON request to endpoint+”/” + our random string hash from the location bar. As an example:

//www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1/abcd

So whenever we send a get request to the above-mentioned URL, we’ll get the long URL as data.

Important: add the send_request() function before the shorturl() function, otherwise it will not work.

To know more about JQuery’s Ajax function, go HERE. To know more about JSON, go HERE.

Now we will use the code to GET the long URL linked to the short URL entered in the address bar:

var hashh = window.location.hash.substr(1)
if (window.location.hash != "") { $.getJSON(endpoint + "/" + hashh, function (data) { data = data["result"];
if (data != null) { window.location.href = data; }
});

Then the above-mentioned code will be executed whenever we put the short URL in the address bar (eg. //shorturl.com/#abcd ).

First, we store the hash value from the URL in the hashh variable.

Example: if our short URL is //shorted.com/#abcd , the value of the hash will be #abcd.

Then we check if the hash location is empty or not. If it’s not empty we send a get request to the address, endpoint + hashh.

Example : //www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1/abcd

And as usual, if everything is okay we will get the long URL from the data which is JSON array data, and from that we extract the result with data["result"].

The value of data will be similar to this {"result":longurl,"ok":true} , where the long URL is the URL you shortened.

Our URL shortener is almost complete! Copy-paste a long URL in the input box then click the Shorten The URL button! Copy the link from the address bar — it’s your short URL!

Some Useful Tricks

  • We can add a function to automatically copy the short URL when a user clicks the Shorten The URL button using libraries like SimpleCopy, or ClipboardJS — they’ll copy the short URL which is currently in the location bar.
  • If using SimpleCopy, we can add simplecopy(window.location.href); at the end of the shorturl() function to copy the short URL whenever it shortens a URL.
  • This simple URL shortener relies on third-party libs such as jsonstore so it would not be a good idea to shorten some confidential long URL with it.
  • You can host the whole project in Github/Gitlab pages and set up a simple CNAME. That’s it — your brand new personal URL shortener is ready! You can use any static site hosting service to host your URL shortener.
  • You can find the full source code of the project on GITHUB

That’s it for today! This is my first technical guide, so I apologize for any mistakes.

If you find any problems or mistakes, let me know in the comments below ?.

Or ping ee on Facebook or Twitter!

Peace!