Javascript: Capitalize first letter of each word in a string

This article will discuss a general requirement to make the first letter of each word capital in a javascript string.

Table of Contents:-

Capitalize first letter of a string uppercase using replace()

Javascript’s replace() method replaces a particular pattern in the javascript with a replacement. The pattern can be a regular expression, a function, or a string.

Example:-

Capitalize the first letter of each word in the string “javascript is a versatile language”

Code:-

 function stringTitleCase(_string) {
    let capitalizeLetterFunc = match => match.toUpperCase();
    return _string.replace(/(^\w{1})|(\s{1}\w{1})/g, capitalizeLetterFunc);
  }

Usage:-

let dummyString = 'javascript is a versatile language';
console.log(stringTitleCase(dummyString));

Output:-

Javascript Is A Versatile Language

Explanation:-

  • Here in the above code replace() function is used to match the first letter of each word in a string, The regular expression used is /(^\w{1})|(\s{1}\w{1})/g where
    • /and / marks the beginning and end of a pattern
    • ^\w{1}) matches first char of string
    • | means OR
    • \s{1}\w{1} matches one char that came after one space
  • An arrow function expression is used to capitalize the letter passed as an argument to an anonymous function.

Capitalize first letter of a string uppercase using for loop and split()

Javascript’s split() method returns an array of substrings formed by splitting a given string.

Javascript’s join() method joins the elements of the array back into a string.

Example:-

Capitalize the first letter of each word in the string “javascript is a versatile language”

Code:-

  function stringTitleCase(_string) {
   var splitString = _string.toLowerCase().split(' ');
   for (var i = 0; i < splitString.length; i++) {
    splitString[i] = splitString[i].charAt(0).toUpperCase() + splitString[i].substring(1);     
   }
   return splitString.join(' '); 
  }

Usage:-

let dummyString = 'javascript is a versatile language';
console.log(stringTitleCase(dummyString));

Output:-

Javascript Is A Versatile Language

Explanation:-

  • Here in the above code, the string gets split into an array of strings based on space using split(‘ ‘) method.
  • Then the for loop is used to traverse the elements of the array.
  • Processing within for loop: The first letter of each word is capitalized, then the rest of the string is added to this capitalized letter.
  • Finally, join all the words using the join(‘ ‘) method separated by space.

Capitalize first letter of a string uppercase using map()

Javascript’s map() method creates a new array having results processed by a function on each element of the calling array.

Example:-

Capitalize the first letter of each word in the string “javascript is a versatile language”

Code:-

  function stringTitleCase(_string) {
    let letterCapitalizer = match =>  match.substring(0,1).toUpperCase()+ match.substring(1)
    return  _string.split(' ').map( letterCapitalizer).join(' ')
  }

Usage:-

let dummyString = 'javascript is a versatile language';
console.log(stringTitleCase(dummyString));

Output:-

Javascript Is A Versatile Language

Explanation:-

  • In the above code, the input string is split into an array of strings [ ‘javascript’, ‘is’, ‘a’, ‘versatile’, ‘language’ ]
  • An anonymous function match => match.substring(0,1).toUpperCase()+ match.substring(1) is to be applied to every element of array. This function converts the first letter of each word to uppercase and adds the rest of the string to this first letter.
  • Finally, join all the words separated by space using the join(‘ ‘) method.

Read More:

I hope this article helped you to capitalize the first letter of each word in a javascript string. Good Luck!!!

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top