How to capitalize first letter and lowercase the rest of the string

Question

I am trying to capitalize the first letter of only the first word in a sentence.

This is the data in the tsx file { this.text({ id: downloadPriceHistory, defaultMessage: 'Download Price History' }) } the id shown above comes from the database where it could be send to the api in various forms.

I have tried to use this logic below:

export function titleCase(string) {
    string = 'hello World';
    const sentence = string.toLowerCase().split('');
      for (let i = 0; i < sentence.length; i++) {
          sentence[i] = sentence[i][0].toUpperCase() + sentence[i];
    }
     return sentence;

}

For example, for the input "Download Price History", the result should be "Download price history".

`return string[0].toUpperCase() + string.slice(1).toLowerCase()` — Unmitigated, Aug 20 '20 at 18:34
duplicate of https://stackoverflow.com/questions/1026069/how-do-i-make-the-first-letter-of-a-string-uppercase-in-javascript/51787897 — Constantin, Aug 20 '20 at 18:39

Unmitigated · Answer 1 · 2020-08-20T18:42:34.057

You only need to capitalize the first letter and concatenate that to the rest of the string converted to lowercase.

function titleCase(string){
  return string[0].toUpperCase() + string.slice(1).toLowerCase();
}
console.log(titleCase('Download Price History'));

This can also be accomplished with CSS by setting text-transform to lowercase for the entire element and using the ::first-letter pseudo element to set the text-transform to uppercase.

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

<p class="capitalize-first">Download Price History</p>

Constantin · Answer 2 · 2021-09-13T15:22:30.193

7

Using CSS:

p {
  text-transform: lowercase;
}
p::first-letter {
  text-transform: uppercase;
}

Using JS:

const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();

edited Sep 13 '21 at 15:22

answered Aug 20 '20 at 18:36

Constantin

2,703
1
12
20

1

just *lower case* the sliced part. – Peter Seliger Aug 20 '20 at 18:56
1

typo in the method name `toLowerCase` instead of `toLowercase` – kursus Jul 21 '21 at 17:38

Reza Mirzapour · Answer 3 · 2021-09-10T19:13:14.177

6

use ES6 template strings feature:

const titleCase = str => `${str[0].toUpperCase()}${str.slice(1).toLowerCase()}`

edited Sep 10 '21 at 19:13

answered Sep 10 '21 at 18:44

Reza Mirzapour

290
2
8

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 10 '21 at 19:02

Manas · Answer 4 · 2020-08-20T18:40:48.893

4

try - make the rest of the string in lowercase as well.

export function titleCase(string) {
     return string[0].toUpperCase() + string.substr(1).toLowerCase()
}

edited Aug 20 '20 at 18:40

answered Aug 20 '20 at 18:35

Manas

798
1
6
16

score 3 · Answer 5 · edited Aug 20 '20 at 18:46

Why not just lowercase the entire string, and the uppercase just the first letter of the new string?

function titleCase(string) {
    let sentence = string.toLowerCase();
    let titleCaseSentence = sentence.charAt(0).toUpperCase() + sentence.substring(1, sentence.length);
    return titleCaseSentence;
}

(Also, you're erasing your parameter to the function with that first line)

    string = 'hello World';

Murilo Góes de Almeida · Answer 6 · 2020-08-21T18:18:02.443

2

My suggestion is you get the first element of string and put in uppercase and get the rest of string and apply lowercase function.

titleCase(string) {
  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}

edited Aug 21 '20 at 18:18

answered Aug 20 '20 at 18:43

Murilo Góes de Almeida

1,439
2
16
35

Please include an explanation along with code examples. – Brian Lee Aug 20 '20 at 20:12

score 1 · Answer 7 · answered May 05 '21 at 12:03

If you want Regex, in one line:

str.replace(/^(\w)(.+)/, (match, p1, p2) => p1.toUpperCase() + p2.toLowerCase())

Explanation

It divides the string in 2 groups, the 1st character (\w) and the remaining characters (.+), and upper case the 1st group and lower case the second.

let str = 'the quick brown FOX'

str = str.replace(/^(\w)(.+)/, (match, p1, p2) => p1.toUpperCase() + p2.toLowerCase())

console.log(str)

How to capitalize first letter and lowercase the rest of the string

7 Answers7

Explanation

Linked

Related