How can I capitalize the first letter of each word in a string using JavaScript?
JavascriptStringTitle CaseJavascript Problem Overview
I'm trying to write a function that capitalizes the first letter of every word in a string (converting the string to title case).
For instance, when the input is "I'm a little tea pot"
, I expect "I'm A Little Tea Pot"
to be the output. However, the function returns "i'm a little tea pot"
.
This is my code:
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;
}
console.log(titleCase("I'm a little tea pot"));
Javascript Solutions
Solution 1 - Javascript
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"));
Solution 2 - Javascript
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";
Solution 3 - Javascript
ECMAScript 6 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);
Solution 4 - Javascript
Shortest One Liner (also extremely fast):
text.replace(/(^\w|\s\w)/g, m => m.toUpperCase());
Explanation:
^\w
: first character of the string|
: or\s\w
: first character after whitespace(^\w|\s\w)
Capture the pattern.g
Flag: Match all occurrences.
If you want to make sure the rest is in lowercase:
text.replace(/(^\w|\s\w)(\S*)/g, (_,m1,m2) => m1.toUpperCase()+m2.toLowerCase())
Example usage:
const toTitleCase = str => str.replace(/(^\w|\s\w)(\S*)/g, (_,m1,m2) => m1.toUpperCase()+m2.toLowerCase())
console.log(toTitleCase("heLLo worLd"));
Solution 5 - Javascript
I think this way should be faster; cause it doesn't split string and join it again; just using regex.
var str = text.toLowerCase().replace(/(^\w{1})|(\s{1}\w{1})/g, match => match.toUpperCase());
Explanation:
(^\w{1})
: match first char of string|
: or(\s{1}\w{1})
: match one char that came after one spaceg
: match all- match => match.toUpperCase(): replace with can take function, so; replace match with upper case match
Solution 6 - Javascript
If you can use a third-party 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>
Solution 7 - Javascript
In ECMAScript 6, a one-line answer using the arrow function:
const captialize = words => words.split(' ').map( w => w.substring(0,1).toUpperCase()+ w.substring(1)).join(' ')
Solution 8 - Javascript
ECMAScript 6 version:
title
.split(/ /g).map(word =>
`${word.substring(0,1).toUpperCase()}${word.substring(1)}`)
.join(" ");
Solution 9 - Javascript
text-transform: capitalize;
CSS has got it :)
Solution 10 - Javascript
헙헮혀혁헲혀혁 헦헼헹혂혁헶헼헻 헙헼헿 헟헮혁헶헻-헜 헖헵헮헿헮헰혁헲헿혀
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){
return string.replace(firstLetterOfWordRegExp, toLatin1UpperCase);
}
According to this benchmark, the code is over 33% faster than the next best solution in Chrome.
헗헲헺헼
<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>
Solution 11 - Javascript
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(" ");
}
Solution 12 - Javascript
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";
Solution 13 - Javascript
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);
};
Solution 14 - Javascript
You can use modern JS syntax which can make your life much easier. Here is my code snippet for the given problem:
const capitalizeString = string => string.split(' ').map(item => item.replace(item.charAt(0), item.charAt(0).toUpperCase())).join(' ');
capitalizeString('Hi! i am aditya shrivastwa')
Solution 15 - Javascript
Or it 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");
Solution 16 - Javascript
function LetterCapitalize(str) {
return str.split(" ").map(item=>item.substring(0,1).toUpperCase()+item.substring(1)).join(" ")
}
Solution 17 - Javascript
let cap = (str) => {
let arr = str.split(' ');
arr.forEach(function(item, index) {
arr[index] = item.replace(item[0], item[0].toUpperCase());
});
return arr.join(' ');
};
console.log(cap("I'm a little tea pot"));
Fast Readable Version see benchmark http://jsben.ch/k3JVz
Solution 18 - Javascript
ES6 syntax
const captilizeAllWords = (sentence) => {
if (typeof sentence !== "string") return sentence;
return sentence.split(' ')
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ');
}
captilizeAllWords('Something is going on here')
Solution 19 - Javascript
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(' ');
}
Solution 20 - Javascript
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.
- apply function
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
Solution 21 - Javascript
TypeScript fat arrow FTW
export const formatTitleCase = (string: string) =>
string
.toLowerCase()
.split(" ")
.map((word) => word.charAt(0).toUpperCase() + word.substring(1))
.join(" ");
Solution 22 - Javascript
Here a simple one-liner
const ucFirst = t => t.replace(/(^|\s)[A-Za-zÀ-ÖØ-öø-ÿ]/g, c => c.toUpperCase());
Note that it only changes case of first letter of every word, you might want to use it as so:
console.log(ucFirst('foO bAr'));
// FoO BAr
console.log(ucFirst('foO bAr'.toLowerCase()));
// Foo Bar
// works with accents too
console.log(ucFirst('éfoO bAr'));
// ÉfoO BAr
Or based on String.prototype
here is one that handles several modes:
String.prototype.ucFirst = function (mode = 'eachWord') {
const modes = {
eachWord: /(^|\s)[A-Za-zÀ-ÖØ-öø-ÿ]/g,
firstWord: /(^|\s)[A-Za-zÀ-ÖØ-öø-ÿ]/,
firstChar: /^[A-Za-zÀ-ÖØ-öø-ÿ]/,
firstLetter: /[A-Za-zÀ-ÖØ-öø-ÿ]/,
};
if (mode in modes) {
return this.replace(modes[mode], c => c.toUpperCase());
} else {
throw `error: ucFirst invalid mode (${mode}). Parameter should be one of: ` + Object.keys(modes).join('|');
}
};
console.log('eachWord', 'foO bAr'.ucFirst());
// FoO BAr
console.log('eachWord', 'foO bAr'.toLowerCase().ucFirst());
// Foo Bar
console.log('firstWord', '1foO bAr'.ucFirst('firstWord'));
// 1foO BAr
console.log('firstChar', '1foO bAr'.ucFirst('firstChar'));
// 1foO bAr
console.log('firstLetter', '1foO bAr'.ucFirst('firstLetter'));
// 1FoO bAr
Edit:
Or based on String.prototype
one that handles several modes and an optional second argument to specify word separators (String
or RegExp
):
String.prototype.ucFirst = function (mode = 'eachWord', wordSeparator = /\s/) {
const letters = /[A-Za-zÀ-ÖØ-öø-ÿ]/;
const ws =
'^|' +
(wordSeparator instanceof RegExp
? '(' + wordSeparator.source + ')'
: // sanitize string for RegExp https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex#comment52837041_6969486
'[' + wordSeparator.replace(/[[{}()*+?^$|\]\.\\]/g, '\\$&') + ']');
const r =
mode === 'firstLetter'
? letters
: mode === 'firstChar'
? new RegExp('^' + letters.source)
: mode === 'firstWord' || mode === 'eachWord'
? new RegExp(
'(' + ws + ')' + letters.source,
mode === 'eachWord' ? 'g' : undefined
)
: undefined;
if (r) {
return this.replace(r, (c) => c.toUpperCase());
} else {
throw `error: ucFirst invalid mode (${mode}). Parameter should be one of: firstLetter|firstChar|firstWord|eachWord`;
}
};
console.log("mike o'hara".ucFirst('eachWord', " \t\r\n\f\v'"));
// Mike O'Hara
console.log("mike o'hara".ucFirst('eachWord', /[\s']/));
// Mike O'Hara
Solution 23 - Javascript
A more compact (and modern) rewrite of @somethingthere's proposed solution:
let titleCase = (str => str.toLowerCase().split(' ').map( c => c.charAt(0).toUpperCase() + c.substring(1)).join(' '));
document.write(titleCase("I'm an even smaller tea pot"));
Solution 24 - Javascript
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"));
Solution 25 - Javascript
Below is another way to capitalize the first alphabet of each word in a string.
Create a custom method for a 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());
Solution 26 - Javascript
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('JavaScript string exasd');
Solution 27 - Javascript
I used replace()
with a regular expression:
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")
Solution 28 - Javascript
A complete and simple solution goes here:
String.prototype.replaceAt=function(index, replacement) {
return this.substr(0, index) + replacement+ this.substr(index
+ replacement.length);
}
var str = 'k j g u i l p';
function capitalizeAndRemoveMoreThanOneSpaceInAString() {
for(let i = 0; i < str.length-1; i++) {
if(str[i] === ' ' && str[i+1] !== '')
str = str.replaceAt(i+1, str[i+1].toUpperCase());
}
return str.replaceAt(0, str[0].toUpperCase()).replace(/\s+/g, ' ');
}
console.log(capitalizeAndRemoveMoreThanOneSpaceInAString(str));
Solution 29 - Javascript
/* 1. Transform your string into lower case
2. Split your string into an array. Notice the white space I'm using for the 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");
Solution 30 - Javascript
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);
Solution 31 - Javascript
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:
- First, we pass the string "test test test" to our function "titleCase".
- We split a string on the space basis so the result of first function "split" will be ["test","test","test"]
- 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.
- In the last, we join the array using space as we split the string by sapce.
Solution 32 - Javascript
function titleCase(str) {
//First of all, lets make all the characters lower case
let lowerCaseString = "";
for (let i = 0; i < str.length; i++) {
lowerCaseString = lowerCaseString + str[i].toLowerCase();
}
//Now lets make the first character in the string and the character after the empty character upper case and leave therest as it is
let i = 0;
let upperCaseString = "";
while (i < lowerCaseString.length) {
if (i == 0) {
upperCaseString = upperCaseString + lowerCaseString[i].toUpperCase();
} else if (lowerCaseString[i - 1] == " ") {
upperCaseString = upperCaseString + lowerCaseString[i].toUpperCase();
} else {
upperCaseString = upperCaseString + lowerCaseString[i];
}
i = i + 1;
}
console.log(upperCaseString);
return upperCaseString;
}
titleCase("hello woRLD");
Solution 33 - Javascript
Here I have used three functions toLowerCase()
, toUpperCase()
and replace(regex,replacer)
function titleCase(str) {
return str.toLowerCase().replace(/^(\w)|\s(\w)/g, (grp) => grp.toUpperCase());
}
titleCase("I'm a little tea pot");
Solution 34 - Javascript
This is a simple method to convert and is able to pass a value to get the desired output.
String.prototype.toChangeCase = function (type) {
switch (type) {
case 'upper-first':
return this.charAt(0).toUpperCase() + this.substr(1).toLowerCase();
case 'upper-each':
return this.split(' ').map(word => {
return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
}).join(' ');
default:
throw Error(`In order to get the output pass a value 'upper-first', 'upper-each'`);
}
}
Outputs
"capitalize first Letter of Each word in a Sstring".toChangeCase('upper-first')
"Capitalize first letter of each word in a sstring"
"capitalize first Letter of Each word in a Sstring".toChangeCase('upper-each')
"Capitalize First Letter Of Each Word In A Sstring"
"Capitalize First Letter Of Each Word In A String".toChangeCase()
VM380:12 Uncaught Error: In order to get the output pass a value 'upper-first', 'upper-each'
at String.toChangeCase (<anonymous>:12:19)
at <anonymous>:16:52
Solution 35 - Javascript
Here I used the replace()
function.
function titleCase(str){
return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
Solution 36 - Javascript
let string = "I'm a little tea pot";
Now, create a function that will take a string as an argument.
function titleCase(str) {
return str.split(" ").map(s => s.charAt(0).toUpperCase() + s.substr(1).toLowerCase()).join(" ")
}
Output
titleCase(string); // "I'm A Little Tea Pot"
Solution 37 - Javascript
You could do it is simple way like this in one line with map with toUpperCase:
text.split(' ').map(w => { let t = w.split(''); t[0] = t[0].toUpperCase(); return t.join('') }).join(' ')
Solution 38 - Javascript
I have done this using this code below, hope it will help you:
<p id="p1">This is a paragraph.</p>
<script>
const capitalize = (mySentence) => {
const words = mySentence.split(" ");
for (let i = 0; i < words.length; i++) {
words[i] = words[i][0].toUpperCase() + words[i].substr(1);
}
return words.join(" ");
};
const result = capitalize('This is a sample text');
document.getElementById("p1").innerHTML = result;
</script>
Solution 39 - Javascript
var str = "hello world"
var result = str.split(" ").map(element => {
return element[0].toUpperCase() + element.slice(1);
});
result = result.join(" ")
console.log(result);
Solution 40 - Javascript
Try This Function:
const capitializeName = (name) => {
const splitName = name.split(' ');
const namesUpper = [];
for (const n of splitName) {
namesUpper.push(n[0].toUpperCase() + n.slice(1));
}
console.log(namesUpper.join(' '));
};
capitializeName('jahid bhuiyan');
Solution 41 - Javascript
You can build upon this inputString[0].toUpperCase() + inputString.slice(1).toLowerCase()
:)