This article is based on Free Code Camp Basic Algorithm Scripting “Title Case a Sentence”.
In this algorithm, we want to change a string of text so that it always has a capital letter at the start of every word.
In this article, I’m going to explain three approaches. First with a FOR loop, second using the map() method, and third using the replace() method.
Algorithm Challenge
Return the provided string with the first letter of each word capitalized. Make sure the rest of the word is in lower case.
For the purpose of this exercise, you should also capitalize connecting words like “the” and “of”.
Provided test cases
- titleCase(“I’m a little tea pot”) should return a string.
- titleCase(“I’m a little tea pot”) should return “I’m A Little Tea Pot”.
- titleCase(“sHoRt AnD sToUt”) should return “Short And Stout”.
- titleCase(“HERE IS MY HANDLE HERE IS MY SPOUT”) should return “Here Is My Handle Here Is My Spout”.
1. Title Case a Sentence With a FOR Loop
For this solution, we will use the String.prototype.toLowerCase() method, the String.prototype.split() method, the String.prototype.charAt() method, the String.prototype.slice() method and the Array.prototype.join() method.
- The toLowerCase() method returns the calling string value converted to lowercase
- The split() method splits a String object into an array of strings by separating the string into substrings.
- The charAt() method returns the specified character from a string.
- The slice() method extracts a section of a string and returns a new string.
- The join() method joins all elements of an array into a string.
We will need to add an empty space between the parenthesis of the split()method,
var strSplit = "I'm a little tea pot".split(' ');
which will output an array of separated words:
var strSplit = ["I'm", "a", "little", "tea", "pot"];
If you don’t add the space in the parenthesis, you will have this output:
var strSplit = ["I", "'", "m", " ", "a", " ", "l", "i", "t", "t", "l", "e", " ", "t", "e", "a", " ", "p", "o", "t"];
We will concatenate
str[i].charAt(0).toUpperCase()
— which will uppercase the index 0 character of the current string in the FOR loop —
and
str[i].slice(1)
— which will extract from index 1 to the end of the string.
We will set the whole string to lower case for normalization purposes.
With comments:
function titleCase(str) {
// Step 1. Lowercase the string
str = str.toLowerCase();
// str = "I'm a little tea pot".toLowerCase();
// str = "i'm a little tea pot";
// Step 2. Split the string into an array of strings
str = str.split(' ');
// str = "i'm a little tea pot".split(' ');
// str = ["i'm", "a", "little", "tea", "pot"];
// Step 3. Create the FOR loop
for (var i = 0; i < str.length; i++) {
str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1);
/* Here str.length = 5
1st iteration: str[0] = str[0].charAt(0).toUpperCase() + str[0].slice(1);
str[0] = "i'm".charAt(0).toUpperCase() + "i'm".slice(1);
str[0] = "I" + "'m";
str[0] = "I'm";
2nd iteration: str[1] = str[1].charAt(0).toUpperCase() + str[1].slice(1);
str[1] = "a".charAt(0).toUpperCase() + "a".slice(1);
str[1] = "A" + "";
str[1] = "A";
3rd iteration: str[2] = str[2].charAt(0).toUpperCase() + str[2].slice(1);
str[2] = "little".charAt(0).toUpperCase() + "little".slice(1);
str[2] = "L" + "ittle";
str[2] = "Little";
4th iteration: str[3] = str[3].charAt(0).toUpperCase() + str[3].slice(1);
str[3] = "tea".charAt(0).toUpperCase() + "tea".slice(1);
str[3] = "T" + "ea";
str[3] = "Tea";
5th iteration: str[4] = str[4].charAt(0).toUpperCase() + str[4].slice(1);
str[4] = "pot".charAt(0).toUpperCase() + "pot".slice(1);
str[4] = "P" + "ot";
str[4] = "Pot";
End of the FOR Loop*/
}
// Step 4. Return the output
return str.join(' '); // ["I'm", "A", "Little", "Tea", "Pot"].join(' ') => "I'm A Little Tea Pot"
}
titleCase("I'm a little tea pot");
Without comments:
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(' ');
}
titleCase("I'm a little tea pot");
2. Title Case a Sentence With the map() Method
For this solution, we will use the Array.prototype.map() method.
- The map() method creates a new array with the results of calling a provided function on every element in this array. Using map will call a provided callback function once for each element in an array, in order, and constructs a new array from the results.
We will lowercase and split the string as seen in the previous example before applying the map() method.
Instead of using a FOR loop, we will apply the map() method as the condition on the same concatenation from the previous example.
(word.charAt(0).toUpperCase() + word.slice(1));
With comments:
function titleCase(str) {
// Step 1. Lowercase the string
str = str.toLowerCase() // str = "i'm a little tea pot";
// Step 2. Split the string into an array of strings
.split(' ') // str = ["i'm", "a", "little", "tea", "pot"];
// Step 3. Map over the array
.map(function(word) {
return (word.charAt(0).toUpperCase() + word.slice(1));
/* Map process
1st word: "i'm" => (word.charAt(0).toUpperCase() + word.slice(1));
"i'm".charAt(0).toUpperCase() + "i'm".slice(1);
"I" + "'m";
return "I'm";
2nd word: "a" => (word.charAt(0).toUpperCase() + word.slice(1));
"a".charAt(0).toUpperCase() + "".slice(1);
"A" + "";
return "A";
3rd word: "little" => (word.charAt(0).toUpperCase() + word.slice(1));
"little".charAt(0).toUpperCase() + "little".slice(1);
"L" + "ittle";
return "Little";
4th word: "tea" => (word.charAt(0).toUpperCase() + word.slice(1));
"tea".charAt(0).toUpperCase() + "tea".slice(1);
"T" + "ea";
return "Tea";
5th word: "pot" => (word.charAt(0).toUpperCase() + word.slice(1));
"pot".charAt(0).toUpperCase() + "pot".slice(1);
"P" + "ot";
return "Pot";
End of the map() method */
});
// Step 4. Return the output
return str.join(' '); // ["I'm", "A", "Little", "Tea", "Pot"].join(' ') => "I'm A Little Tea Pot"
}
titleCase("I'm a little tea pot");
Without comments:
function titleCase(str) {
return str.toLowerCase().split(' ').map(function(word) {
return (word.charAt(0).toUpperCase() + word.slice(1));
}).join(' ');
}
titleCase("I'm a little tea pot");
3. Title Case a Sentence With the map() and the replace() Methods
For this solution, we will keep using the Array.prototype.map() method and add the String.prototype.replace() method.
- The replace() method returns a new string with some or all matches of a pattern replaced by a replacement.
In our case, the pattern for the replace() method will be a String to be replaced by a new replacement and will be treated as a verbatim string. We can also use a regular expression as the pattern to solve this algorithm.
We will lowercase and split the string as seen in the first example before applying the map() method.
With comments:
function titleCase(str) {
// Step 1. Lowercase the string
str = str.toLowerCase() // str = "i'm a little tea pot";
// Step 2. Split the string into an array of strings
.split(' ') // str = ["i'm", "a", "little", "tea", "pot"];
// Step 3. Map over the array
.map(function(word) {
return word.replace(word[0], word[0].toUpperCase());
/* Map process
1st word: "i'm" => word.replace(word[0], word[0].toUpperCase());
"i'm".replace("i", "I");
return word => "I'm"
2nd word: "a" => word.replace(word[0], word[0].toUpperCase());
"a".replace("a", "A");
return word => "A"
3rd word: "little" => word.replace(word[0], word[0].toUpperCase());
"little".replace("l", "L");
return word => "Little"
4th word: "tea" => word.replace(word[0], word[0].toUpperCase());
"tea".replace("t", "T");
return word => "Tea"
5th word: "pot" => word.replace(word[0], word[0].toUpperCase());
"pot".replace("p", "P");
return word => "Pot"
End of the map() method */
});
// Step 4. Return the output
return str.join(' '); // ["I'm", "A", "Little", "Tea", "Pot"].join(' ') => "I'm A Little Tea Pot"
}
titleCase("I'm a little tea pot");
Without comments:
function titleCase(str) {
return str.toLowerCase().split(' ').map(function(word) {
return word.replace(word[0], word[0].toUpperCase());
}).join(' ');
}
titleCase("I'm a little tea pot");
I hope you found this helpful. This is part of my “How to Solve FCC Algorithms” series of articles on the Free Code Camp Algorithm Challenges, where I propose several solutions and explain step-by-step what happens under the hood.
If you have your own solution or any suggestions, share them below in the comments.
Or you can follow me on Medium, Twitter, Github and LinkedIn.
#StayCurious, #KeepOnHacking & #MakeItHappen!