kebab-case Converter

The converter recognises words separated by spaces, underscores, existing hyphens or line breaks, plus camelCase humps where a small letter is followed by a capital. It lowercases everything and joins the words with one hyphen each. Doubled hyphens and hyphens at either end disappear.

That makes it quick for turning a JavaScript property such as backgroundColor into its CSS name, background-color, or a component name into a file name.

This is a case converter, not a slug generator. It doesn't remove punctuation or accents, and some of what it leaves causes real problems in a web address:

For blog post and page addresses, remove the punctuation first, or use a slug tool that strips it and converts accented letters for you.

Kebab-case is the normal style for CSS classes, HTML data attributes and custom properties. Two things to watch:

• A class name can't start with a digit unless it is escaped in the stylesheet, so 10-tips-for-seo works as a URL but not as a plain class selector. Put a word in front.
• Leading hyphens are removed. Typing --leading-dash gives leading-dash, so if you are naming a command-line flag or a CSS custom property, add the -- back after converting.

Acronyms are lowercased and stay joined to the following word when there's no lowercase letter between them: XMLHttpRequest becomes xmlhttp-request.

Line breaks are separators, so a pasted list comes out as one long name, with Home Page and About Us on two lines giving home-page-about-us. To convert several names at once, put them on one line separated by a comma or a slash, both of which are kept, then split the output: Home Page/About Us gives home-page/about-us.