How to Captilize the First Letter of a String in JavaScript

  1. Use toUpperCase() and slice() Methods to Captilize the First Letter in JavaScript
  2. Use toUpperCase() With charAt() to Captilize the First Letter in JavaScript
  3. Use toUpperCase() and replace() to Captilize the First Letter in JavaScript

There is a number of ways to capitalize the first letter of the string in JavaScript.

For example:

  • "this is an example" -> "This is an example"
  • "the Atlantic Ocean" -> "The Atlantic Ocean"

Use toUpperCase() and slice() Methods to Captilize the First Letter in JavaScript

The toUpperCase() method transforms all letters in a string to uppercase; we will use it in combination with other JavaScript functions to reach our desired goal.

The slice(start,end) method extracts a section of a string and returns it as a new string.

start is the required parameter. It is the position where to begin slice string.

end is optional. It is the position where to end slice string. If omitted, slice() finishes at the end of the string.

Example:

<!DOCTYPE html>   
<html>   
    <head>  
        <title></title> 
    </head>  
        
    <body style = "text-align:center;">     
          
        <input id = "input" type="text" name="input"/>  
        <button onclick="capitalizeString()">  
            Capitalize 
        </button>  
        <h3 id = "modified-string" > 
        </h3> 
            
        <script>  
         
        function capitalizeString() { 
          let input = document.getElementById("input"); 
          let headingElement = document.getElementById("modified-string"); 
          let string = input.value; 
          headingElement.innerHTML = string[0].toUpperCase() +  
            string.slice(1); 
        } 
        </script>  
    </body>   
</html>

Output:

JavaScript captilize the first letter of a string

Another Example:

//shortened version
function capitalize(sentence)
{
    return sentence && sentence[0].toUpperCase() + sentence.slice(1);
}

Use toUpperCase() With charAt() to Captilize the First Letter in JavaScript

The charAt() method returns the character from the specified index in a string. The index starts at 0.

Example:

//We will use the same html above 
function capitalizeString() { 
     let input = document.getElementById("input"); 
     let headingElement = document.getElementById("modified-string"); 
     let string = input.value; 
     headingElement.innerHTML = string.charAt(0).toUpperCase() + 
         string.slice(1); ; 
 }

Use toUpperCase() and replace() to Captilize the First Letter in JavaScript

The replace() is an inbuilt method in JavaScript which searches the given string for a specified value or a regular expression pattern, replaces it, and returns a new string.

JavaScript replace() Syntax:

string.replace(paramA, paramB)

Here, the paramA is a value or regular expression, and paramB is a value to replace paramA with.

Note: The original string will remain unchanged, and the returned value is a new string with replaced items.

Quick Example on replace() Method:

function replaceFunction() {
  let str = "Google Event"; 
  let res = str.replace("Google", "Microsoft");
  console.log(res)
}
replaceFunction(); 

function replaceAllFunction() {
  let str = "Google Event will be in Headquarters of Google"; 
  let res = str.replace(/Google/g, "Microsoft");
  console.log(res)
}
replaceFunction(); 

Note: replace() method only replaces the first instance by default. We should use the regular expression global (g) modifier to replace all occurrences.

Example:

//We will use the same html above 
function capitalizeString() { 
    let input = document.getElementById("input"); 
    let headingElement = document.getElementById("modified-string"); 
    let string = input.value; 
    headingElement.innerHTML = string.replace(/^./, string[0].toUpperCase());
} 

/^./ represents the first letter of the string. Read more about regular expressions in the RegExp Tutorial and the RegExp Object Reference.

Related Article - JavaScript String

  • JavaScript Remove the First Character From String
  • How to Convert a String to Boolean in JavaScript