About

Kebab-case (also called dash-case or lisp-case) is the standard naming convention for CSS classes, URL slugs, and HTML attributes. A single inconsistent identifier - myComponentName instead of my-component-name - breaks CSS selectors, causes 404 errors on case-sensitive servers, and violates BEM methodology. This converter handles the four primary input patterns: camelCase, PascalCase, snake_case, and space-separated strings. It splits on uppercase boundaries using the regex pattern ([a-z\d])([A-Z]), normalizes separators, and lowercases the result. Diacritics (e.g., São → são) are preserved by default, unlike most slugify libraries that strip them. The optional condense mode collapses consecutive dashes into one, which matters when processing machine-generated identifiers that may contain artifacts like double underscores or mixed delimiters.

Limitation: this tool operates on single-string input. It does not parse entire codebases or batch-rename files. Acronyms like XMLHTTPRequest are split heuristically - the algorithm inserts breaks before uppercase letters that precede a lowercase letter, yielding xmlhttp-request. For acronym-aware splitting, manual review is recommended. The conversion is purely lexical. It does not validate whether the output is a legal CSS identifier or URL slug (e.g., leading digits remain).

Formulas

The conversion algorithm applies a deterministic pipeline of four regex transformations executed in strict order. Each stage handles a distinct structural pattern.

kebab(s) = trim(lower(R₄(R₃(R₂(R₁(s))))))

Where the four regex stages are:

R₁: ([a-z\d])([A-Z]) → $1-$2

Stage R₁ inserts a dash between a lowercase letter or digit followed by an uppercase letter. This splits standard camelCase boundaries: fooBar → foo-Bar.

R₂: ([A-Z]+)([A-Z][a-z]) → $1-$2

Stage R₂ handles consecutive uppercase sequences (acronyms). HTMLElement → HTML-Element after R₂.

R₃: [\s_.\\/]+ → -

Stage R₃ replaces all whitespace, underscores, dots, and slashes with a single dash.

R₄ (if condense): -{2,} → -

Optional stage R₄ collapses consecutive dashes into one. Applied only when the condense flag is TRUE.

Where s = input string, lower = String.prototype.toLowerCase(), trim = removal of leading and trailing dashes via ^-+|-+$.

Reference Data

Input Pattern	Example Input	Kebab Output	Convention Origin
camelCase	backgroundColor	background-color	JavaScript, Java
PascalCase	MyComponent	my-component	C#, React components
snake_case	user_first_name	user-first-name	Python, Ruby, SQL
SCREAMING_SNAKE	MAX_RETRY_COUNT	max-retry-count	Constants (C, Java)
Space Separated	Hello World	hello-world	Natural language
Dot Notation	com.example.app	com-example-app	Java packages, DNS
Mixed Delimiters	foo_bar-baz qux	foo-bar-baz-qux	Legacy code
Diacritics	São Tomé	são-tomé	Portuguese, French
Acronyms	XMLParser	xml-parser	API naming
Consecutive Uppercase	HTMLElement	html-element	DOM API
Numbers Mixed	test123Value	test123-value	Versioned identifiers
Leading Uppercase	FooBar	foo-bar	PascalCase
Single Word	hello	hello	Already valid
Already Kebab	already-kebab	already-kebab	No-op
Consecutive Dashes (condensed)	Foo----Bar	foo-bar	Condense option ON
Consecutive Dashes (raw)	Foo----Bar	foo----bar	Condense option OFF
Tabs & Newlines	foo\tbar\nbaz	foo-bar-baz	Whitespace normalization
Title Case	The Quick Brown Fox	the-quick-brown-fox	English titles

Frequently Asked Questions

The algorithm uses a two-pass regex strategy. Stage R₁ catches transitions from lowercase/digit to uppercase (inner → inner-H). Stage R₂ catches transitions within uppercase runs where the next character is lowercase (XMLHTTP → XMLHTT-P is avoided; instead XMLHTTP-Request is produced, then lowercased). The result for innerHTML is inner-html. For XMLHTTPRequest, the output is xmlhttp-request. This is a heuristic - it cannot distinguish whether XMLHTTP should be xml-http or xmlhttp without a dictionary lookup.

By default, diacritics are fully preserved. São Tomé and Príncipe becomes são-tomé-and-príncipe. If you enable the "Strip Diacritics" option, the tool applies normalize("NFD") followed by removal of Unicode combining marks in the range U+0300 to U+036F, yielding sao-tome-and-principe. Non-Latin scripts (Cyrillic, CJK) pass through lowercased but are not transliterated.

Existing dashes are treated as valid separators and left in place. Underscores, dots, slashes, and all whitespace characters (spaces, tabs, newlines) are replaced with dashes. If the input is foo_bar-baz.qux, the output is foo-bar-baz-qux. If this produces consecutive dashes (e.g., foo--bar), enable the Condense option to collapse them into a single dash.

The tool performs lexical transformation only. It does not validate the output against CSS identifier rules (which forbid leading digits, e.g., 123-foo is invalid CSS) or URL encoding requirements (which require percent-encoding of non-ASCII characters). For URL slugs, enable "Strip Diacritics" and verify no leading digits exist. For CSS classes, prepend a letter if the result starts with a digit.

Without condense, the tool preserves the exact count of dashes. Input Foo----Bar produces foo----bar because the four dashes are valid separator characters that pass through normalization unchanged. With condense enabled, the regex /-{2,}/g collapses any run of 2 or more consecutive dashes into exactly 1. This is critical when processing machine-generated strings or log data where artifact delimiters accumulate.

Yes. The tool treats each line of a multi-line input as a separate string to convert. Enter multiple strings separated by newlines, and each line is independently transformed and output on its own line. This enables batch conversion of, for example, a list of JavaScript variable names into CSS class names. Empty lines are preserved as empty lines in the output.