How to do title case in JavaScript?

The \w special character matches Latin characters [a-zA-Z], numbers [0-9] and underscore _.

The \S character matches any single character other than white space.

The combination of

const paragraph = document.getElementById('paragraph');

paragraph.style.textTransform = 'capitalize';

const paragraph = document.getElementById('paragraph');

paragraph.style.textTransform = 'capitalize';

const paragraph = document.getElementById('paragraph');

paragraph.style.textTransform = 'capitalize';

The asterisk

const paragraph = document.getElementById('paragraph');

paragraph.style.textTransform = 'capitalize';

const paragraph = document.getElementById('paragraph');

paragraph.style.textTransform = 'capitalize';

We used the

const paragraph = document.getElementById('paragraph');

paragraph.style.textTransform = 'capitalize';

Each word gets passed to the function, where we convert the first character to uppercase and the rest to lowercase.

JavaScript indexes are zero-based, so the first character in a string has an index of

const paragraph = document.getElementById('paragraph');

paragraph.style.textTransform = 'capitalize';

const paragraph = document.getElementById('paragraph');

paragraph.style.textTransform = 'capitalize';

The return value from the function serves as a replacement for each match (word) in the string.

By converting each word to title case, we get a title-cased string.

Alternatively, you can use the

const paragraph = document.getElementById('paragraph');

paragraph.style.textTransform = 'capitalize';

Convert a String to Title Case using String.split()

To convert a string to title case:

1. Split the string into an array of words using the

   const paragraph = document.getElementById('paragraph');
   
   paragraph.style.textTransform = 'capitalize';
   

   9 method.
2. Use the String.replace()0 method to convert each word to title case.
3. Use the String.replace()1 method to join the words into a single string.

We used the String.split method to get an array of the words in the string.

The argument we passed to the method is the character on which the string should be split.

We want to split the string into an array of words, so we used a string containing a space as the separator.

The next step is to use the Array.map method to iterate over the array.

The function we passed to the map method gets invoked with each element (word) in the array.

We uppercase the first character of each word and lowercase the rest.

The last step is to use the Array.join method to join the array of strings into a single string with a space separator.

This is a 3-step process:

1. Split the string on each space.
2. Title case each word in the array.
3. Join the words with a space separator.

Convert a String to Title Case using CSS

To convert a string to title case:

1. Select the DOM element.
2. Set the element's String.replace()2 style to String.replace()3.

Here is the HTML for the example.

  
    
  

  
    
one two three

    
  

And here is the related JavaScript code.

const paragraph = document.getElementById('paragraph');

paragraph.style.textTransform = 'capitalize';

The String.replace()4 tag becomes String.replace()5 after running the JavaScript code.

When the String.replace()2 property is set to String.replace()3, the first letter of each word is uppercased.

The other characters in the string remain unchanged.

Note that this wouldn't work if the text is all capitalized because the String.replace()3 value doesn't lowercase the rest of the letters.

In JavaScript there is the toLowerCase(), toUpperCase(), and capitalize() properties to interact with the string of characters. But there is no explicit property that turns a sentence or string into a title case.

So in the following example, we will see how to do the task quickly and efficiently. Here, we will discuss 3 ways of converting a string into a title case.

In the first instance, we will split the string words by the whitespace and then initiate a loop work to grab each word to convert. The following example will be executed with a map.

We will also use the replace method in our map as we proceed.

Title Case a String With a for Loop in JavaScript

Before handling each string word, we must perform the conversion word by word. In that case, we will use the split() method by whitespace, and the words will be collected as an array.

Also, before doing that, we will use the toLowerCase() property to convert all the characters in a general format.

In the next step, we will consider one word of each array element to operate the

function titleCase(str) {
  return str.toLowerCase().split(' ').map(function(word) {
    return (word.charAt(0).toUpperCase() + word.slice(1));
  }).join(' ');
}
console.log(titleCase("you gone MAD?"));

Thus will fully convert the string, and lastly, we will

function titleCase(str) {
  return str.toLowerCase().split(' ').map(function(word) {
    return (word.charAt(0).toUpperCase() + word.slice(1));
  }).join(' ');
}
console.log(titleCase("you gone MAD?"));

function titleCase(str) {
  return str.toLowerCase().split(' ').map(function(word) {
    return (word.charAt(0).toUpperCase() + word.slice(1));
  }).join(' ');
}
console.log(titleCase("you gone MAD?"));

Code Snippet:

function titleCase(str) {
  str = str.toLowerCase().split(' ');
  for (var i = 0; i < str.length; i++) {
    str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1); 
  }
  return str.join(' ');
}
console.log(titleCase("hello pumpkin pumpkin you my hello honey bunny!"));

Output:

Title Case a String With the map Method in JavaScript

Our instance will grab each array element split from the string and perform the conversion operation here.

Likewise the previous example, we will select the initial characters to convert in the upper case and slice the rest portion.

Code Snippet:

function titleCase(str) {
  return str.toLowerCase().split(' ').map(function(word) {
    return (word.charAt(0).toUpperCase() + word.slice(1));
  }).join(' ');
}
console.log(titleCase("you gone MAD?"));

Output:

As you can see, after mapping each

function titleCase(str) {
  return str.toLowerCase().split(' ').map(function(word) {
    return (word.charAt(0).toUpperCase() + word.slice(1));
  }).join(' ');
}
console.log(titleCase("you gone MAD?"));

function titleCase(str) {
  return str.toLowerCase().split(' ').map(function(word) {
    return (word.charAt(0).toUpperCase() + word.slice(1));
  }).join(' ');
}
console.log(titleCase("you gone MAD?"));

Use the function titleCase(str) { return str.toLowerCase().split(' ').map(function(word) { return (word.charAt(0).toUpperCase() + word.slice(1)); }).join(' '); } console.log(titleCase("you gone MAD?")); 7 Method to Title Case a String in JavaScript

In this case, we will target the initial character of each word and turn them into upper case. And while converting, we will use the

function titleCase(str) {
  return str.toLowerCase().split(' ').map(function(word) {
    return (word.charAt(0).toUpperCase() + word.slice(1));
  }).join(' ');
}
console.log(titleCase("you gone MAD?"));

How do you make a title case?

How do you make a text title case?

How to capitalize name in JavaScript?

How to convert text in lowercase into title case in JavaScript?