Capitalize first letter of each array element using JavaScript

Question

I have a string of text that I've split into an array on each comma. I then looped through the array and added each element to a string, one by one, but separated them using a line break.

var beg2 = document.twocities.begins.value;
var ans22 = "";
var words2 = beg2.split(",");

for(var i=0; i<words2.length; i++){
    ans22 += words2[i] + "<br>"; 
}

document.getElementById("ans22").innerHTML = ans22;

Now I'm trying to capitalize the first letter of each line using this code but only the first letter of the entire string ends up getting capitalized as opposed to the first on each line.

var ans23 = "";

for (var i=0; i<words2.length; i++){
    firstLetter = words[i].charAt(0);
    firstLetterCap = words[i].charAt(0).toUpperCase();
    words[i].replace(firstLetter,firstLetterCap);
    ans23 += words2[i] + "<br>"; 
}

Any suggestions would be greatly appreciated.

replace() does not change a string in place, you have to save the return value from it — Patrick Evans
– Patrick Evans, Commented Nov 17, 2018 at 17:12

slider · Accepted Answer · 2018-11-17 17:19:20Z

6

You can simplify this considerably with map by transforming each word in the sentence to its capitalized version and then joining the array back into a sentence:

var sentence = 'hello world test';
var capitalized = sentence
                  .split(' ')
                  .map(w => w.charAt(0).toUpperCase() + w.slice(1))
                  .join('<br>');

console.log(capitalized);

answered Nov 17, 2018 at 17:19

slider

13.1k1 gold badge29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammad · Accepted Answer · 2018-11-17 17:26:21Z

2

You don't need to use .replace(). Use .charAt(0) to selecting first character of string and use .slice() to selecting next part of string

var beg2 = "first,second,third";
var ans22 = "";
var words = beg2.split(",");

for (var i=0; i<words.length; i++){
  words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
  ans22 += words[i] + "<br>"; 
}
document.getElementById("ans22").innerHTML = ans22;

<div id="ans22"></div>

Also you can use CSS ::first-letter pseudo-element and text-transform property to do this work.

var str = "first,second,third";
document.getElementById("ans22").innerHTML = str.split(",").map(function(val){
  return "<div>"+val+"</div>"
}).join("");

#ans22 div::first-letter {
  text-transform: capitalize;
}

<div id="ans22"></div>

edited Nov 17, 2018 at 17:26

answered Nov 17, 2018 at 17:16

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

4 Comments

ryantdecker Over a year ago

If you go the route of inserting each into a <div>, you also have the option to skip the .toUpperCase() and just use CSS: #ans22::first-letter {text-transform:capitalize;}

Mohammad Over a year ago

@ryantdecker Good mention. Added

JacobPariseau Over a year ago

There is no need to target the first letter. The capitalize property already does this. If you are targeting, use uppercase instead.

Mohammad Over a year ago

@JacobPariseau No, if string contain two word, capitalize consider first character of every word but OP need first character of every line

Collectives™ on Stack Overflow

Capitalize first letter of each array element using JavaScript

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related