5331

How do I make the first character of a string uppercase if it's a letter, but not change the case of any of the other letters?

For example:

  • "this is a test""This is a test"
  • "the Eiffel Tower""The Eiffel Tower"
  • "/index.html""/index.html"
4
  • 21
    Underscore has a plugin called underscore.string that includes this and a bunch of other great tools.
    – Aaron
    Commented Apr 15, 2013 at 19:16
  • 5
    For those using angular, there is a titlecase pipe: angular.io/api/common/TitleCasePipe
    – ecstrema
    Commented Jan 27, 2021 at 20:54
  • 3
    For those who don't know how Stack Overflow is designed to work: Resolving advice is posted to the page as an "answer". Any non-resolving advice, requests for clarity, and lone/relevant hyperlinks can be posted as comments under the question. Commented Jun 16, 2021 at 23:17
  • I’m voting to close this question because it doesn't show any effort at a solution. Commented Nov 1 at 3:00

106 Answers 106

8070
+50
function capitalizeFirstLetter(val) {
    return String(val).charAt(0).toUpperCase() + String(val).slice(1);
}

Some other answers modify String.prototype (this answer used to as well), but I would advise against this now due to maintainability (hard to find out where the function is being added to the prototype and could cause conflicts if other code uses the same name/a browser adds a native function with that same name in future).

7
  • 6
    Here's this solution in TypeScript, where the type returned is the capitalized word, rather than string: const capitalize = <T extends string>(s: T) => (s[0].toUpperCase() + s.slice(1)) as Capitalize<typeof s>;
    – Dan Tello
    Commented Mar 27, 2023 at 17:56
  • 3
    This is mentioned in answers below, but worth pointing out here: this answer does not work for all Unicode text. Passing "𐐨𐑍𐑏" to this function returns the same string, but it should return "𐐀𐑍𐑏". That's because charAt splits at UTF16 code units. There are characters with case-folding definitions in the SMP that are encoded with two UTF16 code units. While simple, this shouldn't be used. Commented Sep 28, 2023 at 7:34
  • 4
    You don't even have to reach for rare languages to break this. Unicode ligature characters break this as well: "flat" is returned as "FLat". Commented Sep 28, 2023 at 7:42
  • 1
    @Disorder it's not a launguage feature. Dan just defines the function as a type-safe one-liner ... not super useful?
    – mhvelplund
    Commented May 3 at 8:58
  • 1
    @mhvelplund just mentioned that Capitalize type in TS is a key for typing, and it's out of the box. What's wrong? typescriptlang.org/docs/handbook/…
    – Disorder
    Commented Aug 25 at 0:09
1634

Edited to add this DISCLAIMER: please read the comments to understand the risks of editing JS basic types.


Here's a more object-oriented approach:

Object.defineProperty(String.prototype, 'capitalize', {
  value: function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
  },
  enumerable: false
});

You'd call the function, like this:

"hello, world!".capitalize();

With the expected output being:

"Hello, world!"
11
  • 86
    @NielsLucas Fair enough. It has the potential to break future additions to JS. If it's code that only you will use, then it's not so bad - you just update your code and move on. The real issue here is when you start publishing libraries with code like this: your code modifies the built-in behavior for every library using your code. The consequence is that if you and another library author both override the same built-ins with your own implementations, you create bugs in the other library's code (or whichever is loaded last) leaving the user with debugging hell of unreproducible bug reports. Commented Jul 1, 2021 at 3:52
  • 6
    @aggregate1166877 Thank you for the explanation. I totally agree with you that this way is NOT gonna be a good practice for creating a library and I also agree that this way is fine for a project. Hope people will read this, cause I think this is a good attention to the original answer. Commented Jul 1, 2021 at 13:59
  • 3
    sorry but no, just don't add any functions to basic types. extend them ? const ExtendedString = class extends String { capitalize () { return this[0].toUpperCase() + this.slice(1) } } const s = new ExtendedString('hello') console.log(s.capitalize()) Commented Oct 26, 2021 at 14:01
  • if I ever add custom functions like that, my approach is to add unique scope to the names of such methods. Like for example if your project name is MyProject then it would be "hello world".myProjectCapitalise() or something along those lines. So if something external changes, it won't clash with that name. Just need to make sure the scope is unique enough in your context.
    – vir us
    Commented Nov 7, 2023 at 12:48
  • 1
    @VLAZ, ok I was wrong. Your proposed solution with Symbols indeed suits. let capitalizeSym = Symbol('capitalize') String.prototype[capitalizeSym] = function (...){...} - this avoids potential collisions due to how Symbol works. However one have to keep global reference to capitalizeSym in order to access the function later on which is not ideal neither. In most cases people would be fine with the original answer above anyways, considering the caveats. I didn't know much about Symbols though but learned something new thanks to your comment.
    – vir us
    Commented Nov 8, 2023 at 9:34
1143

Using just CSS and its text-transform property:

p::first-letter {
    text-transform: capitalize;
}
5
  • 176
    $('#mystring_id').text(string).css('text-transform','capitalize');
    – DonMB
    Commented Sep 24, 2015 at 17:34
  • 57
    Additionally, this only affects the display of the string - not the actual value. If it's in a form, e.g., the value will still be submitted as-is.
    – dmansfield
    Commented Jun 7, 2016 at 13:26
  • 16
    Also ::first-letter works ONLY on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect. Commented Dec 8, 2021 at 13:11
  • 5
    ^ I am immensely curious why this doesn't work for flex and grid....
    – Leland
    Commented May 19, 2023 at 13:01
  • not everything in a html page can be formatted with css. like title property for example. therefore you're not answering at all the question !
    – mikakun
    Commented May 23 at 10:54
507

Here is a shortened version of the popular answer that gets the first letter by treating the string as an array:

function capitalize(s)
{
    return String(s[0]).toUpperCase() + String(s).slice(1);
}

Update

According to the comments below this doesn't work in IE 7 or below.

Update 2:

To avoid undefined for empty strings (see @njzk2's comment below), you can check for an empty string:

function capitalize(s)
{
    return s && String(s[0]).toUpperCase() + String(s).slice(1);
}

ES6 version

const capitalize = s => s && String(s[0]).toUpperCase() + String(s).slice(1)

// to always return type string event when s may be falsy other than empty-string
const capitalize = s => (s && String(s[0]).toUpperCase() + String(s).slice(1)) || ""
3
  • 6
    To always return a string, I find s ? s[0].toUpperCase() + s.slice(1) : "" more readable
    – rsedlr
    Commented Jan 19, 2023 at 11:43
  • If you have a string from an object, use e.g. elem.name[0].toUpperCase() + elem.name.slice(1)
    – Timo
    Commented Feb 7 at 9:46
  • Likely unrelated to your answer, but why do you offer a one-line function for the short code? Remembering string manipulation is what we should train to keep the brain busy.
    – Timo
    Commented Feb 27 at 17:57
303

If you're interested in the performance of a few different methods posted:

Here are the fastest methods based on this jsperf test (ordered from fastest to slowest).

As you can see, the first two methods are essentially comparable in terms of performance, whereas altering the String.prototype is by far the slowest in terms of performance.

// 10,889,187 operations/sec
function capitalizeFirstLetter(string) {
    return string[0].toUpperCase() + string.slice(1);
}

// 10,875,535 operations/sec
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

// 4,632,536 operations/sec
function capitalizeFirstLetter(string) {
    return string.replace(/^./, string[0].toUpperCase());
}

// 1,977,828 operations/sec
String.prototype.capitalizeFirstLetter = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

enter image description here

1
  • 11
    i wonder why that last method is so slow, do you attach the function to the prototype every iteration ? that would be unfair Commented Oct 26, 2021 at 14:06
303

I didn’t see any mention in the existing answers of issues related to astral plane code points or internationalization. “Uppercase” doesn’t mean the same thing in every language using a given script.

Initially I didn’t see any answers addressing issues related to astral plane code points. There is one, but it’s a bit buried (like this one will be, I guess!)

Overview of the hidden problem and various approaches to it

Most of the proposed functions look like this:

function capitalizeFirstLetter(str) {
  return str[0].toUpperCase() + str.slice(1);
}

However, some cased characters fall outside the BMP (basic multilingual plane, code points U+0 to U+FFFF). For example take this Deseret text:

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉"); // "𐐶𐐲𐑌𐐼𐐲𐑉"

The first character here fails to capitalize because the array-indexed properties of strings don’t access “characters” or code points*. They access UTF-16 code units. This is true also when slicing — the index values point at code units.

It happens to be that UTF-16 code units are 1:1 with USV (Unicode scalar value) code points within two ranges, U+0 to U+D7FF and U+E000 to U+FFFF inclusive. Most cased characters fall into those two ranges, but not all of them.

From ES2015 on, dealing with this became a bit easier. String.prototype[@@iterator] yields strings corresponding to code points**. So for example, we can do this:

function capitalizeFirstLetter([ first='', ...rest ]) {
  return [ first.toUpperCase(), ...rest ].join('');
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

For longer strings, this is probably not terribly efficient*** — we don’t really need to iterate the remainder. We could use String.prototype.codePointAt to get at that first (possible) letter, but we’d still need to determine where the slice should begin. One way to avoid iterating the remainder would be to test whether the first codepoint is outside the BMP; if it isn’t, the slice begins at 1, and if it is, the slice begins at 2.

function capitalizeFirstLetter(str) {
  if (!str) return '';

  const firstCodePoint = str.codePointAt(0);
  const index = firstCodePoint > 0xFFFF ? 2 : 1;

  return String.fromCodePoint(firstCodePoint).toUpperCase() + str.slice(index);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

You could use bitwise math instead of > 0xFFFF there, but it’s probably easier to understand this way and either would achieve the same thing.

We can also make this work in ES5 and below by taking that logic a bit further if necessary. There are no intrinsic methods in ES5 for working with codepoints, so we have to manually test whether the first code unit is a surrogate****:

function capitalizeFirstLetter(str) {
  if (!str) return '';

  var firstCodeUnit = str[0];

  if (firstCodeUnit < '\uD800' || firstCodeUnit > '\uDFFF') {
    return str[0].toUpperCase() + str.slice(1);
  }

  return str.slice(0, 2).toUpperCase() + str.slice(2);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

Deeper into internationalization (whose capitalization?)

At the start I also mentioned internationalization considerations. Some of these are very difficult to account for because they require knowledge not only of what language is being used, but also may require specific knowledge of the words in the language. For example, the Irish digraph "mb" capitalizes as "mB" at the start of a word. Another example, the German eszett, never begins a word (afaik), but still helps illustrate the problem. The lowercase eszett (“ß”) capitalizes to “SS,” but “SS” could lowercase to either “ß” or “ss” — you require out-of-band knowledge of the German language to know which is correct!

The most famous example of these kinds of issues, probably, is Turkish. In Turkish Latin, the capital form of i is İ, while the lowercase form of I is ı — they’re two different letters. Fortunately we do have a way to account for this:

function capitalizeFirstLetter([ first='', ...rest ], locale) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

capitalizeFirstLetter("italy", "en") // "Italy"
capitalizeFirstLetter("italya", "tr") // "İtalya"

In a browser, the user’s most-preferred language tag is indicated by navigator.language, a list in order of preference is found at navigator.languages, and a given DOM element’s language can be obtained (usually) with Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HERE in multilanguage documents.

In agents which support Unicode property character classes in RegExp, which were introduced in ES2018, we can clean stuff up further by directly expressing what characters we’re interested in:

function capitalizeFirstLetter(str, locale=navigator.language) {
  return str.replace(/^\p{CWU}/u, char => char.toLocaleUpperCase(locale));
}

This could be tweaked a bit to also handle capitalizing multiple words in a string with fairly good accuracy for at least some languages, though outlying cases will be hard to avoid completely if doing so no matter what the primary language is.

The \p{CWU} or Changes_When_Uppercased character property matches all code points which change when uppercased in the generic case where specific locale data is absent. There are other interesting case-related Unicode character properties that you may wish to play around with. It’s a cool zone to explore but we’d go on all day if we enumerated em all here. Here’s something to get your curiosity going if you’re unfamiliar, though: \p{Lower} is a larger group than \p{LowercaseLetter} (aka \p{Ll}) — conveniently illustrated by the default character set comparison in this tool provided by Unicode. (NB: not everything you can reference there is also available in ES regular expressions, but most of the stuff you’re likely to want is).

Alternatives to case-mapping in JS (Firefox & CSS love the Dutch!)

If digraphs with unique locale/language/orthography capitalization rules happen to have a single-codepoint “composed” representation in Unicode, these might be used to make one’s capitalization expectations explicit even in the absence of locale data. For example, we could prefer the composed i-j digraph, ij / U+133, associated with Dutch, to ensure a case-mapping to uppercase IJ / U+132:

capitalizeFirstLetter('ijsselmeer'); // "IJsselmeer"

On the other hand, precomposed digraphs and similar are sometimes deprecated (like that one, it seems!) and may be undesirable in interchanged text regardless due to the potential copypaste nuisance if that’s not the normal way folks type the sequence in practice. Unfortunately, in the absence of the precomposition “hint,” an explicit locale won’t help here (at least as far as I know). If we spell ijsselmeer with an ordinary i + j, capitalizeFirstLetter will produce the wrong result even if we explicitly indicate nl as the locale:

capitalizeFirstLetter('ijsselmeer', 'nl'); // "Ijsselmeer" :(

(I’m not entirely sure whether there are some such cases where the behavior comes down to ICU data availability — perhaps someone else could say.)

If the point of the transformation is to display textual content in a web browser, though, you have an entirely different option available that will likely be your best bet: leveraging features of the web platform’s other core languages, HTML and CSS. Armed with HTML’s lang=... and CSS’s text-transform:..., you’ve got a (pseudo-)declarative solution that leaves extra room for the user agent to be “smart.” A JS API needs to have predictable outcomes across all browsers (generally) and isn’t free to experiment with heuristics. The user-agent itself is obligated only to its user, though, and heuristic solutions are fair game when the output is for a human being. If we tell it “this text is Dutch, but please display it capitalized,” the particular outcome might now vary between browsers, but it’s likely going to be the best each of them could do. Let’s see:

<!DOCTYPE html>
<dl>
<dt>Untransformed
<dd>ijsselmeer
<dt>Capitalized with CSS and <code>lang=en</code>
<dd lang="en" style="text-transform: capitalize">ijsselmeer
<dt>Capitalized with CSS and <code>lang=nl</code>
<dd lang="nl" style="text-transform: capitalize">ijsselmeer

In Chromium at the time of writing, both the English and Dutch lines come out as Ijsselmeer — so it does no better than JS. But try it in current Firefox! The element that we told the browser contains Dutch will be correctly rendered as IJsselmeer there.

This solution is purpose-specific (it’s not gonna help you in Node, anyway) but it was silly of me not to draw attention to it previously given some folks might not realize they’re googling the wrong question. Thanks @paul23 for clarifying more about the nature of the IJ digraph in practice and prompting further investigation!


As of January 2021, all major engines have implemented the Unicode property character class feature, but depending on your target support range you may not be able to use it safely yet. The last browser to introduce support was Firefox (78; June 30, 2020). You can check for support of this feature with the Kangax compat table. Babel can be used to compile RegExp literals with property references to equivalent patterns without them, but be aware that the resulting code can sometimes be enormous. You probably would not want to do this unless you’re certain the tradeoff is justified for your use case.


In all likelihood, people asking this question will not be concerned with Deseret capitalization or internationalization. But it’s good to be aware of these issues because there’s a good chance you’ll encounter them eventually even if they aren’t concerns presently. They’re not “edge” cases, or rather, they’re not by-definition edge cases — there’s a whole country where most people speak Turkish, anyway, and conflating code units with codepoints is a fairly common source of bugs (especially with regard to emoji). Both strings and language are pretty complicated!


* The code units of UTF-16 / UCS2 are also Unicode code points in the sense that e.g. U+D800 is technically a code point, but that’s not what it “means” here ... sort of ... though it gets pretty fuzzy. What the surrogates definitely are not, though, is USVs (Unicode scalar values).

** Though if a surrogate code unit is “orphaned” — i.e., not part of a logical pair — you could still get surrogates here, too.

*** maybe. I haven’t tested it. Unless you have determined capitalization is a meaningful bottleneck, I probably wouldn’t sweat it — choose whatever you believe is most clear and readable.

**** such a function might wish to test both the first and second code units instead of just the first, since it’s possible that the first unit is an orphaned surrogate. For example the input "\uD800x" would capitalize the X as-is, which may or may not be expected.

11
  • I had been wondering for a while why toUpperCase didn't really do much for some languages... but didn't quite care enough to find out. Glad I finally did, this was a very interesting read! Commented Jul 19, 2021 at 22:09
  • This doesn't seem to work with digraphs such as "IJ" in dutch. Using the latest version the example here is incorrectly capitalized to "Ijsselmeer" (The regex version). The code I used was: capitalizeFirstLetter('ijssel', 'nl-NL') - That's a correct localization string right?
    – paul23
    Commented Aug 24, 2021 at 11:38
  • 3
    In netherlands dutch IJ is considered 2 letters, which are just capitalized at the same time (in contrary to the belgian version).
    – paul23
    Commented Jun 23, 2022 at 16:52
  • 3
    Great answer! Quite embarrassing how many broken answers exist here. I would recommend adding a small "tl;dr" section at the very top. Commented Sep 28, 2023 at 7:55
  • 2
    @GéryOgam It may be helpful to know the formal term for what you’re trying to do with the second regular expression in the answer you linked: “segmentation”. Segmentation is complex and, in some cases, its behavior varies with language as well. It’s defined by UAC #29. Fortunately, ECMAScript (via ECMA-402, the Intl API) provides an API for this, %Intl.Segmenter%. You’d use granularity: "word".
    – Semicolon
    Commented Jul 23 at 19:19
171

For another case I need it to capitalize the first letter and lowercase the rest. The following cases made me change this function:

//es5
function capitalize(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
capitalize("alfredo")  // => "Alfredo"
capitalize("Alejandro")// => "Alejandro
capitalize("ALBERTO")  // => "Alberto"
capitalize("ArMaNdO")  // => "Armando"

// es6 using destructuring 
const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();
0
104

If you're already (or considering) using Lodash, the solution is easy:

_.upperFirst('fred');
// => 'Fred'

_.upperFirst('FRED');
// => 'FRED'

_.capitalize('fred') //=> 'Fred'

See their documentation: https://lodash.com/docs#capitalize

_.camelCase('Foo Bar'); //=> 'fooBar'

https://lodash.com/docs/4.15.0#camelCase

_.lowerFirst('Fred');
// => 'fred'

_.lowerFirst('FRED');
// => 'fRED'

_.snakeCase('Foo Bar');
// => 'foo_bar'

Vanilla JavaScript for first upper case:

function upperCaseFirst(str){
    return str.charAt(0).toUpperCase() + str.substring(1);
}
1
  • if chances are multiple words, try startCase. eg. _.startCase('fred') //=> 'Fred' _.startCase('fred doe') //=> 'Fred Doe'. note it removes hyphen eg. _.startCase('fred-doe') //=> 'Fred Doe'
    – tinystone
    Commented Jul 28 at 11:21
98

This is the 2018 ECMAScript 6+ Solution:

const str = 'the Eiffel Tower';
const newStr = `${str[0].toUpperCase()}${str.slice(1)}`;
console.log('Original String:', str); // the Eiffel Tower
console.log('New String:', newStr); // The Eiffel Tower

0
92

There is a very simple way to implement it by replace. For ECMAScript 6:

'foo'.replace(/^./, str => str.toUpperCase())

Result:

'Foo'
3
  • Using /^[a-z]/i will be better than using . as the prior one will not try to replace any character other than alphabets Commented Jul 6, 2019 at 5:56
  • 9
    @CodeManiac there are so many languages and letters except [a-z]
    – msdos
    Commented Sep 11, 2021 at 23:20
  • This is nice to avoid having to declare a string variable (that most other answers assume there is). For example: const date = new Date("2024-08-12").toLocaleDateString("fr-FR", { weekday: "long", year: "numeric", month: "long", day: "numeric" }).replace(/^./, str => str.toUpperCase());. Using the string concatenation solution would require putting the locale date string in a variable first (or worse, repeating the full date method). Commented Aug 12 at 10:52
70

CSS only

If the transformation is needed only for displaying on a web page:

p::first-letter {
  text-transform: uppercase;
}
  • Despite being called "::first-letter", it applies to the first character, i.e. in case of string %a, this selector would apply to % and as such a would not be capitalized.
  • In IE9+ or IE5.5+ it's supported in legacy notation with only one colon (:first-letter).

ES2015 one-liner

const capitalizeFirstChar = str => str.charAt(0).toUpperCase() + str.substring(1);

Remarks

  • In the benchmark I performed, there was no significant difference between string.charAt(0) and string[0]. Note however, that string[0] would be undefined for an empty string, so the function would have to be rewritten to use "string && string[0]", which is way too verbose, compared to the alternative.
  • string.substring(1) is faster than string.slice(1).

Benchmark between substring() and slice()

The difference is rather minuscule nowadays (run the test yourself):

  • 21,580,613.15 ops/s ±1.6% for substring(),
  • 21,096,394.34 ops/s ±1.8% (2.24% slower) for slice().

Solutions' comparison

2
  • 2
    You actually don't want to use the plus sign (+) as a concatenation method in ES6. You'll want to use template literals: eslint.org/docs/rules/prefer-template Commented Mar 19, 2018 at 15:37
  • 2
    @SterlingBourne why are you quoting an eslint rule like it should be followed by everyone?
    – Zachiah
    Commented Oct 2, 2023 at 16:32
66

Capitalize the first letter of all words in a string:

function ucFirstAllWords( str )
{
    var pieces = str.split(" ");
    for ( var i = 0; i < pieces.length; i++ )
    {
        var j = pieces[i].charAt(0).toUpperCase();
        pieces[i] = j + pieces[i].substr(1);
    }
    return pieces.join(" ");
}
5
  • 16
    Re-read question: I want to capitalize the first character of a string, but not change the case of any of the other letters.
    – JimmyPena
    Commented Nov 30, 2011 at 19:13
  • 2
    I know I did. I'd add one thing, in case the entire string starts capitalized: pieces[i] = j + pieces[i].substr(1).toLowerCase();
    – Malovich
    Commented Dec 20, 2012 at 21:16
  • 5
    Another solution to this case: function capitaliseFirstLetters(s) { return s.split(" ").map(function(w) { return w.charAt(0).toUpperCase() + w.substr(1) }).join(" ") } Can be a nice one-liner if it's not put into a function. Commented Mar 10, 2013 at 21:36
  • Would be better to first lowercase the whole string
    – Magico
    Commented Jul 6, 2016 at 10:36
  • 1
    Other than this function not answering the question, it's actually also overcomplicated. s => s.split(' ').map(x => x[0].toUpperCase() + x.slice(1)).join(' ')
    – OverCoder
    Commented Jul 28, 2017 at 18:10
63

It's always better to handle these kinds of stuff using CSS first, in general, if you can solve something using CSS, go for that first, then try JavaScript to solve your problems, so in this case try using :first-letter in CSS and apply text-transform:capitalize;

So try creating a class for that, so you can use it globally, for example: .first-letter-uppercase and add something like below in your CSS:

.first-letter-uppercase:first-letter {
    text-transform:capitalize;
}

Also the alternative option is JavaScript, so the best gonna be something like this:

function capitalizeTxt(txt) {
  return txt.charAt(0).toUpperCase() + txt.slice(1); //or if you want lowercase the rest txt.slice(1).toLowerCase();
}

and call it like:

capitalizeTxt('this is a test'); // return 'This is a test'
capitalizeTxt('the Eiffel Tower'); // return 'The Eiffel Tower'
capitalizeTxt('/index.html');  // return '/index.html'
capitalizeTxt('alireza');  // return 'Alireza'
capitalizeTxt('dezfoolian');  // return 'Dezfoolian'

If you want to reuse it over and over, it's better attach it to javascript native String, so something like below:

String.prototype.capitalizeTxt = String.prototype.capitalizeTxt || function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

and call it as below:

'this is a test'.capitalizeTxt(); // return 'This is a test'
'the Eiffel Tower'.capitalizeTxt(); // return 'The Eiffel Tower'
'/index.html'.capitalizeTxt();  // return '/index.html'
'alireza'.capitalizeTxt();  // return 'Alireza'
56
String.prototype.capitalize = function(allWords) {
   return (allWords) ? // If all words
      this.split(' ').map(word => word.capitalize()).join(' ') : // Break down the phrase to words and then recursive
                                                                 // calls until capitalizing all words
      this.charAt(0).toUpperCase() + this.slice(1); // If allWords is undefined, capitalize only the first word,
                                                    // meaning the first character of the whole string
}

And then:

 "capitalize just the first word".capitalize(); ==> "Capitalize just the first word"
 "capitalize all words".capitalize(true); ==> "Capitalize All Words"

Update November 2016 (ES6), just for fun:

const capitalize = (string = '') => [...string].map(    // Convert to array with each item is a char of
                                                        // string by using spread operator (...)
    (char, index) => index ? char : char.toUpperCase()  // Index true means not equal 0, so (!index) is
                                                        // the first character which is capitalized by
                                                        // the `toUpperCase()` method
 ).join('')                                             // Return back to string

then capitalize("hello") // Hello

3
  • 6
    I think this is a poor solution for 2 reasons: Modifying the prototype of a primitive is a bad idea. If the spec changes and they decide to pick 'capitalize' as a new proto property name, you're breaking core language functionality. Also, The method name chosen is poor. At first glance, I would think this will capitalize the entire string. Using a more descriptive name such as PHP's ucFirst or something similar might be a better idea.
    – dudewad
    Commented Feb 22, 2017 at 1:08
  • The other ES6 answer is simpler: const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();. Commented Jun 22, 2019 at 5:50
  • 1
    @dudewad in css, capitalizing of first letter of a word is call 'capitalize', and if you want to capitalize all characters u use 'uppercase', hence it's not really bad choice. Commented Jan 25, 2021 at 10:56
53

SHORTEST 3 solutions, 1 and 2 handle cases when s string is "", null and undefined:

 s&&s[0].toUpperCase()+s.slice(1)        // 32 char

 s&&s.replace(/./,s[0].toUpperCase())    // 36 char - using regexp

'foo'.replace(/./,x=>x.toUpperCase())    // 31 char - direct on string, ES6

let s='foo bar';

console.log( s&&s[0].toUpperCase()+s.slice(1) );

console.log( s&&s.replace(/./,s[0].toUpperCase()) );

console.log( 'foo bar'.replace(/./,x=>x.toUpperCase()) );

0
51

We could get the first character with one of my favorite RegExp, looks like a cute smiley: /^./

String.prototype.capitalize = function () {
  return this.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

And for all coffee-junkies:

String::capitalize = ->
  @replace /^./, (match) ->
    match.toUpperCase()

...and for all guys who think that there's a better way of doing this, without extending native prototypes:

var capitalize = function (input) {
  return input.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};
2
  • Dear lordy there's a million answers to this question! Your solution looks even nicer in es6. 'Answer'.replace(/^./, v => v.toLowerCase())
    – stwilz
    Commented Jul 29, 2019 at 0:40
  • What are you referring to by "coffee"? "CoffeeScript"? Commented Jan 6, 2021 at 23:38
51

Here is a function called ucfirst()(short for "upper case first letter"):

function ucfirst(str) {
    var firstLetter = str.substr(0, 1);
    return firstLetter.toUpperCase() + str.substr(1);
}

You can capitalise a string by calling ucfirst("some string") -- for example,

ucfirst("this is a test") --> "This is a test"

It works by splitting the string into two pieces. On the first line it pulls out firstLetter and then on the second line it capitalises firstLetter by calling firstLetter.toUpperCase() and joins it with the rest of the string, which is found by calling str.substr(1).

You might think this would fail for an empty string, and indeed in a language like C you would have to cater for this. However in JavaScript, when you take a substring of an empty string, you just get an empty string back.

3
  • 9
    @999: where does it say that substr() is deprecated? It's not, even now, three years later, let alone back in 2009 when you made this comment. Commented Nov 7, 2012 at 6:12
  • substr() may not be marked as deprecated by any popular ECMAScript implementation (I doubt it's not going to disappear anytime soon), but it's not part of the ECMAScript spec. The 3rd edition of the spec mentions it in the non-normative annex in order to "suggests uniform semantics for such properties without making the properties or their semantics part of this standard".
    – Peter Rust
    Commented Nov 21, 2012 at 22:05
  • 3
    Having 3 methods that do the same thing (substring, substr and slice) is too many, IMO. I always use slice because it supports negative indexes, it doesn't have the confusing arg-swapping behavior and its API is similar to slice in other languages.
    – Peter Rust
    Commented Nov 21, 2012 at 22:12
51

If you're ok with capitalizing the first letter of every word, and your usecase is in HTML, you can use the following CSS:

<style type="text/css">
    p.capitalize {text-transform:capitalize;}
</style>
<p class="capitalize">This is some text.</p>

This is from CSS text-transform Property (at W3Schools).

15
  • 30
    @Simon It's not stated that the string is necessarily going to be output as part of a HTML document - CSS is only going to be of use if it is. Commented Jan 18, 2012 at 9:32
  • 10
    Adam, true, but I'd guess that over 95% of the Javascript out there is used with HTML & CSS. Unfortunately, the "capitalize" statement actually capitalizes every word, so you'd still need JS to capitalize only the first letter of the string.
    – Simon E.
    Commented Jan 21, 2012 at 4:24
  • 19
    Incorrect, Dinesh. He said the first character of the string.
    – Simon E.
    Commented Jun 26, 2012 at 0:02
  • 86
    This answer, despite having a ridiculous number of upvotes, is just wrong, as it will capitalize the first letter of every word. @Ryan, you'll earn a Disciplined badge if you delete it. Please do so. Commented Nov 7, 2012 at 6:06
  • 6
    It's now javascript: $('.capitalize').css('text-transform', 'capitalize')
    – Ali Gangji
    Commented Apr 13, 2013 at 8:58
49

Use:

var str = "ruby java";

console.log(str.charAt(0).toUpperCase() + str.substring(1));

It will output "Ruby java" to the console.

0
48

If you use Underscore.js or Lodash, the underscore.string library provides string extensions, including capitalize:

_.capitalize(string) Converts first letter of the string to uppercase.

Example:

_.capitalize("foo bar") == "Foo bar"
3
  • 3
    Since, version 3.0.0, Lo-Dash has this string method available by default. Just like described in this answer: _.capitalize("foo") === "Foo".
    – bardzusny
    Commented Apr 9, 2015 at 19:09
  • Also there are usefull underscore.js function called humanize. It converts an underscored, camelized, or dasherized string into a humanized one. Also removes beginning and ending whitespace, and removes the postfix '_id'. Commented May 7, 2015 at 14:11
  • 2
    From version 4*, Lodash also lowercase() every other letter, be careful! Commented Feb 13, 2016 at 8:33
39

If you are wanting to reformat all-caps text, you might want to modify the other examples as such:

function capitalize (text) {
    return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
}

This will ensure that the following text is changed:

TEST => Test
This Is A TeST => This is a test
2
  • Probably worth noting that this will also convert things like acronyms to lowercase, so maybe not the best idea in most cases
    – monokrome
    Commented Apr 25, 2016 at 5:08
  • btw, this will break uppercasing acronyms so be careful y'all <3
    – monokrome
    Commented Mar 15, 2019 at 21:53
38
var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1);
0
34
function capitalize(s) {
    // returns the first letter capitalized + the string from index 1 and out aka. the rest of the string
    return s[0].toUpperCase() + s.substr(1);
}


// examples
capitalize('this is a test');
=> 'This is a test'

capitalize('the Eiffel Tower');
=> 'The Eiffel Tower'

capitalize('/index.html');
=> '/index.html'
2
  • 1
    How is this any better than the 2009 answer?. Commented Jan 27, 2019 at 22:13
  • 1
    It isn't @DanDascalescu. I suppose you could argue that substr/substring is a bit more semantic as opposed to slice, but that's just a matter of preference. I did however include examples with the strings provided in the question, which is a nice touch not present in the '09 example. I honestly think it boils down to 15 year old me wanting karma on StackOverflow ;)
    – Fredrik
    Commented Jun 20, 2019 at 11:50
34
yourString.replace(/\w/, c => c.toUpperCase())

I found this arrow function easiest. Replace matches the first letter character (\w) of your string and converts it to uppercase. Nothing fancier is necessary.

3
  • 5
    This should be the accepted answer, instead it's almost the last since SO keeps awarding outdated questions. Btw, it's better using /./ for two reason: /\w/ will skip all the previous not letter characters (so @@abc will become @@Abc), and then it doesn't work with not-latin characters Commented Apr 29, 2019 at 18:01
  • This is a good answer! There is a small caveat: \w Matches any alphanumeric character from the basic Latin alphabet, including the underscore. so replacing a word like _boss will yield _boss (from developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…) Commented May 5, 2022 at 17:25
  • @ȘerbanGhiță The same would apply to 1boss. If matching an underscore is not the desired behaviour, use [A-Za-z-0-9] or [^\W_].
    – InSync
    Commented May 19, 2023 at 22:35
34
String.prototype.capitalize = function(){
    return this.replace(/(^|\s)([a-z])/g, 
                        function(m, p1, p2) {
                            return p1 + p2.toUpperCase();
                        });
};

Usage:

capitalizedString = someString.capitalize();

This is a text string => This Is A Text String

5
  • +1, this is what I was really looking for. There is a minor bug though, it ought to be return.this.toLocaleLowerCase().replace( ...
    – tomdemuyt
    Commented Jan 14, 2013 at 21:55
  • +1, I found this page looking for a javascript version of phps ucfirst, which I suspect is how most people find it.
    – Benubird
    Commented Apr 9, 2013 at 13:58
  • @DanDascalescu I found this useful, so +1 utilitarianism, and -1 anal-retentiveness. He included an example, so its function is clear. Commented Aug 2, 2013 at 10:24
  • 1
    String.prototype.capitalize = function(){ return this.replace( /(^|\s)[a-z]/g , function(m){ return m.toUpperCase(); }); }; I refactor your code a bit, you need only a first match.
    – IGRACH
    Commented Apr 28, 2014 at 16:29
  • Firstly, it does something else than OP asked for, secondly regex is an inefficient overkill in this case, lastly don't modify prototypes of something you don't own
    – Przemek
    Commented Sep 23, 2017 at 19:32
34

A Solution That Works For All Unicode Characters

57 81 different answers for this question, some off-topic, and yet none of them raise the important issue that none of the solutions listed will work with Asian characters, emoji's, and other high Unicode-point-value characters in many browsers. Here is a solution that will:

const consistantCapitalizeFirstLetter = "\uD852\uDF62".length === 1 ?
    function(S) {
        "use-strict"; // Hooray! The browser uses UTF-32!
        return S.charAt(0).toUpperCase() + S.substring(1);
    } : function(S) {
        "use-strict";
        // The browser is using UCS16 to store UTF-16
        var code = S.charCodeAt(0)|0;
        return (
          code >= 0xD800 && code <= 0xDBFF ? // Detect surrogate pair
            S.slice(0,2).toUpperCase() + S.substring(2) :
            S.charAt(0).toUpperCase() + S.substring(1)
        );
    };
const prettyCapitalizeFirstLetter = "\uD852\uDF62".length === 1 ?
    function(S) {
        "use-strict"; // Hooray! The browser uses UTF-32!
        return S.charAt(0).toLocaleUpperCase() + S.substring(1);
    } : function(S) {
        "use-strict";
        // The browser is using UCS16 to store UTF-16
        var code = S.charCodeAt(0)|0;
        return (
          code >= 0xD800 && code <= 0xDBFF ? // Detect surrogate pair
            S.slice(0,2).toLocaleUpperCase() + S.substring(2) :
            S.charAt(0).toLocaleUpperCase() + S.substring(1)
        );
    };

Do note that the above solution tries to account for UTF-32. However, the specification officially states that browsers are required to do everything in UTF-16 mapped into UCS2. Nevertheless, if we all come together, do our part, and start preparing for UTF32, then there is a chance that the TC39 may allow browsers to start using UTF-32 (like how Python uses 24-bits for each character of the string). This must seem silly to an English speaker: no one who uses only latin-1 has ever had to deal with Mojibake because Latin-I is supported by all character encodings. But, users in other countries (such as China, Japan, Indonesia, etc.) are not so fortunate. They constantly struggle with encoding problems not just from the webpage, but also from the JavaScript: many Chinese/Japanese characters are treated as two letters by JavaScript and thus may be broken apart in the middle, resulting in � and � (two question-marks that make no sense to the end user). If we could start getting ready for UTF-32, then the TC39 might just allow browsers do what Python did many years ago which had made Python very popular for working with high Unicode characters: using UTF-32.

consistantCapitalizeFirstLetter works correctly in Internet Explorer 3+ (when the const is changed to var). prettyCapitalizeFirstLetter requires Internet Explorer 5.5+ (see the top of page 250 of this document). However, these fact are more of just jokes because it is very likely that the rest of the code on your webpage will not even work in Internet Explorer 8 - because of all the DOM and JScript bugs and lack of features in these older browsers. Further, no one uses Internet Explorer 3 or Internet Explorer 5.5 any more.

5
  • 2
    Glad to see an answer that brings up this concern. However, I don’t believe there are any browsers where String.fromCodePoint(65536).length === 1 will be true. That ES strings expose their UTF16ishness isn’t implementation-specific behavior — it’s a well-defined part of the spec, and it can’t be fixed due to backwards compat.
    – Semicolon
    Commented Dec 26, 2018 at 10:48
  • 3
    Re: the new final notes, WHATWG and co have landed on UTF-8 as the sole ‘correct’ encoding for all text interchange on the platform. This isn’t gonna change (and it’s a good thing). The ES issue is distinct from that, though — it’s about ES having a string abstraction where the code units of the internal ‘utf-16 + lone surrogates’ encoding (it’s neither UTF-16 nor UCS2 quite) ‘break through’ when using indexed address, String.prototype.length, etc. (1/2)
    – Semicolon
    Commented Apr 25, 2019 at 20:54
  • 1
    The body responsible for ES is TC39 rather than W3C (or WHATWG, etc), and they cannot change the existing functionality because it would break the web. Instead, they can introduce new functionality that behaves correctly. They already have begun doing this — the 'u' flag on RegExp, String.prototype.codePointAt, and String.prototype[@@iterator] provide safer alternatives to the old APIs. (2/2)
    – Semicolon
    Commented Apr 25, 2019 at 20:55
  • Wow—almost 5 years old and lots of edits. It looks really useful, but this code has clearly never been run. S or string?
    – dsl101
    Commented Feb 11, 2022 at 14:29
  • While you're possibly correct that no other answers (at the time of your posting) dealt with these characters correctly, the question also didn't ask for this.
    – Kevin B
    Commented Feb 7, 2023 at 19:11
30
var str = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);
21

Check out this solution:

var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // Returns Master
2
  • 3
    Save some keystrokes ;) stringVal.replace(/^./, stringVal[0].toUpperCase()); Commented Oct 15, 2015 at 19:30
  • 2
    Regex shouldn't be used where not necessary. It's greatly inefficient and it doesn't make code any more concise either. Moreover, stringVal[0] would be undefined for empty stringVal, and as such attempt to access property .toUpperCase() would throw an error.
    – Przemek
    Commented Sep 23, 2017 at 19:28
21

with arrow function

let fLCapital = s => s.replace(/./, c => c.toUpperCase())
fLCapital('this is a test') // "This is a test"

with arrow function, another solution

let fLCapital = s => s = s.charAt(0).toUpperCase() + s.slice(1);
fLCapital('this is a test') // "This is a test"

with array and map()

let namesCapital = names => names.map(name => name.replace(/./, c => c.toUpperCase()))
namesCapital(['james', 'robert', 'mary']) // ["James", "Robert", "Mary"]
21

There are already so many good answers, but you can also use a simple CSS transform:

text-transform: capitalize;

div.text-capitalize {
  text-transform: capitalize;
}
<h2>text-transform: capitalize:</h2>
<div class="text-capitalize">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

4
  • this will uppercase all words in a string Commented Nov 14, 2020 at 16:57
  • 2
    no, it only capitalize ist letter of each word in a sentence w3schools.com/cssref/tryit.asp?filename=trycss_text-transform
    – Deen John
    Commented Nov 15, 2020 at 1:36
  • i specifically mentioned that besides javascript you can use css too...not everyone is probably looking for an interview question answer.
    – Deen John
    Commented Jan 7, 2021 at 2:35
  • This duplicates other prior answers.
    – Sean
    Commented Apr 29, 2022 at 15:38

Not the answer you're looking for? Browse other questions tagged or ask your own question.