Gerador de Slug JavaScript: Soluções Vanilla JS, Node.js e Bibliotecas

Aprenda todos os métodos de geração de slug em JavaScript. Funções Vanilla JS, bibliotecas slugify e limax, integração React e Vue.js.

Geração de Slug em JavaScript

Criar slugs em aplicações web modernas é uma operação frequente tanto no frontend quanto no backend.

Função 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 Portugueses

function portugueseSlugify(text) {
  const charMap = {'ã': 'a', 'õ': 'o', 'á': 'a', 'é': 'e', 'ç': 'c'};
  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('Olá Mundo', { lower: true, strict: true });

Conclusão

JavaScript oferece muitas opções para criar slugs.