JavaScript Slug Generator: Vanilla JS, Node.js und Bibliothekslösungen

Lernen Sie alle Methoden der Slug-Erstellung in JavaScript. Vanilla JS-Funktionen, slugify- und limax-Bibliotheken, React- und Vue.js-Integration.

Slug-Erstellung in JavaScript

Das Erstellen von Slugs ist in modernen Webanwendungen sowohl im Frontend als auch im Backend häufig erforderlich.

Vanilla JavaScript Slug-Funktion

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

Deutsche Zeichen

function germanSlugify(text) {
  const charMap = {'ä': 'ae', 'ö': 'oe', 'ü': 'ue', 'ß': 'ss'};
  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-Bibliotheken

npm install slugify

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

Fazit

JavaScript bietet viele Möglichkeiten zur Slug-Erstellung.