Convert string to title case with JavaScript

Question

Is there a simple way to convert a string to title case? E.g. john smith becomes John Smith. I\'m not looking for something complicated like John R

Answer 1

Without using regex just for reference:

String.prototype.toProperCase = function() {
  var words = this.split(' ');
  var results = [];
  for (var i = 0; i < words.length; i++) {
    var letter = words[i].charAt(0).toUpperCase();
    results.push(letter + words[i].slice(1));
  }
  return results.join(' ');
};

console.log(
  'john smith'.toProperCase()
)

Answer 2

Try this, shortest way:

str.replace(/(^[a-z])|(\s+[a-z])/g, txt => txt.toUpperCase());

Answer 3

For those of us who are scared of regular expressions (lol):

function titleCase(str)
{
    var words = str.split(" ");
    for ( var i = 0; i < words.length; i++ )
    {
        var j = words[i].charAt(0).toUpperCase();
        words[i] = j + words[i].substr(1);
    }
    return words.join(" ");
}

Answer 4

We have been having a discussion back here at the office and we think that trying to automatically correct the way people input names in the current way you want it doing is fraught with possible issues.

We have come up with several cases where different types of auto capitalization fall apart and these are just for English names alone, each language has its own complexities.

Issues with capitalizing the first letter of each name:

• Acronyms such as IBM aren’t allowed to be inputted, would turn into Ibm.

• The Name McDonald would turn into Mcdonald which is incorrect, the same thing is MacDonald too.

• Double barrelled names such as Marie-Tonks would get turned into Marie-tonks.

• Names like O’Connor would turn into O’connor.

For most of these you could write custom rules to deal with it, however, this still has issues with Acronyms as before and you get a new issue:

• Adding in a rule to fix names with Mac such as MacDonald, would the break names such as Macy turning it into MacY.

The only solution we have come up with that is never incorrect is to capitalize every letter which is a brute force method that the DBS appear to also use.

So if you want to automate the process it is as good as impossible to do without a dictionary of every single name and word and how it should be capitlized, If you don't have a rule that covers everything don't use it as it will just annoy your users and prompt people who want to enter their names correctly to go else where.

Answer 5

here's another solution using css (and javascript, if the text you want to transform is in uppercase):

html

<span id='text'>JOHN SMITH</span>

js

var str = document.getElementById('text').innerHtml;
var return_text = str.toLowerCase();

css

#text{text-transform:capitalize;}

Answer 6

If regex used in the above solutions is getting you confused, try this code:

function titleCase(str) {
  return str.split(' ').map(function(val){ 
    return val.charAt(0).toUpperCase() + val.substr(1).toLowerCase();
  }).join(' ');
}