CODEWITHSUNDEEP
javascriptarraysstringcamelcasingkebab-case
Robert Hovhannisyan
Robert Hovhannisyan

Reputation: 3341

Convert kebab-case to camelCase with JavaScript

Say I have a function that transforms kebab-case to camelCase:

camelize("my-kebab-string") === 'myKebabString';

I'm almost there, but my code outputs the first letter with uppercase too:

function camelize(str){
  let arr = str.split('-');
  let capital = arr.map(item=> item.charAt(0).toUpperCase() + item.slice(1).toLowerCase());
  let capitalString = capital.join("");

  console.log(capitalString);
}
    
camelize("my-kebab-string");

Upvotes: 38

Views: 30026

Answers (5)

kanine
kanine

Reputation: 1108

You can also try regex.

camelize = s => s.replace(/-./g, x=>x[1].toUpperCase())


const camelize = s => s.replace(/-./g, x=>x[1].toUpperCase())
const words = ["stack-overflow","camel-case","alllowercase","allcapitalletters","custom-xml-parser","api-finder","json-response-data","person20-address","user-api20-endpoint"];
console.log(words.map(camelize));

Looks only for hyphen followed by any character, and capitalises it and replaces the hyphen+character with the capitalised character.

Upvotes: 92

Gopal Lohar
Gopal Lohar

Reputation: 183

so I tried both array-string and regex but regex is slower !

const string = " background-color: red; \n color: red;\n z-index: 10"

// regex
console.time("regex")
let property = string
const camelProp = property.replace(/(-[a-z])/, (g) => {
  return g.replace("-", "").toUpperCase()
})
console.timeEnd("regex")

// custom
console.time("custom")
const str = string
let strNew = str
  .split("-")
  .map((e) => {
    return e[0].toUpperCase() + e.slice(1)
  })
  .join("")

console.timeEnd("custom")

console.log(camelProp)
console.log(strNew)

Upvotes: 0

briosheje
briosheje

Reputation: 7446

To keep your existing code, I've just added a check on the index that will return item instead of the transformed item if item is 0 (falsy), since the problem is just that you are upper-casing the first item as well, while you shouldn't.

In a nutshell, the inline expression becomes: (item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item, because:

  • If index is not falsy (so, if index is > 0 in your context), the capitalized string is returned.
  • Otherwise, the current item is returned.

Of course, this could be cleaner and likely single line, but I wanted to stay as close as possible to your code so that you could understand what was wrong:

function camelize(str){
  let arr = str.split('-');
  let capital = arr.map((item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item.toLowerCase());
  // ^-- change here.
  let capitalString = capital.join("");

  console.log(capitalString);
}

camelize("my-kebab-string");

As a side note, you could've found a potential cleaner answer here: Converting any string into camel case

Upvotes: 14

Benny67b
Benny67b

Reputation: 557

For lodash users:

_.camelCase('my-kebab-string') => 'myKebabString'

Upvotes: 5

FonzTech
FonzTech

Reputation: 408

The first method is to just transform to lower case the first entry of your capital array, like this:

capital[0] = capital[0].toLowerCase();

Another method, which I think to be more efficient, is to pass another parameter to the map callback, which is the index. Take a look at this for further reading: https://www.w3schools.com/jsref/jsref_map.asp

So you transform to upper case only if (index > 0). Like this:

let capital = arr.map((item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item);

Upvotes: 2

Related Questions