Générateur de Slug JavaScript : Solutions Vanilla JS, Node.js et Bibliothèques

Apprenez toutes les méthodes de génération de slug en JavaScript. Fonctions Vanilla JS, bibliothèques slugify et limax, intégration React et Vue.js.

Génération de Slug en JavaScript

Créer des slugs dans les applications web modernes est une opération fréquente côté frontend et backend.

Fonction 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, '-');
}

Caractères Français

function frenchSlugify(text) {
  const charMap = {'é': 'e', 'è': 'e', 'ê': 'e', 'à': 'a', 'â': 'a', 'ç': '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, '-');
}

Bibliothèques NPM

npm install slugify

import slugify from 'slugify';
const slug = slugify('Bonjour le Monde', { lower: true, strict: true });

Conclusion

JavaScript offre de nombreuses options pour créer des slugs.