Start · Sprachen · JavaScript · Snippets · URL-Slug aus String erzeugen

URL-Slug aus String erzeugen

Strings & Regex

Macht aus einem beliebigen String einen URL-tauglichen Slug. Umlaute werden deutsch transkribiert (ä→ae, ß→ss), Akzente entfernt, Sonderzeichen ersetzt. Optional mit Maximallänge und eigenem Trennzeichen.

Code

const UMLAUTE = { ä: 'ae', ö: 'oe', ü: 'ue', ß: 'ss', Ä: 'Ae', Ö: 'Oe', Ü: 'Ue', ẞ: 'SS' };

const slugify = (input, { maxLength = 80, separator = '-' } = {}) =>
  String(input ?? '')
    // Deutsche Umlaute zuerst ersetzen, sonst würde NFD aus ä nur ein a machen
    .replace(/[äöüßÄÖÜẞ]/g, (c) => UMLAUTE[c])
    // Übrige Akzente abtrennen und entfernen (é → e, ç → c)
    .normalize('NFD')
    .replace(/[\u0300-\u036f]/g, '')
    .toLowerCase()
    // Alles außer a-z/0-9 wird zu einem einzelnen Bindestrich
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '')
    .slice(0, maxLength)
    // Nach dem Kürzen keinen Bindestrich am Ende stehen lassen
    .replace(/-+$/, '')
    .replaceAll('-', separator);

console.log(slugify('Größenänderung für Übergrößen!'));
console.log(slugify('  Café & Crème brûlée  '));
console.log(slugify('Node.js 20: Was ist neu?', { separator: '_' }));
groessenaenderung-fuer-uebergroessen cafe-creme-brulee node_js_20_was_ist_neu

Häufige Fragen

Darf ich dieses Snippet kopieren und produktiv einsetzen?

Ja — alle Code-Beispiele auf programmierung.net dürfen frei kopiert und angepasst werden. Prüfe vor dem Produktiv-Einsatz immer Edge-Cases (leere Eingaben, Encoding, Fehlerbehandlung) und die Lizenzvorgaben eingebundener Bibliotheken.

Welche JavaScript-Version wird vorausgesetzt?

Snippets zielen auf aktuelle, stabile JavaScript-Versionen. Versionsabhängige Features werden im Code oder in der Beschreibung ausgewiesen.

Wo finde ich weitere JavaScript-Snippets?

In der Seitenleiste siehst du alle Snippets dieser Sprache. Oder gehe zur JavaScript-Übersicht.