[SOLVED] how can i change the background colour for every 'e' character in all of these names\/

how can i change the background colour for every 'e' character in all of these names\/

I would like the output to look like this:

stephen

peter

ben

but with the 'e' characters having a background colour. Is this possible using the below code and some javascript?

<!DOCTYPE html>
<html>
<head>
</head>
<body>


<div>
stephen
<p id="demo">peter</p>
ben
</div>


<script>

</script>
</body>
</html>

Solution

Get the names, split them into letters, pass each letter through a comparison function and add a span with the highlight class if it is an e.

var names = document.querySelectorAll('p');

names.forEach(function(name){
  var letters = name.innerText.split('');
  var newName = '';
    letters.forEach(function(letter){
    newName += isE(letter);
  })
  name.innerHTML = newName;
})

function isE(letter){
let newStr =''
  letter.toLowerCase() == 'e'
    ? newStr += '<span class="highlight">'+ letter +'</span>'
    : newStr = letter;
  return newStr;
}

.highlight {
  background-color: yellow
}

<p id="demo1">stephen</p>
<p id="demo2">peter</p>
<p id="demo3">ben</p>