Text Case Converter — Free HTML CSS JS Snippet

Naming conventions across programming languages and writing contexts vary wildly — a database column might use snake_case, a JavaScript variable camelCase, a React component PascalCase, and a URL slug kebab-case, all describing conceptually the same identifier. This snippet converts one input into all ten common conventions at once, so you never have to guess or manually retype an identifier when moving between contexts that expect different casing.

One tokenizer, ten output formats

The core of this tool is a single tokenize() function that all ten conversions share. Rather than writing ten separate parsing functions, tokenize() normalizes *any* input format — whether it's already camelCase, snake_case, space-separated Title Text, or a messy mix like jumps_over-the LAZY dog — down to a plain array of lowercase words, and every casing function just re-joins that same word array differently.

Splitting camelCase boundaries with a lookbehind-style regex

The trickiest part of tokenizing is correctly splitting camelCase or PascalCase input into separate words, since there's no delimiter character to split on — only a case change. tokenize() handles this with str.replace(/([a-z0-9])([A-Z])/g, '$1 $2'), which finds every position where a lowercase letter or digit is immediately followed by an uppercase letter and inserts a space between them. This correctly splits quickBrownFox into quick Brown Fox before the rest of the pipeline lowercases everything, but deliberately does *not* split consecutive uppercase letters (like an acronym) apart from each other — a hyphen and underscore and dot separator pass, str.replace(/[_\-.]+/g, ' '), before the final trim() and split(/\s+/) normalize everything down to single space-separated lowercase words.

Building each case style from the same word array

Once tokenize() produces a clean array of lowercase words, every conversion is a short, purely mechanical join: toCamel() lowercases the first word and capitalizes every word after it with no separator; toPascal() capitalizes every word including the first with no separator; toSnake(), toKebab(), toConstant(), and toDot() join with _, -, _ (then uppercase), and . respectively; toTitle() capitalizes every word and joins with spaces; toSentence() capitalizes only the very first letter of the joined phrase. Because every function operates on the same pre-tokenized word list, the mapping between formats stays perfectly consistent — there's no risk of one conversion function handling an edge case (like a leading number or a run of capital letters) differently from another.

Live, simultaneous conversion of every format

Rather than requiring you to pick a target format from a dropdown, update() recomputes and displays all ten conversions on every keystroke by iterating the shared cases list and calling each format's converter function against the same raw input. Each row gets its own copy button that grabs exactly that row's rendered value — useful when you need to paste the same identifier into several different files or contexts (a database migration, a component file, a CSS class name) in quick succession without re-running the tool for each one.