Every text case, explained
A “case style” is simply a set of rules for which letters are capitalised and how words are joined. Choosing the right one matters more than it sounds: headlines read better in Title Case, URLs and CSS classes expect kebab-case, Python variables prefer snake_case, and JavaScript leans on camelCase. Retyping a sentence by hand to switch between them is slow and error-prone — this converter applies the exact rule for you the moment you type.
How the conversion works
The two simple styles, UPPERCASE and lowercase, are a direct call to
the browser’s Unicode-aware toUpperCase() and toLowerCase(), so even
accented letters convert correctly. The display styles add a rule on top:
- Title Case capitalises the first letter of every word: match the first letter at each word boundary with the Unicode pattern
\b\p{L}and upper-case it, leaving spaces and punctuation untouched. - Sentence case lower-cases everything, then capitalises the first letter of the text and the first letter that follows a sentence end — a
.,!or?followed by whitespace — using the pattern(^\s*|[.!?]\s+)(\p{L}). - aLtErNaTiNg walks the string letter by letter, upper-casing even positions and lower-casing odd ones.
The four “programmer” styles all share one step: split the text into words. The converter
breaks on spaces, punctuation and case boundaries with the pattern
[^A-Za-z0-9]+ (plus a split between a lowercase and an uppercase letter, so
oldHTML is read as two words). It then re-joins those words by the rule for each
style, shown below.
The ten styles at a glance
| Style | Rule | “hello world example” |
|---|---|---|
| UPPERCASE | Every letter capital | HELLO WORLD EXAMPLE |
| lowercase | Every letter small | hello world example |
| Title Case | First letter of each word | Hello World Example |
| Sentence case | First letter of each sentence | Hello world example |
| camelCase | Join words, lower first | helloWorldExample |
| PascalCase | Join words, capital first | HelloWorldExample |
| snake_case | lower, underscores | hello_world_example |
| kebab-case | lower, hyphens | hello-world-example |
| CONSTANT_CASE | UPPER, underscores | HELLO_WORLD_EXAMPLE |
| aLtErNaTiNg | Flip case each letter | hElLo wOrLd eXaMpLe |
A worked example
Take the phrase "Color of the Sky". Title Case capitalises the first letter of
every word and gives "Color Of The Sky". To make a CSS class you want kebab-case:
the splitter produces the four words color, of, the and
sky, each lower-cased and joined with hyphens into
color-of-the-sky. Feed the same four words to camelCase — lowercase the first word,
capitalise the start of the rest, and join with no separator — and you get the variable name
colorOfTheSky, ready to paste straight into your code. PascalCase would capitalise
the first word too, giving ColorOfTheSky.