Generador de Slug JavaScript: Soluciones Vanilla JS, Node.js y Bibliotecas

Aprende todos los métodos de generación de slug en JavaScript. Funciones Vanilla JS, bibliotecas slugify y limax, integración con React y Vue.js.

Generación de Slug en JavaScript

Crear slugs en aplicaciones web modernas es una operación frecuente tanto en frontend como backend.

Función Slug Vanilla JavaScript

function slugify(text) {
  return text
    .toString()
    .normalize('NFD')
    .replace(/[\u0300-\u036f]/g, '')
    .toLowerCase()
    .trim()
    .replace(/\s+/g, '-')
    .replace(/[^\w\-]+/g, '')
    .replace(/\-\-+/g, '-');
}

Caracteres Españoles

function spanishSlugify(text) {
  const charMap = {'ñ': 'n', 'á': 'a', 'é': 'e', 'í': 'i', 'ó': 'o', 'ú': 'u'};
  let slug = text;
  for (const [key, value] of Object.entries(charMap)) {
    slug = slug.replace(new RegExp(key, 'g'), value);
  }
  return slug.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/-+/g, '-');
}

Bibliotecas NPM

npm install slugify

import slugify from 'slugify';
const slug = slugify('Hola Mundo', { lower: true, strict: true });

Conclusión

JavaScript ofrece muchas opciones para crear slugs.