Capitalize the first letter of each word

Question

var name = "AlbERt EINstEiN";

function nameChanger(oldName) {
var finalName = oldName;
// Your code goes here!
finalName = oldName.toLowerCase();

finalName = finalName.replace(finalName.charAt(0), finalName.charAt(0).toUpperCase());

for(i = 0; i < finalName.length; i++) {
    if (finalName.charAt(i) === " ")
        finalName.replace(finalName.charAt(i+1), finalName.charAt(i+1).toUpperCase());
}


// Don't delete this line!
return finalName;
};

// Did your code work? The line below will tell you!
console.log(nameChanger(name));

My code as is, returns 'Albert einstein'. I'm wondering where I've gone wrong? If I add in

console.log(finalName.charAt(i+1));

AFTER the if statement, and comment out the rest, it prints 'e', so it recognizes charAt(i+1) like it should... I just cannot get it to capitalize that first letter of the 2nd word.

Answer 1

There are two problems with your code sample. I'll go through them one-by-one.

Strings are immutable

This doesn't work the way you think it does:

finalName.replace(finalName.charAt(i+1), finalName.charAt(i+1).toUpperCase());

You need to change it to:

finalName = finalName.replace(finalName.charAt(i+1), finalName.charAt(i+1).toUpperCase());

In JavaScript, strings are immutable. This means that once a string is created, it can't be changed. That might sound strange since in your code, it seems like you are changing the string finalName throughout the loop with methods like replace().

But in reality, you aren't actually changing it! The replace() function takes an input string, does the replacement, and produces a new output string, since it isn't actually allowed to change the input string (immutability). So, tl;dr, if you don't capture the output of replace() by assigning it to a variable, the replaced string is lost.

Incidentally, it's okay to assign it back to the original variable name, which is why you can do finalName = finalName.replace(...).

---

Replace is greedy

The other problem you'll run into is when you use replace(), you'll be replacing all of the matching characters in the string, not just the ones at the position you are examining. This is because replace() is greedy - if you tell it to replace 'e' with 'E', it'll replace all of them!

What you need to do, essentially, is:

1. Find a space character (you've already done this)
2. Grab all of the string up to and including the space; this "side" of the string is good.
3. Convert the very next letter to uppercase, but only that letter.
4. Grab the rest of the string, past the letter you converted.
5. Put all three pieces together (beginning of string, capitalized letter, end of string).

The slice() method will do what you want:

if (finalName.charAt(i) === " ") {
    // Get ONLY the letter after the space
    var startLetter = finalName.slice(i+1, i+2);
    // Concatenate the string up to the letter + the letter uppercased + the rest of the string
    finalName = finalName.slice(0, i+1) + startLetter.toUpperCase() + finalName.slice(i+2);
}

---

Another option is regular expression (regex), which the other answers mentioned. This is probably a better option, since it's a lot cleaner. But, if you're learning programming for the first time, it's easier to understand this manual string work by writing the raw loops. Later you can mess with the efficient way to do it.

Working jsfiddle: http://jsfiddle.net/9dLw1Lfx/

Further reading:

• Are JavaScript strings immutable? Do I need a "string builder" in JavaScript?
• slice() method

Answer 2

You can simplify this down a lot if you pass a RegExp /pattern/flags and a function into str.replace instead of using substrings

function nameChanger(oldName) {
    var lowerCase = oldName.toLowerCase(),
        titleCase = lowerCase.replace(/\b./g, function ($0) {return $0.toUpperCase()});
    return titleCase;
};

In this example I've applied the change to any character . after a word boundary \b, but you may want the more specific /(^| )./g

Answer 3

Another good answer to this question is to use RegEx to do this for you.

var re = /(\b[a-z](?!\s))/g;
var s = "fort collins, croton-on-hudson, harper's ferry, coeur d'alene, o'fallon"; 
s = s.replace(re, function(x){return x.toUpperCase();});
console.log(s); // "Fort Collins, Croton-On-Hudson, Harper's Ferry, Coeur D'Alene, O'Fallon"

The regular expression being used may need to be changed up slightly, but this should give you an idea of what you can do with regular expressions

Capitalize Letters with JavaScript

Answer 4

The problem is twofold:

1) You need to return a value for finalName.replace, as the method returns an element but doesn't alter the one on which it's predicated.

2) You're not iterating through the string values, so you're only changing the first word. Don't you want to change every word so it's in lower case capitalized?

This code would serve you better:

   var name = "AlbERt EINstEiN";

function nameChanger(oldName) {

    // Your code goes here!

    var finalName = [];
    oldName.toLowerCase().split(" ").forEach(function(word) {
        newWord = word.replace(word.charAt(0), word.charAt(0).toUpperCase());
        finalName.push(newWord);
    });


    // Don't delete this line!
    return finalName.join(" ");
};

    // Did your code work? The line below will tell you!
    console.log(nameChanger(name));

Answer 5

if (finalName.charAt(i) === " ")

Shouldn't it be

if (finalName.charAt(i) == " ")

Doesn't === check if the object types are equal which should not be since one it a char and the other a string.