CODEWITHSUNDEEP
javascriptcssreactjs
Shallesse
Shallesse

Reputation: 229

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

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".

Upvotes: 19

Views: 100268

Answers (9)

Alexy
Alexy

Reputation: 39

A short one using CSS :

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

Upvotes: 0

Alvin
Alvin

Reputation: 1277

Great answers were provided already, but I'm just adding a different method using replace in case anyone needs it.

export function titleCase(string) {
string = 'hello World';
const sentence = string.toLowerCase();
let normalCaseString = sentence.replace(sentence[0], sentence[0].toUpperCase();
}
 return normalCaseString;
}

The way this works is we're utilizing the replace() string method to swap the first letter in the sentence variable with an uppercased version of it. The replace method takes two parameters, the first is the section you want to replace, and the second is what you want to replace it with.

Syntax: replace(pattern, replacement)

According to MDN, pattern

Can be a string or an object with a Symbol.replace method — the typical example being a regular expression. Any value that doesn't have the Symbol.replace method will be coerced to a string.

Upvotes: -1

Constantin
Constantin

Reputation: 4001

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

Upvotes: 15

Reza Mirzapour
Reza Mirzapour

Reputation: 443

use ES6 template strings feature:

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

Upvotes: 12

Jo&#227;o Pimentel Ferreira
Jo&#227;o Pimentel Ferreira

Reputation: 16233

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)

Upvotes: 3

Murilo G&#243;es de Almeida
Murilo G&#243;es de Almeida

Reputation: 1648

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();
}

Upvotes: 3

codythecoder
codythecoder

Reputation: 64

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';

Upvotes: 4

Unmitigated
Unmitigated

Reputation: 89224

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>

Upvotes: 44

Manas
Manas

Reputation: 838

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

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

Upvotes: 6

Related Questions