capitalizing only first letter in a contraction

Question

My challenge is to capitalize the first letter of each word in a string while making sure all the other letters are lowercase. I have spent more hours then I'm willing to admit on this and my code is shown below. It's about 95% complete.

It's only flaw is that it returns contractions like "I'm" as "I'M". For some reason it sees contractions as two separate words. I tested this my putting a console.log immediately after the step that capitalizes the first letter (I have commented it out in the example). it returns that it is capitalizing both "I" and "M" in the same step. How do I get get it change only the "I"?

function titleCase(str) {

  str = str.toLowerCase(); //make everything lowercase
  str = str.split(" "); //make the string to array

  for(i = 0; i < str.length; i++){
    var strItem = str[i]; //take item in array
    strItem = strItem.replace(/\b./g, function(m){ return m.toUpperCase(); }); //capitalize it
   //console.log(strItem);
   str[i] = strItem; //put changed item back into array
  }

  str = str.join(" "); //turn array back into string
  return str;
}

titleCase("I'm a little tea pot");

Thank you for your time.

Answer 1

What I suggest, is that you use <string>.charAt(<index>) to get the first letter of a string, and that <string>.slice(<index>) can give you a portion of a string.

Hint: After taking each word, you could take the first letter using charAt(), uppercase it, then take the rest slice of your string and lowercase it.

UPDATE:

Answer:

function upperFirstLetterInWords(str) {

  var totalString = "";
  //Take words from sentence - 
  //Use regex /\s+/g for many spaces in sentence.
  var words = str.split(" "); 

  //Take each word...
  //Using for loop as we have an array and it is
  //more efficient than foreach loop or lambda.
  for(var i = 0; i < words.length; ++i) {
     //Make your changes here.javascript:;
     totalString += words[i].charAt(0).toUpperCase() +
            words[i].slice(1).toLowerCase()  +
            " ";
  }

  //Remove last space.
  return totalString.trim();

}

console.log(upperFirstLetterInWords("I'm A LitTle TEa POt."));

Answer 2

Your problem seems to be that you are using a global match in your replacer expression.

Remove the g.

function titleCase(str) {
  str = str.toLowerCase();               // Make everything lowercase
  str = str.split(/\s+/);                // Make the string to array  
  for (var i = 0; i < str.length; i++) {
    var strItem = str[i];                // Take item in array
    strItem = strItem.replace(/\b./,
        function(m) {
              return m.toUpperCase();    // Capitalize it
        }
    );                           
    str[i] = strItem;                    // Put changed item back into array
  }
    
  return str.join(" ");                  // Turn array back into string
}

document.body.innerHTML = titleCase("I'm a little tea pot");

Simplified

You can create a capitalCase function and use it as the mapping (callback) function for each word.

function titleCase(str) {
  return str.split(/\s+/).map(captitalCase).join(' ');
}

function captitalCase(str) {
  return str.charAt(0).toUpperCase() + str.substring(1).toLowerCase();
}

document.body.innerHTML = titleCase("I'm a little tea pot");

Preserve White-Space

If you want to preserve white-space, you can replace all sequences non-white-space characters with their respective capitalCase equivalent.

function titleCase(str) {
  return str.replace(/(\S+)/g, function(m) {
    return captitalCase(m);
  });
}

function captitalCase(str) {
  return str.charAt(0).toUpperCase() + str.substring(1).toLowerCase();
}

document.body.innerHTML = titleCase("I'm   a   little  \n  tea   pot");

body {
  white-space: pre;
}

Answer 3

Out of curiosity, I wanted to see if I could come up with an alternative javascript solution without using regex:

var selectedParagraph = document.getElementsByTagName('p')[1];

var textUC = [];

function toTitleCase(element) {
var textLC = element.innerHTML.toLowerCase().split(' ');
for (var i = 0; i < textLC.length; i++) {
textUC[i] = textLC[i].substr(0,1).toUpperCase() + textLC[i].substr(1);}
element.innerHTML = textUC.join(' ');
}

window.onload = toTitleCase(selectedParagraph);

<p>I'm a little tea pot</p>
<p>I'm a little tea pot</p>