Día 4 de 24: slugify
4 de diciembre de 2025

Día 4 de 24: slugify

Las 24 funciones antes de navidad

Por Asdrúbal Chirinos

Seguimos avanzando en esta serie donde cada día sumamos una pequeña herramienta útil para cualquier proyecto. Ayer trabajamos con removeDiacritics, una función clave para limpiar texto de manera sólida. Hoy retomamos ese trabajo para construir algo que muchos sistemas necesitan a diario: generar slugs seguros para URL.

Día 3 de 24: removeDiacritics Las 24 funciones antes de navidad 3 de diciembre de 2025
Día 3 de 24: removeDiacritics

slugify

Esta función convierte cualquier cadena en un slug apto para usarse en rutas y enlaces. Resuelve un problema habitual: transformar títulos, nombres o frases en identificadores limpios, predecibles y consistentes.
Además, se apoya en removeDiacritics (vista en el día anterior) para asegurar que incluso textos con acentos o caracteres especiales se normalicen correctamente antes de procesarlos.

Es especialmente útil en blogs, catálogos, buscadores y APIs, y destaca porque:

  • Elimina diacríticos usando removeDiacritics.
  • Convierte todo a minúsculas.
  • Sustituye cualquier secuencia no alfanumérica por un separador configurable.
  • Evita separadores repetidos.
  • Limpia el inicio y el final del resultado.

Esto la vuelve más completa y fiable que soluciones rápidas o nativas.

Código de la función

/**
 * Convierte una cadena en un slug seguro para URL (ASCII, minúsculas, guiones).
 * Elimina diacríticos y caracteres no alfanuméricos, colapsa múltiples separadores.
 * @param {string} str Cadena fuente.
 * @param {object} [options]
 * @param {string} [options.separator='-'] Separador a usar.
 * @returns {string}
 */
export function slugify(str, options = {}) {
  if (typeof str !== 'string') return '';
  const { separator = '-' } = options;
  const cleaned = removeDiacritics(str)
    .toLocaleLowerCase('es-ES')
    .replace(/[^a-z0-9]+/g, separator)
    .replace(new RegExp(`${separator}{2,}`, 'g'), separator)
    .replace(new RegExp(`^${separator}|${separator}$`, 'g'), '');
  return cleaned;
}
import { removeDiacritics } from './removeDiacritics.js';

Cómo usarla

Caso básico

slugify('Hola Mundo');
// Resultado: "hola-mundo"

Con diacríticos

slugify('Canción número 1');
// Resultado: "cancion-numero-1"

Usando un separador personalizado

slugify('Título Especial para URL', { separator: '_' });
// Resultado: "titulo_especial_para_url"

Texto con símbolos o puntuación

slugify('Nuevas ofertas!!! Edición 2025 ???');
// Resultado: "nuevas-ofertas-edicion-2025"

Mañana continuaremos con otra función que sigue construyendo este pequeño conjunto de herramientas para proyectos modernos. Gracias por seguir día a día este recorrido.

Compartir:

¿Te gustó este artículo? Apoya mi trabajo y ayúdame a seguir creando contenido.

Cómprame un café