Capitalize First Letter Of Each Word In A String - JavaScript

Question

What is wrong with this function? I am lost thanks for help.

function titleCase(str) {
 var splitStr = str.toLowerCase().split(' ');
 for (var i = 0; i < splitStr.length; i++) {
   if (splitStr.length[i] < splitStr.length) {
     splitStr[i].charAt(0).toUpperCase();     
   }
      str = splitStr.join(' '); 
 }
return str;
}

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

Answer 1

You are not assigning your changes to the array again, so all your efforts are in vain. Try this:

function titleCase(str) {
   var splitStr = str.toLowerCase().split(' ');
   for (var i = 0; i < splitStr.length; i++) {
       // You do not need to check if i is larger than splitStr length, as your for does that for you
       // Assign it back to the array
       splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
   }
   // Directly return the joined string
   return splitStr.join(' '); 
}

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

Answer 2

You are making complex a very easy thing. You can add this in your CSS:

 .capitalize {
    text-transform: capitalize;   
  }

In javascript, you can add the class to an element

 document.getElementById("element").className="capitalize";

Answer 3

ES6 version:

const toTitleCase = (phrase) => {
  return phrase
    .toLowerCase()
    .split(' ')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ');
};

let result = toTitleCase('maRy hAd a lIttLe LaMb');
console.log(result);

Answer 4

If you can use thirdparty library then lodash has a helper function for you.

https://lodash.com/docs/4.17.3#startCase

_.startCase('foo bar');
// => 'Foo Bar'

_.startCase('--foo-bar--');
// => 'Foo Bar'
 
_.startCase('fooBar');
// => 'Foo Bar'
 
_.startCase('__FOO_BAR__');
// => 'FOO BAR'

<script src="https://cdn.jsdelivr.net/lodash/4.17.3/lodash.min.js"></script>

Answer 5

in ES6 one line answer using arrow function

const captialize = words => words.split(' ').map( w =>  w.substring(0,1).toUpperCase()+ w.substring(1)).join(' ')

Answer 6

ES2015 version:

const titleCase = title => title
    .split(/ /g).map(word => 
        `${word.substring(0,1).toUpperCase()}${word.substring(1)}`)
    .join("");

Answer 7

𝗙𝗮𝘀𝘁𝗲𝘀𝘁 𝗦𝗼𝗹𝘂𝘁𝗶𝗼𝗻 𝗙𝗼𝗿 𝗟𝗮𝘁𝗶𝗻-𝗜 𝗖𝗵𝗮𝗿𝗮𝗰𝘁𝗲𝗿𝘀

You could simply use a regular expression function to change the capitalization of each letter. With V8 JIST optimizations, this should prove to be the fast and memory efficient.

// Only works on Latin-I strings
'tHe VeRy LOOong StRINg'.replace(/\b[a-z]|['_][a-z]|\B[A-Z]/g, function(x){return x[0]==="'"||x[0]==="_"?x:String.fromCharCode(x.charCodeAt(0)^32)})

Or, as a function:

// Only works for Latin-I strings
var fromCharCode = String.fromCharCode;
var firstLetterOfWordRegExp = /\b[a-z]|['_][a-z]|\B[A-Z]/g;
function toLatin1UpperCase(x){ // avoid frequent anonymous inline functions
    var charCode = x.charCodeAt(0);
    return charCode===39 ? x : fromCharCode(charCode^32);
}
function titleCase(string){
    string.replace(firstLetterOfWordRegExp, toLatin1UpperCase);
}

𝗗𝗲𝗺𝗼

<textarea id="input" type="text">I'm a little tea pot</textarea><br /><br />
<textarea id="output" type="text" readonly=""></textarea>
<script>
(function(){
    "use strict"
    var fromCode = String.fromCharCode;
    function upper(x){return x[0]==="'"?x:fromCode(x.charCodeAt(0) ^ 32)}
    (input.oninput = function(){
      output.value = input.value.replace(/\b[a-z]|['_][a-z]|\B[A-Z]/g, upper);
    })();
})();
</script>

Answer 8

Also a good option (particularly if you're using freeCodeCamp):

function titleCase(str) {
  var wordsArray = str.toLowerCase().split(/\s+/);
  var upperCased = wordsArray.map(function(word) {
    return word.charAt(0).toUpperCase() + word.substr(1);
  });
  return upperCased.join(" ");
}

Answer 9

Or can be done using replace(), and replace each word's first letter with its "upperCase".

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");

Answer 10

I usually prefer not to use regexp because of readability and also I try to stay away from loops. I think this is kind of readable.

function capitalizeFirstLetter(string) {
    return string && string.charAt(0).toUpperCase() + string.substring(1);
};

Answer 11

text-transform: capitalize;

Css has got it :)

Answer 12

function LetterCapitalize(str) { 
  return str.split(" ").map(item=>item.substring(0,1).toUpperCase()+item.substring(1)).join(" ")
}

Answer 13

This routine will handle hyphenated words and words with apostrophe.

function titleCase(txt) {
var firstLtr = 0;
for (var i = 0;i < text.length;i++){
    if (i == 0 &&/[a-zA-Z]/.test(text.charAt(i))) firstLtr = 2;
    if (firstLtr == 0 &&/[a-zA-Z]/.test(text.charAt(i))) firstLtr = 2;
    if (firstLtr == 1 &&/[^a-zA-Z]/.test(text.charAt(i))){
        if (text.charAt(i) == "'"){
            if (i + 2 == text.length &&/[a-zA-Z]/.test(text.charAt(i + 1))) firstLtr = 3;
            else if (i + 2 < text.length &&/[^a-zA-Z]/.test(text.charAt(i + 2))) firstLtr = 3;
        }
    if (firstLtr == 3) firstLtr = 1;
    else firstLtr = 0;
    }
    if (firstLtr == 2){
        firstLtr = 1;
        text = text.substr(0, i) + text.charAt(i).toUpperCase() + text.substr(i + 1);
    }
    else {
        text = text.substr(0, i) + text.charAt(i).toLowerCase() + text.substr(i + 1);
    }
}

}

titleCase("pAt o'Neil's"); // returns "Pat O'Neil's";

Answer 14

function titleCase(str) {

var myString = str.toLowerCase().split(' ');
for (var i = 0; i < myString.length; i++) {
    var subString = myString[i].split('');
    for (var j = 0; j < subString.length; j++) {
        subString[0] = subString[0].toUpperCase();

    }
    myString[i] = subString.join('');
}

return myString.join(' '); }

Answer 15

Raw code:

function capi(str) {
    var s2 = str.trim().toLowerCase().split(' ');
  var s3 = [];
  s2.forEach(function(elem, i) {
          s3.push(elem.charAt(0).toUpperCase().concat(elem.substring(1)));  
  });
  return s3.join(' ');
}
capi('js string exasd');

Answer 16

Used replace() with RegExp

function titleCase(str) {

  var newStr = str.toLowerCase().replace(/./, (x) => x.toUpperCase()).replace(/[^']\b\w/g, (y) => y.toUpperCase());


console.log(newStr);

}

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

Answer 17

Here's how you could do it with the map function basically, it does the same as the accepted answer but without the for-loop. Hence, saves you few lines of code.

function titleCase(text) {
  if (!text) return text;
  if (typeof text !== 'string') throw "invalid argument";

  return text.toLowerCase().split(' ').map(value => {
    return value.charAt(0).toUpperCase() + value.substring(1);
  }).join(' ');
}

console.log(titleCase("I'm A little tea pot"));

Answer 18

The function below does not change any other part of the string than trying to convert all the first letters of all words (i.e. by the regex definition \w+) to uppercase.

That means it does not necessarily convert words to Titlecase, but does exactly what the title of the question says: "Capitalize First Letter Of Each Word In A String - JavaScript"

• Don't split the string
• determine each word by the regex \w+ that is equivalent to [A-Za-z0-9_]+
  • apply function String.prototype.toUpperCase() only to the first character of each word.

function first_char_to_uppercase(argument) {
  return argument.replace(/\w+/g, function(word) {
    return word.charAt(0).toUpperCase() + word.slice(1);
  });
}

Examples:

first_char_to_uppercase("I'm a little tea pot");
// "I'M A Little Tea Pot"
// This may look wrong to you, but was the intended result for me
// You may wanna extend the regex to get the result you desire, e.g., /[\w']+/

first_char_to_uppercase("maRy hAd a lIttLe LaMb");
// "MaRy HAd A LIttLe LaMb"
// Again, it does not convert words to Titlecase

first_char_to_uppercase(
  "ExampleX: CamelCase/UPPERCASE&lowercase,exampleY:N0=apples"
);
// "ExampleX: CamelCase/UPPERCASE&Lowercase,ExampleY:N0=Apples"

first_char_to_uppercase("…n1=orangesFromSPAIN&&n2!='a sub-string inside'");
// "…N1=OrangesFromSPAIN&&N2!='A Sub-String Inside'"

first_char_to_uppercase("snake_case_example_.Train-case-example…");
// "Snake_case_example_.Train-Case-Example…"
// Note that underscore _ is part of the RegEx \w+

first_char_to_uppercase(
  "Capitalize First Letter of each word in a String - JavaScript"
);
// "Capitalize First Letter Of Each Word In A String - JavaScript"

Edit 2019-02-07: If you want actual Titlecase (i.e. only the first letter uppercase all others lowercase):

function titlecase_all_words(argument) {
  return argument.replace(/\w+/g, function(word) {
    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
  });
}

Examples showing both:

test_phrases = [
  "I'm a little tea pot",
  "maRy hAd a lIttLe LaMb",
  "ExampleX: CamelCase/UPPERCASE&lowercase,exampleY:N0=apples",
  "…n1=orangesFromSPAIN&&n2!='a sub-string inside'",
  "snake_case_example_.Train-case-example…",
  "Capitalize First Letter of each word in a String - JavaScript"
];
for (el in test_phrases) {
  let phrase = test_phrases[el];
  console.log(
    phrase,
    "<- input phrase\n",
    first_char_to_uppercase(phrase),
    "<- first_char_to_uppercase\n",
    titlecase_all_words(phrase),
    "<- titlecase_all_words\n "
  );
}

// I'm a little tea pot <- input phrase
// I'M A Little Tea Pot <- first_char_to_uppercase
// I'M A Little Tea Pot <- titlecase_all_words

// maRy hAd a lIttLe LaMb <- input phrase
// MaRy HAd A LIttLe LaMb <- first_char_to_uppercase
// Mary Had A Little Lamb <- titlecase_all_words

// ExampleX: CamelCase/UPPERCASE&lowercase,exampleY:N0=apples <- input phrase
// ExampleX: CamelCase/UPPERCASE&Lowercase,ExampleY:N0=Apples <- first_char_to_uppercase
// Examplex: Camelcase/Uppercase&Lowercase,Exampley:N0=Apples <- titlecase_all_words

// …n1=orangesFromSPAIN&&n2!='a sub-string inside' <- input phrase
// …N1=OrangesFromSPAIN&&N2!='A Sub-String Inside' <- first_char_to_uppercase
// …N1=Orangesfromspain&&N2!='A Sub-String Inside' <- titlecase_all_words

// snake_case_example_.Train-case-example… <- input phrase
// Snake_case_example_.Train-Case-Example… <- first_char_to_uppercase
// Snake_case_example_.Train-Case-Example… <- titlecase_all_words

// Capitalize First Letter of each word in a String - JavaScript <- input phrase
// Capitalize First Letter Of Each Word In A String - JavaScript <- first_char_to_uppercase
// Capitalize First Letter Of Each Word In A String - Javascript <- titlecase_all_words

Answer 19

Below is another way to capitalize first alphabet of each word in a string.

Create a custom method for String object by using prototype.

  String.prototype.capitalize = function() {
      var c = '';
      var s = this.split(' ');
      for (var i = 0; i < s.length; i++) {
          c+= s[i].charAt(0).toUpperCase() + s[i].slice(1) + ' ';
      }
      return c;
  }
  var name = "john doe";
  document.write(name.capitalize());

Answer 20

/* 1. Transform your string into lower case
2. Split your string into an array. Notice the white space i'm using for separator
3. Iterate the new array, and assign the current iteration value (array[c]) a new formatted string:
 - With the sentence: array[c][0].toUpperCase() the first letter of the string converts to upper case.
 - With the sentence: array[c].substring(1) we get the rest of the string (from the second letter index to the last one).
 - The "add" (+) character is for concatenate both strings. 
4. return array.join(' ') // returns the formatted array like a new string.*/


function titleCase(str){
    str = str.toLowerCase();
    var array = str.split(' ');
    for(var c = 0; c < array.length; c++){
        array[c] = array[c][0].toUpperCase() + array[c].substring(1);
    }
return array.join(' ');
}

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

Answer 21

Please check the code below.

function titleCase(str) {
  var splitStr = str.toLowerCase().split(' ');
  var nstr = ""; 
  for (var i = 0; i < splitStr.length; i++) {
    nstr +=  (splitStr[i].charAt(0).toUpperCase()+ splitStr[i].slice(1) + " 
    ");
  }
  console.log(nstr);
}

var strng = "this is a new demo for checking the string";
titleCase(strng);

Answer 22

A more compact (and modern) rewrite of @somethingthere's proposed solution:

function titleCase(str) {
    return str.toLowerCase().split(' ').map(function(chunk){
        return chunk.charAt(0).toUpperCase() + chunk.substring(1);
    }).join(' ');
}
    
document.write(titleCase("I'm an even smaller tea pot"));

Answer 23

As of ECMA2017 or ES8

const titleCase = (string) => {
  return string
    .split(' ')
    .map(word => word.substr(0,1).toUpperCase() + word.substr(1,word.length))
    .join(' ');
};

let result = titleCase('test test test');
console.log(result);

Explanation:
1. First, we pass the string "test test test" to our function "titleCase".
2. We split a string on the space basis so the result of first function "split" will be ["test","test","test"]
3. As we got an array, we used map function for manipulation each word in the array. We capitalize the first character and add remaining character to it.
4. In the last, we join the array using space as we split the string by sapce.