How to Convert Text Case in JavaScript: camelCase, PascalCase, snake_case and More

Why Text Case Matters

Every programming language and ecosystem has its own naming conventions. JavaScript uses camelCase for variables, Python uses snake_case, CSS uses kebab-case, and most class names use PascalCase. When you are integrating systems — for instance, mapping a JSON API response to a TypeScript object — you often need to convert between these formats programmatically.

Common Case Formats

Name	Example	Used in
camelCase	myVariableName	JavaScript variables, JSON keys
PascalCase	MyVariableName	Classes, React components, TypeScript types
snake_case	my_variable_name	Python, Ruby, SQL
kebab-case	my-variable-name	CSS properties, HTML attributes, URL slugs
UPPER_SNAKE_CASE	MY_VARIABLE_NAME	Constants, environment variables
Title Case	My Variable Name	Headings, UI labels
Sentence case	My variable name	Prose, descriptions

The Core Algorithm

All case converters share a common first step: split the input into words. The tricky part is that words can be delimited by different separators depending on the source format.

A robust splitting approach uses a regular expression that handles camelCase, PascalCase, spaces, underscores, and hyphens:

function splitWords(input) {
  return input
    .replace(/([a-z])([A-Z])/g, "$1 $2") // camelCase → camel Case
    .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2") // ABCWord → ABC Word
    .split(/[\s_\-]+/) // split on spaces, underscores, hyphens
    .filter(Boolean)
    .map((w) => w.toLowerCase());
}

Once you have an array of lowercase words, each target format is a simple transformation:

const toCamelCase = (words) => words.map((w, i) => (i === 0 ? w : capitalise(w))).join("");

const toPascalCase = (words) => words.map(capitalise).join("");

const toSnakeCase = (words) => words.join("_");

const toKebabCase = (words) => words.join("-");

const toUpperSnake = (words) => words.join("_").toUpperCase();

const toTitleCase = (words) => words.map(capitalise).join(" ");

const capitalise = (w) => w.charAt(0).toUpperCase() + w.slice(1);

Handling Edge Cases

Acronyms and all-caps words

splitWords("parseXMLDocument") should yield ["parse", "xml", "document"], not ["parse", "x", "m", "l", "document"]. The regex ([A-Z]+)([A-Z][a-z]) handles this by splitting before the last uppercase letter in a run if a lowercase letter follows.

Numbers

Decide whether numbers start a new word. "mp3Player" splitting as ["mp3", "player"] or ["mp", "3", "player"] — both are valid depending on convention. Most implementations treat digit sequences as opaque word segments.

Non-ASCII characters

Latin-extended characters (é, ü, ñ) are not matched by [a-zA-Z]. If you need Unicode support, use the u flag with Unicode property escapes (\p{Lu}, \p{Ll}), available in modern JavaScript:

const re = /(\p{Ll})(\p{Lu})/gu;

Converting JSON Keys

A common real-world use case is converting API responses from snake_case (Python/Go backends) to camelCase (JavaScript frontend):

function keysToCamel(obj) {
  if (Array.isArray(obj)) return obj.map(keysToCamel);
  if (obj !== null && typeof obj === "object") {
    return Object.fromEntries(
      Object.entries(obj).map(([k, v]) => [toCamelCase(splitWords(k)), keysToCamel(v)])
    );
  }
  return obj;
}

This recursively walks through a nested object and converts all keys from snake_case to camelCase.

CSS Custom Properties

When working with CSS-in-JS, you often need kebab-case property names. JavaScript's element.style uses camelCase (backgroundColor), while the raw CSS stylesheet uses kebab-case (background-color). Converting between them is a frequent source of bugs — use the pattern above rather than hand-crafting per-property logic.