Trying to bold the first word of each array element

Question

Basically I'm trying to get a result, of something like this...

<b>Run</b> to the shop
<b>Run</b> a business
<b>Run</b> a program

Where the first word is in bold. I have an array, and a paragraph element with the class of boldBodyTemplate, and I'm trying to get the array elements to format this way. Here is a prototype of my version.

<script>
var verbsToBold = ["Run to the shop", "Run a business", "Run a program"];


for(i=0; i < verbsToBold.length; i++) {
var indexLocation1;
var indexLocation2;
verbsToBold[i].push["<b>"];
indexLocation2 = verbsToBold[i].indexOf[" "];
verbsToBold[i][indexLocation2] = "</b> ";
document.getElementsByClassName("boldBodyTemplate")[0].innerHTML += verbsToBold[i]
}
</script>

Any help would be really appreciated

Answer 1

I'd use array map and a regex

 var verbsToBold = ["Run to the shop", "Run a business", "Run a program"]; document.querySelector(".boldBodyTemplate").innerHTML = verbsToBold.map(sentence => sentence.replace(/(\w+) (.*)/,"<b>$1</b> $2")).join("<br/>")

 <div class="boldBodyTemplate"></div>

If I copy and paste I get

Answer 2

Just fixing your approach with for loop. First we take each elements in the array verbsToBold and prepend "<b>" and then we replace the first space " " with "</b> " and then append it to your element's innerHTML as you are doing by class name. Notice that I'm using a new variable verb for this so that the original data is not changed.

var verbsToBold = ["Run to the shop", "Run a business", "Run a program"];

for(i = 0; i < verbsToBold.length; i++) {
    var verb = "<b>" + verbsToBold[i];
    verb = verb.replace(" ", "</b> ");
    document.getElementsByClassName("boldBodyTemplate")[0].innerHTML += verb;
  // console.log(verb);
}

Answer 3

Loop over your array, split the values using a space to get an array of each word, get the first iteration using the key of that array, get the uppercase .toUpperCase() and replace the first word, words[0] with the upper case using .replace() .

 const verbsToBold = ["Run to the shop", "Run a business", "Run a program"]; let display = document.getElementById('display'); const toUpper = (arr) => { // forEach loop on the array arr.forEach((sentence) => { // define varaibles for the words array using.split let words = sentence.split(' '); // get the first word in the array and change to uppercase let firstWord = words[0].toUpperCase(); // replace the first word in the sentence string with the uppercase let upper = sentence.replace(words[0], firstWord); display.innerHTML += `${upper}<br>`; console.log(upper) }) } toUpper(verbsToBold)

 <div id="display"></div>

Answer 4

Besides other answers I was thinking about another approach using CSS:

 var verbsToBold = ["Run to the shop", "Run a business", "Run a program"]; var boldBodyTemplate = document.getElementsByClassName("boldBodyTemplate")[0]; for(i=0; i < verbsToBold.length; i++) { var output = '<p>'; var words = verbsToBold[i].split(' '); for (j=0; j < words.length; j++) { output += '<span>' + words[j] + ' </span>'; } output += '</p>'; boldBodyTemplate.innerHTML += output; }

 .boldBodyTemplate p span:first-child { font-weight: bold; }

 <div class="boldBodyTemplate"></div>