Cómo Convertir un Texto en un Slug con JavaScript

Introducción

Cuando trabajamos en el desarrollo web, uno de los desafíos comunes es crear URLs limpias y fáciles de leer que representen el contenido de nuestras páginas o artículos. Los "slugs" son cadenas de texto que se utilizan en las URLs para describir de manera concisa el contenido de una página.

Por ejemplo, si tienes un título de artículo como "Cómo crear un slug en JavaScript", el slug correspondiente podría ser "como-crear-un-slug-en-javascript". En este artículo, te mostraré cómo crear una función en JavaScript que convierte un texto en un slug optimizado para URLs.

¿Qué es un Slug?

Un slug es la parte de una URL que aparece después del dominio y que describe el contenido de esa página de forma amigable. Un buen slug debe ser:

• Claro y descriptivo.
• Utilizar guiones en lugar de espacios.
• Estar en minúsculas.
• Evitar caracteres especiales que puedan interferir con las URL.

La Función en JavaScript

A continuación, se presenta una función que toma un texto de un campo de entrada (input), lo convierte en un slug y lo coloca en otro campo de entrada.

function string_to_slug(str, querySelector){
    // Eliminar espacios al inicio y final
    str = str.replace(/^\s+|\s+$/g, '');
    
    // Convertir todo a minúsculas
    str = str.toLowerCase();
    
    // Definir caracteres especiales y sus reemplazos
    var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
    var to = "aaaaeeeeiiiioooouuuunc------";
    
    // Reemplazar caracteres especiales por los correspondientes en 'to'
    for (var i = 0, l = from.length; i < l; i++) {
        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
    }
    
    // Eliminar caracteres no alfanuméricos y reemplazar espacios por guiones
    str = str.replace(/[^a-z0-9 -]/g, '')
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-');
    
    // Asignar el slug generado al campo de entrada correspondiente
    document.querySelector(querySelector).value = str;
}

Explicación Paso a Paso

1. Eliminar Espacios al Principio y Final:

La función comienza eliminando los espacios en blanco al inicio y al final del texto con la expresión regular ^\s+|\s+$.

str = str.replace(/^\s+|\s+$/g, '');

2. Convertir el Texto a Minúsculas:

Para garantizar que el slug sea uniforme y consistente, se convierte toda la cadena a minúsculas.

str = str.toLowerCase();

3. Reemplazar Caracteres Especiales:

Los caracteres especiales como las tildes y las eñes no son amigables para las URLs. En esta parte, se mapea un conjunto de caracteres con acento o especiales a sus versiones más simples.

var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
var to = "aaaaeeeeiiiioooouuuunc------";
for (var i = 0, l = from.length; i < l; i++) {
    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
}

Esto reemplaza, por ejemplo, la "á" con "a", la "ç" con "c", y así sucesivamente.

4. Eliminar Caracteres No Permitidos:

La expresión regular [^a-z0-9 -] elimina cualquier carácter que no sea una letra, un número, un guion o un espacio.

str = str.replace(/[^a-z0-9 -]/g, '');

5. Reemplazar Espacios por Guiones:

En los slugs, los espacios se reemplazan por guiones - para garantizar que la URL sea legible y válida.

str = str.replace(/\s+/g, '-');

6. Eliminar Guiones Duplicados:

Finalmente, se eliminan los guiones duplicados, si los hubiera, usando la expresión regular /-+/g.

str = str.replace(/-+/g, '-');

7. Asignar el Slug al Input:

Una vez que se ha generado el slug, se asigna al valor de un campo de entrada en el HTML, que es especificado mediante el selector CSS querySelector.

document.querySelector(querySelector).value = str;

Ejemplo de Uso

Supongamos que tienes un formulario con dos campos de entrada: uno para el título de un artículo y otro para el slug. El HTML podría verse algo así:

<input type="text" id="title" placeholder="Escribe el título" oninput="string_to_slug(this.value, '#slug')" />
<input type="text" id="slug" placeholder="Slug generado" />

En este ejemplo, cada vez que el usuario escriba en el campo del título, la función string_to_slug se ejecutará y el slug correspondiente se generará y se colocará en el campo del slug.

Conclusión

La función string_to_slug que has creado es una excelente herramienta para transformar cualquier texto en un formato amigable para URLs, garantizando que los caracteres no válidos o especiales sean reemplazados de manera adecuada. Es útil en sistemas de gestión de contenido, blogs, y en cualquier aplicación que necesite generar URLs legibles y SEO-friendly.

Este tipo de transformaciones son muy comunes en aplicaciones web modernas y son esenciales para mejorar la experiencia del usuario y la optimización en motores de búsqueda (SEO).