How to convert a camel-case string to dashes in JavaScript?

Question

I want to convert these strings:

fooBar
FooBar

into:

foo-bar
-foo-bar

How would I do this in JavaScript the most elegant and performant way for any given string?

Split into an array of characters, check for uppercase characters, replace them by their lowercase pendent + the dash in front, combine the array back to a string. — Danmoreng, Dec 15 '17 at 16:34
Sure you could also use a regex with [String.replace](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) — Danmoreng, Dec 15 '17 at 16:37
i guess the most elegant- would most likely not the most performant-solution — snap, Dec 15 '17 at 16:39

score 55 · Accepted Answer · answered Dec 15 '17 at 16:38

You can use replace with a regex like:

let dashed = camel.replace(/[A-Z]/g, m => "-" + m.toLowerCase());

which matches all uppercased letters and replace them with their lowercased versions preceded by "-".

Example:

console.log("fooBar".replace(/[A-Z]/g, m => "-" + m.toLowerCase()));
console.log("FooBar".replace(/[A-Z]/g, m => "-" + m.toLowerCase()));

score 15 · Answer 2 · answered Dec 23 '20 at 19:06

15

For those who do not need the preceding hyphen:

console.log ("CamelCase".replace(/[A-Z]/g, (match, offset) => (offset > 0 ? '-' : '') + match.toLowerCase()))

answered Dec 23 '20 at 19:06

ceving

21,900
13
104
178

score 12 · Answer 3 · answered Jan 13 '20 at 22:08

12

Maybe you could use kebabCase from lodash: https://lodash.com/docs/4.17.15#kebabCase

answered Jan 13 '20 at 22:08

Luci Furtun

169
1
5

Shalitha Suranga · Answer 4 · 2017-12-15T16:56:44.963

4

You can use replace() with regex. Then use toLowerCase()

let camel = (s) => s.replace(/[A-Z]/g, '-$&').toLowerCase()

console.log(camel('fooBar'))
console.log(camel('FooBar'))

`

edited Dec 15 '17 at 16:56

answered Dec 15 '17 at 16:43

Shalitha Suranga

1,138
8
24

1

One note: you don't need to group the match. Just remove the parens and use `$&`. – ibrahim mahrir Dec 15 '17 at 16:54
@ibrahimmahrir It's nice but there is warning notice in [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch) – Shalitha Suranga Dec 15 '17 at 16:58

score 2 · Answer 5 · answered Dec 15 '17 at 16:38

2

You can use https://github.com/epeli/underscore.string#dasherizestring--string from underscore.string library.

answered Dec 15 '17 at 16:38

jkordas

155
6

I like the "Don't reinvent the wheel approach" – Timo Ernst Dec 18 '17 at 15:49

score 0 · Answer 6 · edited Jun 20 '20 at 09:12

0

EDIT

Simple case:

"fooBar".replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();   
"FooBar".replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();

Edge case: this can get an extreme case where you have a single char.

"FooBarAFooBar".replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`)

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 15 '17 at 16:38

Michele Dibenedetto

565
4
12

OP wants to include the first letter too. – ibrahim mahrir Dec 15 '17 at 16:41
hi @ibrahimmahrir thanks to let me notice that, this should fix his problem and also consider the edge case where he has a single char in capital letter. "FooBarAFooBar".replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`) – Michele Dibenedetto Dec 15 '17 at 17:04
Unnecessarily complicated regex pattern, that's why you need to separately handle single uppercase – Trash Can Dec 15 '17 at 17:17

score 0 · Answer 7 · answered Dec 15 '17 at 16:48

You can use

const makeItDashed = camelCased => {
   let dashed = ``
   camelCased.split(``).map(ch => {{dashed += ch.toUpperCase() == ch ? `-${ch.toLowerCase()}` : ch}})
   return dashed
}

console.log(makeItDashed(`fooBar`))
console.log(makeItDashed(`FooBar`))

score 0 · Answer 8 · answered Apr 24 '23 at 15:15

If you want a simple way to do that, you can use CaseParser to do that.

All you need to do is install the package to your project:

npm add caseparser

And then, use it like the following example. If you pass a string 'fooBar', you could convert it into many 'cases':

// import using ESM
import caseparser from 'caseparser';
// or using CommonJS
const caseparser = require('caseparser');

// Using CaseParser library
caseparser.camelToDash('fooBar');       // 'foo-bar'
caseparser.camelToPascal('fooBar');     // 'FooBar'
caseparser.camelToSnake('fooBar');      // 'foo_bar'
caseparser.camelToUpperDash('fooBar');  // 'FOO-BAR'
caseparser.camelToUpperSnake('fooBar'); // 'FOO_BAR'

It converts json object's keys and arrays too. For the latest versions (2.x.x) now supports typesafe after the conversion!

I hope to help you :)

How to convert a camel-case string to dashes in JavaScript?

8 Answers8

EDIT

Linked