Convert between camelCase and kebab-case — interview question

CSS property names are written in kebab-case (background-color), while the same properties in JavaScript's element.style and in React's style prop use camelCase (backgroundColor). Convert each given name to the other style.

If a name contains -, it is kebab-case: remove each dash and upper-case the letter that followed it.
Otherwise it is camelCase: put a dash before every upper-case letter and lower-case that letter.

Constraints

1 ≤ n ≤ 1000
Each name is 1–60 characters of ASCII letters and digits (plus dashes for kebab-case).
kebab-case names are all lower case, with no leading, trailing or double dashes; camelCase names start with a lower-case letter.

Input and output

Input: Line 1: n Next n lines: one name each
Output: n lines: the converted names.

Examples

Input 1

3
backgroundColor
font-size
border-top-left-radius

Output

background-color
fontSize
borderTopLeftRadius

camelCase becomes kebab-case and kebab-case becomes camelCase.

Input 2

2
zIndex
max-width

Output

z-index
maxWidth

Two more style names.

Show hints

Two short regular expressions with replacer functions are enough.

Show the explanation

Both directions are one replace call each:

JavaScript

const toKebab = s => s.replace(/[A-Z]/g, ch => '-' + ch.toLowerCase());
const toCamel = s => s.replace(/-([a-z0-9])/g, (_, ch) => ch.toUpperCase());

The rule "a dash before every capital" means acronyms split letter by letter (getHTTPStatus → get-h-t-t-p-status), which is why style guides recommend writing acronyms like words (getHttpStatus). Digits have no upper case, so toUpperCase leaves them alone.

Original UniCircle question. Last reviewed 22 Oct 2026.