How to convert string to camel case in JavaScript ? - GeeksforGeeks

21 Jun, 2019
Given a string and the task is to convert it into camelCase using JavaScript. In this case, the first character of string converted into lower case and other characters after space will be converted into upper case character.
Approach: Use str.replace() method to replace the first character of string into lower case and other characters after space will be into upper case. The toUpperCase() and toLowerCase() methods are used to convert the string character into upper case and lower case respectively.
Example 1: This example uses RegExp, toLowerCase() and toUpperCase() methods to convert a string into camelCase.
<!DOCTYPE html><html>  <head>    <title>        How to convert string to camel case in JavaScript ?    </title></head>  <body style="text-align:center;">          <h1 style="color:green;">         GeeksforGeeks     </h1>          <p id="GFG_UP" style=        "font-size: 15px; font-weight: bold;">    </p>          <button onclick="gfg_Run();">        click here    </button>          <p id="GFG_DOWN" style=        "color:green; font-size: 20px; font-weight: bold;">    </p>          <script>        var el_up = document.getElementById("GFG_UP");        var el_down = document.getElementById("GFG_DOWN");        var str = 'Click the button to convert to camelCase';                  el_up.innerHTML = str;          function camelCase(str) {            return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index)            {                return index == 0 ? word.toLowerCase() : word.toUpperCase();            }).replace(/\s+/g, '');        }          function gfg_Run() {            el_down.innerHTML = camelCase(str);        }    </script></body>  </html>                    
Output:
Before clicking the button:
After clicking the button:
Example 2: This example uses replace(), toLowerCase() and toUpperCase() methods to convert a string into camelCase.
<!DOCTYPE html><html>  <head>    <title>        How to convert string to camel case in JavaScript ?    </title></head>  <body style="text-align:center;">          <h1 style="color:green;">         GeeksforGeeks     </h1>          <p id="GFG_UP" style=        "font-size: 15px; font-weight: bold;">    </p>          <button onclick="gfg_Run();">        click here    </button>          <p id="GFG_DOWN" style=        "color:green; font-size: 20px; font-weight: bold;">    </p>          <script>        var el_up = document.getElementById("GFG_UP");        var el_down = document.getElementById("GFG_DOWN");        var str = 'Click the button to convert to camelCase';                  el_up.innerHTML = str;          function camelCase(str) {            return str                .replace(/\s(.)/g, function(a) {                    return a.toUpperCase();                })                .replace(/\s/g, '')                .replace(/^(.)/, function(b) {                    return b.toLowerCase();                });        }          function gfg_Run() {            el_down.innerHTML = camelCase(str);        }    </script></body>  </html>                    
Output:
Before clicking the button:
After clicking the button:
javascript-string
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Convert a string to an integer in JavaScript
How to append HTML code to a div using JavaScript ?
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?