Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to convert hyphens to camel case in JavaScript?
As a developer, we often encounter hyphenated strings. A hyphenated string makes our code more readable when the string’s length is high and the name is very complex. To solve this problem we use a camel case. Camel case is a very popular naming convention, in which we combine multiple words and make one string by capitalizing the first letter of each string except the first string. In javascript, we can use this convention to create variables and function names while we cannot use hyphenated strings to create a variable. In this article, we will explore step by step multiple methods to convert hyphens to camel cases. By end of the article, you will be able to apply techniques to improve code readability and maintainability.
Here are a few examples of converting hyphens to camel case −
Input: this-is-an-object Output: thisIsAnObject Input: convert-hyphens-to-camel-case Output: convertHyphensToCamelCase
Here are a few ways to convert hyphens to camel case using javascript.
Using String.replace() Method
Using Array.map() and Array.join() Methods
Using String.replace() Method
The String.replace method is a built-in method in javascript that is used to replace a specified value with another value in a string. Here is the step-wise process to convert camel case string from hyphenated string using the String.replace method.
Search all the letters that come after the hyphen using String.replace method’s first argument.
You can use regular expressions e.g. /-([a-z])/g
This regular expression selects two elements, the first is a hyphen and the second is the letter after the hyphen.
In the String.replace method’s second argument, return the uppercase value of the second letter.
Example
In this example, we are converting a hyphenated string into camel case format using the String.replace method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Converting Hyphenated string into Camel case string in JavaScript</title>
</head>
<body>
<h3>Converting Hyphenated string into Camel case string using String.replace() method</h3>
<p id="input">String with hyphens: </p>
<p id="output"> String after converting hyphens to camel case: </p>
<script>
// The input String
let inp = "this-is-an-object";
document.getElementById("input").innerHTML += inp;
// Search for the letter after the hyphen and return the uppercase value
inp = inp.replace(/-([a-z])/g, function(k){
return k[1].toUpperCase();
})
// Print the camel case value
document.getElementById("output").innerText += inp;
</script>
</body>
</html>
Using Array.map() and Array.join() Method
The Array.map() method is javascript that creates a new array after applying a function in every element of the array. This method does not modify the original array.
The Array.join method is used to convert an Array into a String by concatenation of all the elements of the array.
To convert the camel case string from the hyphenated string we use the following steps.
Split the array elements from every hyphen using the String.split method. Now we have an array that contains all the words of the String as an array element.
Now convert every element’s first letter into uppercase using Array.map and String.toUpperCase methods.
Now Join the Arary elements using Array.join method and finally, we got our camel case String.
Example
In this example, we are converting the Hyphenated String into a Camel case String.
<html>
<head>
<title>Converting Hyphenated string into Camel case string in JavaScript</title>
</head>
<body>
<h3>Convert Hyphenated string into Camel case string using Array.map() and Array.join() methods</h3>
<p id="input">String with hyphens: </p>
<p id="output"> String after converting hyphens to camel case: </p>
<script>
// The input String
let inp = "this-is-an-object";
document.getElementById("input").innerHTML += inp;
// Convert the String into an Array
inp = inp.split("-");
// Remove and save the first element
let firstString = inp.shift();
// Convert every first letter into uppercase
inp = inp.map(function(k){
return k[0].toUpperCase() + k.substring(1);
});
// Join the Array
inp = inp.join("");
// Concatenate the first element
inp = firstString + inp;
// Print the camel case value
document.getElementById("output").innerText += inp;
</script>
</body>
</html>
2K+ Views
