как я могу изменить цвет фона для каждого символа 'e' во всех этих именах \ / - PullRequest
Новая
       33

как я могу изменить цвет фона для каждого символа 'e' во всех этих именах \ /

0 голосов
/ 20 июня 2019

Я бы хотел, чтобы результат выглядел так: 

stephen

peter

ben

но с символами 'e', ​​имеющими цвет фона. Возможно ли это с помощью приведенного ниже кода и некоторого JavaScript? 

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


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


<script>

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

Ответы [ 2 ]

1 голос
/ 20 июня 2019

Получите имена, разбейте их на буквы, пропустите каждую букву через функцию сравнения и добавьте диапазон с классом выделения, если это 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>
0 голосов
/ 20 июня 2019

И мое решение 

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>
...