How to Convert Pascal Case to Sentence Case in Javascript
Jasser Mark Arioste
Hello! In this tutorial, you'll learn how to convert pascal case to title case in javascript or typescript. You'll also learn how to convert pascal case to sentence case, kebab case or snake case.
Introduction #
Sometimes, we need to convert pascal case to title case in our programs, for example converting "AwaitingFeedback" to "Awaiting Feedback" to make it more user friendly when displaying it in the UI. For this you'll have to learn some string manipulation basics.
Converting Pascal Case to Title Case #
Pascal case (PascalCase) is a programming convention where the first letter of a compound word is capitalized. While a title case is when the first letter of each word in a sentence is capitalized. To convert pascal case to title case is pretty simple. For example:
const str = "AwaitingFeedback" const converted = str.replace(/[A-Z]/g, " $&").slice(1) // "Awaiting Feedback"12
Explanation:
- We're using the
String.prototype.replace()method to replace all the capital letters. - To match all the capital letters, we pass the regex
/A-Z/gas the first parameter. - In the second parameter, we specify a pattern argument as the replacement. The "$&" pattern argument uses the matched substring, and we just prepend a space character before it.
- Lastly, to remove the space from the first character, we use .slice(1).
Converting Pascal Case to Sentence Case #
In this example, you'll learn how to convert pascal case to sentence case. Sentence case is a convention in which only the first word is capitalized, with the rest of the words in lowercase.
const str = "AwaitingFeedback" const converted = str.replace(/[A-Z]/g, (match, offset)=>{ return offset <=0 ? match : " " + match.toLowerCase() }) console.log(converted) // "Awaiting feedback"12345
Explanation:
- We're using the
String.prototype.replace()method to replace all the capital letters. - To match all the capital letters, we pass the regex
/A-Z/gas the first parameter. - We specify a function as the second parameter.
- Next, we convert all the matching substrings to lowercase and prepend a space. But if the match is the first character, we leave it as is.
Converting Pascal Case to Kebab Case #
In this example, you'll learn how to convert pascal case (PascalCase) to kebab case (kebab-case). Kebab case is a programming convention where each word is separated by a hyphen (-).
const str = "AwaitingFeedback" const converted = str.replace(/[A-Z]/g, (match, offset)=>{ const prepend = offset <= 0? "": "-" return prepend + match.toLowerCase() }) console.log(converted) // "awaiting-feedback"123456
Explanation:
- We're using the String.prototype.replace() method to replace all the capital letters.
- To match all the capital letters, we pass the regex /A-Z/g as the first parameter.
- We specify a function as the second parameter.
- Next, we convert all the matched substrings to lowercase and prepend a hyphen (-). But if the match is the first character, we don't prepend it.
Converting Pascal Case to Snake Case #
In this example, you'll learn how to convert pascal case (PascalCase) to kebab case (snake_case). Kebab case is a programming convention where each word is separated by an underscore (_).
const str = "AwaitingFeedback" const converted = str.replace(/[A-Z]/g, (match, offset)=>{ const prepend = offset <= 0? "": "_" return prepend + match.toLowerCase() }) console.log(converted) // "awaiting_feedback"123456
Explanation:
Basically this is the same as the kebab-case example, we just changed the prepend character to an underscore (_).
Conclusion #
You learned how to convert pascal case to any other case convention in javascript and typescript. Having a basic knowledge of regular expressions and the string.prototype.replace() method can go a long way.
If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on GitHub.
Resources #
Credits: Image by Daniel Shapiro from Pixabay
