<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.box{
display:flex;
}
.box div{
padding:3px;
border-radius:50%;
width:20px;
text-align:center;
}
.box div.n{
background-color:#FFE0FF;
}
.box div.f{
background-color:#FF00FF;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".box"), function(a) {
a.innerHTML = [].map.call(a.textContent, function(a) {
return "<div class="+(a == " "? "n" : "f")+">" + a + "</div>";
}).join("");
});
});
</script>
</head>
<body>
<div class='box' >Требуется обернуть каждый символ в DIV</div>
<div class='box' >А второй раз уже не срабатывает</div>
<div class='box' >Так сработает на каждом id=box</div>
</body>
</html>