If you want to convert a string to title case in JavaScript, bear in mind that it isn’t as simple as converting the first character of each word to uppercase. Rules of the title case vary, and there are words you should not capitalize.

If you feel confused, keep reading to understand style guides when it comes to the title case and how you can adapt your JavaScript code to them.

Title Case Rules

You might not know this, but there is no single set of rules on capitalization in the title (headlines). Different organizations (such as newspapers and publishers) use different styles for this. Most of the time, you will need to capitalize all words, except for minor words (some conjunctions, short prepositions, and articles).

In this article, we are going to use the AP Stylebook, which says:

• All principal words should be capitalized.
• Conjunctions and prepositions of more than three letters should be capitalized.
• Articles should be in lowercase.
• The first and last words should be capitalized, regardless of other rules.
• The ‘to’ in an infinitive should be capitalized.

Let’s say we have these titles:

• welcome to ittutoria.net!
• a knowledge portal for programmers
• let’s chase after your dream

According to the AP rules, they should be converted to:

• Welcome to Ittutoria.net!
• A Knowledge Portal for Programmers
• Let’s Chase After Your Dream

We are going to use JavaScript to build a function that can take in any string and convert it to title case.

Convert A String To Title Case In JavaScript

Here is how you can implement the AP title case rules in JavaScript:

const stopwords = ['yet', 'up', 'to', 'the', 'so', 'or', 'on', 'of', 'nor', 'in', 'for', 'by', 'but', 'at', 'and', 'an', 'a'];

function titleCase(str) {

    let strArr = str.toLowerCase().split(' ');

    for (var i = 0; i < strArr.length; i++) {

        if (!(stopwords.includes(strArr[i])) || strArr[i].length > 3 || i == 0 || i == strArr.length - 1) {

            strArr[i] = strArr[i].charAt(0).toUpperCase() + strArr[i].slice(1);

        }

    }

    return strArr.join(' ');

}

In this code, we define a function to take advantage of object-oriented programming. In this function, we first convert the string to lowercase with the toLowerCase() method.

Then we split it into words and put these words into an array with the help of split(). You can also use this method to read a file into an array, as we have shown here.

This method typically needs a separator parameter from the user so it can know how to divide the strings into substrings. Since we need to pay attention to words, we omit this parameter. In this case, the split() method won’t return an empty substring even when there are trailing or leading whitespaces.

We are going to process the array that contains words of our original string. A for loop is called to go through every word. We test if each word is a conjunction or preposition with fewer than four letters and whether it sits at the beginning or the end of the string.

If a word needs to be capitalized according to AP rules, we use charAt() to locate the first character and toUpperCase() to convert it to uppercase. We concatenate it with other characters. Finally, we join all the processed words in the array with join() to form the string in the title case.

Let’s test it with the strings in our first example:

const str1 = "welcome to ittutoria.net!";

const str2 = "a knowledge portal for programmers";

const str3 = "let's chase after your dream";

console.log(titleCase(str1));

console.log(titleCase(str2));

console.log(titleCase(str3));

Output:

Welcome to Ittutoria.net!

A Knowledge Portal for Programmers

Let's Chase After Your Dream

Summary

We can convert a string to title case in JavaScript with only built-in solutions. Remember to follow the rules of the title case you choose since they aren’t universally standardized.