我如何更改所有这些名称中每个 'e' 字符的背景颜色\/

Question

我希望输出如下所示：

stephen

peter

ben

但 'e' 字符具有背景颜色。这可能使用下面的代码和一些 javascript?

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


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


<script>

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

Answer 1

获取名称，将它们拆分为字母，将每个字母传递给比较函数，如果是 e，则添加带有突出显示 class 的范围。

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>

Answer 2

还有我的解决方案

const elementDiv = document.querySelector('div');
const elementText = elementDiv.textContent.trim().split(/\s+/);

elementDiv.innerHTML = '';

elementText.forEach(element => {
  elementDiv.innerHTML += `<br>${element.replace(/e/gi, '<span style="color: red;">e</span>')}`;
});

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

我如何更改所有这些名称中每个 'e' 字符的背景颜色\/

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

javascript

textnode