Navigate back to the homepage

How to convert a string to camel case in typescript?

Infinitbility
TypeScript
April 11th, 2022 · 1 min read
keep affilitate

Hi Friends 👋,

Welcome to Infinitbility ❤️!

Today, I’m going to show you how can we convert normal string text to camel case in typescript,

If you are using lodash then you have to just use their available camel case convert method.

1_.camelCase('Foo Bar');
2// → 'fooBar'
3
4_.camelCase('--foo-bar--');
5// → 'fooBar'
6
7_.camelCase('__FOO_BAR__');
8// → 'fooBar

but in this article, we are going to create a custom function that converts text to camelCase text.

So, let’s create it.

Convert string case to camel case

1/**
2 * Convert string case to camel case
3 *
4 * @param str
5 * @returns camelcase string
6 */
7export const camelize = (str: string) => {
8 return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
9 if (+match === 0) return ""; // or if (/\s+/.test(match)) for white spaces
10 return index === 0 ? match.toLowerCase() : match.toUpperCase();
11 });
12};

Now, we have created a function that will return the camelcase string.

let’s see how we can able to use it.

1/**
2 * Convert string case to camel case
3 *
4 * @param str
5 * @returns camelcase string
6 */
7const camelize = (str: string) => {
8 return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
9 if (+match === 0) return ""; // or if (/\s+/.test(match)) for white spaces
10 return index === 0 ? match.toLowerCase() : match.toUpperCase();
11 });
12};
13
14camelize('FooBar');
15// → 'fooBar'
16
17camelize('foo bar');
18// → 'fooBar'

Output

TypeScript, convert string case to camel case example
TypeScript, convert string case to camel case example

All the best 👍.

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

melio affilitate

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

How to convert object keys to array in typescript?

TypeScript, convert object keys to array example.

April 9th, 2022 · 1 min read

How to convert object values to array in typescript?

TypeScript, convert object values to array example.

April 9th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]