Generar una URL Amigable (Slug) usando un determinado Texto con JavaScript

Javascript Tutoriales

Demo Github

Si has usado WordPress u otra plataforma o entorno similar en donde al colocar el Titulo de un Post se genera automáticamente una URL amigable o slug por ejemplo: nubecolectiva.com/postres/gelatina-de-fresa en este artículo te voy a enseñar como hacer esto con JavaScript y colocarlo en un campo de texto de un formulario HTML, vamos con este Post.

Antes de continuar con este Post te invito a escuchar el Podcast: “Que Hacer Cuando Estamos En Casa”:

Spotify:

Sound Cloud:

Bien ahora continuemos con el Post: Generar una URL Amigable (Slug) usando un determinado Texto con JavaScript.

Las URLs amigables o slugs son muy importantes para mostrar una página con un determinado contenido, los especialistas en SEO suelen resaltar mucho su importancia en el Posicionamiento en buscadores como Google, Bing, etc.

Lo que haré primero es crear una función JavaScript llamada crearURL(), en el código he colocado comentarios para explicar que hace cada línea del código:

Ahora voy a crear un formulario simple, con los campos titulo, url (solo lectura) y contenido.

En el código HTML puedes ver que en el campo titulo estoy llamando a la función JavaScript crearURL() en los eventos onload y onkeyup.

Pasamos el valor del campo titulo usando this.value dentro de la función crearURL(this.value) y con eso queda listo el formulario, ahora cuando escribimos un texto en el campo titulo, se generará una url amigable en el campo url,  esta URL amigable (slug) la puedes guardar en la base de datos o usarla como desees.

Al inicio de este Tutorial, hay una Demo en donde puedes ver y probar como funciona la aplicación.

Conclusión

Existen muchas formas de crear URL amigables (slug) en JavaScript, también otros Desarrolladores lo suelen hacer con un lenguaje de programación de lado del servidor como Python, Ruby, PHP, etc.

Esta forma es una la cual te puede ayudar y servir de guía para los proyectos en donde necesites crear URL amigables (slug) con JavaScript.

Nota(s)

  • Los códigos expuestos en este Post pueden quedar obsoletos, ser modificados o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a JavaScript. 
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenido.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required

Comentarios

avatar
  Subscribirse  
Notificar a