Kebab-Zeichensatzkonverter – Kostenloses Online-Tool
Was ist Kebab-Zeichensatzkonverter?
Kebab-Case (kebab-case) ist eine Namenskonvention, bei der Wörter durch Bindestriche verbunden und alle Buchstaben in Kleinbuchstaben umgewandelt werden. Das Ergebnis sieht so aus: this-is-kebab-case – die Wörter werden durch Bindestriche aneinandergereiht und ähneln so den Zutaten auf einem Kebab-Spieß.
Es ist das Standardformat für CSS-Klassennamen, URL-Slugs, HTML-ID- und Datenattribute sowie Dateinamen in vielen Web-Frameworks. Dieses Tool wandelt jede Eingabe – einfachen Text, camelCase, snake_case oder PascalCase – in eine saubere, URL-sichere Kebab-Case-Ausgabe um, die Sie sofort verwenden können.
Wann verwenden Kebab-Zeichensatzkonverter?
Verwenden Sie Kebab-Case für CSS-Klassennamen und Selektoren im BEM-Stil, URL-Slugs für Blogbeiträge und Produktseiten, HTML-Datenattribute sowie Konfigurationsschlüssel in YAML-Dateien. Frontend-Entwickler, die zwischen den „camelCase“-Eigenschaftsnamen in JavaScript und den entsprechenden „Kebab-Case“-Bezeichnungen in CSS wechseln (z. B. backgroundColor → background-color), nutzen dieses Tool regelmäßig.
SEO-Experten, die saubere URL-Slugs generieren, werden es hilfreich finden – Suchmaschinen behandeln Bindestriche als Worttrennzeichen, wodurch Kebab-Case von Natur aus SEO-freundlich ist. Für die Generierung von URL-Slugs mit zusätzlicher Bereinigung probieren Sie den URL-Slug-Generator aus. Für die Benennung in Python oder Datenbanken verwenden Sie den Snake-Case-Konverter.
So wird das Tool verwendet
- 1Enter your text or phrase
- 2Click 'Convert' to get kebab-case
- 3Copy your URL-friendly slug
Das Tool entfernt Sonderzeichen, wandelt alle Zeichen in Kleinbuchstaben um und ersetzt Leerzeichen, Unterstriche, Punkte und Trennzeichen bei „camelCase“ durch Bindestriche. Das Ergebnis ist stets eine saubere Zeichenfolge in Kleinbuchstaben, die durch Bindestriche getrennt ist.
Beispiele
| Input | Output |
|---|---|
| Hello World | hello-world |
| backgroundColor | background-color |
| my_variable_name | my-variable-name |
| The Quick Brown Fox | the-quick-brown-fox |
| user_id_column | user-id-column |
Regeln & Verhalten
- Alle Wörter werden in Kleinbuchstaben umgewandelt. Unabhängig vom Eingabeformat – Großbuchstaben, Titelschreibung, CamelCase – wird jeder Buchstabe in der Ausgabe als Kleinbuchstabe dargestellt.
- Wörter werden durch Bindestriche (-) getrennt. Leerzeichen, Unterstriche, Punkte und Groß-Kleinschreibung nach dem „camelCase“-Schema werden durch einfache Bindestriche ersetzt, um ein einheitliches „kebab-case“-Format zu erzielen.
- Sonderzeichen und Satzzeichen werden entfernt. Es bleiben nur Buchstaben (a–z), Zahlen (0–9) und Bindestriche übrig, sodass die Ausgabe sicher in URLs, CSS-Selektoren und HTML-Attributen verwendet werden kann.
Verwandte Tools
Häufig gestellte Fragen
Was ist ein Kebab-Case?
„kebab-case“ ist eine Namenskonvention, bei der Wörter vollständig in Kleinbuchstaben geschrieben und durch Bindestriche getrennt werden, wie beispielsweise „my-component-name“. Dies erinnert an Zutaten, die auf einen Schaschlikspieß aufgereiht sind. Es ist der Standard für CSS-Klassennamen, HTML-Attribute, URL-Pfade und Dateinamen in vielen Web-Frameworks, darunter Angular und Ember.
Wann wird „kebab-case“ verwendet?
CSS-Klassennamen (.nav-bar, .btn-primary), HTML-ID-Attribute, URL-Slugs (/blog/my-post-title), Bezeichner in Lisp und Clojure, Selektoren für Angular-Komponenten sowie YAML-Konfigurationsschlüssel verwenden alle Kebab-Case. Es ist zudem die Standardeinstellung für npm-Paketnamen und viele CLI-Befehlsnamen.
Ist „kebab-case“ dasselbe wie „spinal-case“ oder „lisp-case“?
Ja, sie sind identisch – alle Wörter in Kleinbuchstaben, durch Bindestriche getrennt. Die Bezeichnung variiert je nach Community: Webentwickler sprechen von „Kebab-Case“, Lisp-Programmierer von „Lisp-Case“, und manche nennen es „Spinal-Case“. Unser Tool liefert dieselbe Ausgabe, unabhängig davon, wie man es nennt.
Warum eignet sich „kebab-case“ gut für URLs?
Suchmaschinen wie Google behandeln Bindestriche als Worttrennzeichen, sodass URLs im Kebab-Case (z. B. /best-free-tools) korrekt als separate Schlüsselwörter indexiert werden. Unterstriche in URLs im Snake-Case werden hingegen als Wortverbinder behandelt, weshalb Bindestriche die bessere Wahl für SEO-freundliche URL-Slugs sind.
Kann ich PascalCase in Kebab-Case umwandeln?
Ja. Das Tool erkennt Übergänge zwischen Groß- und Kleinbuchstaben in Eingaben im PascalCase- und camelCase-Format und fügt an jeder Grenze Bindestriche ein. So wird beispielsweise aus „MyComponentName“ „my-component-name“ und aus „backgroundColor“ „background-color“.