Генератор Slug JavaScript: Рішення Vanilla JS, Node.js та бібліотеки

Вивчіть усі методи створення slug у JavaScript. Функції Vanilla JS, бібліотеки slugify та limax, інтеграція React та Vue.js.

Створення Slug у JavaScript

Створення slug у сучасних веб-додатках - часта операція як на фронтенді, так і на бекенді.

Функція 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, '-');
}

Українські символи

function ukrainianSlugify(text) {
  // Транслітерація
  const charMap = {'і': 'i', 'ї': 'yi', 'є': 'ye', 'ґ': 'g'};
  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, '-');
}

NPM бібліотеки

npm install slugify

import slugify from 'slugify';
const slug = slugify('Привіт Світ', { lower: true, strict: true });

Висновок

JavaScript пропонує багато варіантів для створення slug.