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，则用高亮显示类添加跨度。

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'字符的背景颜色\ /

2 个答案: